Design System

@shellapps/react-ui is the shared component library and design system powering all ShellApps interfaces — from Experience to Auth and internal tools.

Design Principles

• Consistent — Same components, same behaviour, everywhere
• Themeable — 11 built-in themes with full custom theme support
• Accessible — WCAG 2.1 AA compliant, keyboard navigable, screen reader friendly
• Composable — Small, focused components that compose into complex UIs

What's Included

• 30+ components — Button, Input, Card, Modal, Select, and more
• Theme system — ThemeProvider with CSS custom properties
• Dark/light/system modes — Automatic or manual mode switching
• TypeScript — Full type definitions for all components and props

Quick Example

import { ThemeProvider, Button, Card } from '@shellapps/react-ui';
 
function App() {
  return (
    <ThemeProvider theme="ocean" mode="system">
      <Card>
        <Card.Header>Welcome</Card.Header>
        <Card.Body>
          <p>Get started with ShellApps</p>
          <Button variant="primary">Let's go</Button>
        </Card.Body>
      </Card>
    </ThemeProvider>
  );
}

Getting Started

Head to Installation to add @shellapps/react-ui to your project.

Related

• Installation — Setup guide
• Components — Full component catalogue
• Theming — Customise colours, fonts, and modes