Components

The full component catalogue for @shellapps/react-ui.

Button

import { Button } from '@shellapps/react-ui';
 
<Button variant="primary" size="md" onClick={handleClick}>
  Save Changes
</Button>
 
<Button variant="ghost" loading>
  Processing...
</Button>

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'danger'`	`'primary'`	Visual style
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Button size
`loading`	`boolean`	`false`	Show loading spinner
`disabled`	`boolean`	`false`	Disable interactions
`fullWidth`	`boolean`	`false`	Expand to container width

Input

import { Input } from '@shellapps/react-ui';
 
<Input
  label="Email"
  type="email"
  placeholder="you@example.com"
  error="Invalid email address"
/>

Prop	Type	Default	Description
`label`	`string`	—	Label text
`type`	`string`	`'text'`	Input type
`placeholder`	`string`	—	Placeholder text
`error`	`string`	—	Error message
`disabled`	`boolean`	`false`	Disable input

Card

Composable card with Header, Body, and Footer sub-components.

import { Card } from '@shellapps/react-ui';
 
<Card elevated>
  <Card.Header>Title</Card.Header>
  <Card.Body>Content goes here</Card.Body>
  <Card.Footer>
    <Button variant="primary">Action</Button>
  </Card.Footer>
</Card>

Prop	Type	Default	Description
`elevated`	`boolean`	`false`	Add box shadow
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Internal padding

Modal

import { Modal, Button } from '@shellapps/react-ui';
 
const [open, setOpen] = useState(false);
 
<Button onClick={() => setOpen(true)}>Open Modal</Button>
 
<Modal open={open} onClose={() => setOpen(false)}>
  <Modal.Header>Confirm Action</Modal.Header>
  <Modal.Body>Are you sure?</Modal.Body>
  <Modal.Footer>
    <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
    <Button variant="danger">Delete</Button>
  </Modal.Footer>
</Modal>

Prop	Type	Default	Description
`open`	`boolean`	`false`	Control visibility
`onClose`	`() => void`	—	Close callback
`size`	`'sm' \| 'md' \| 'lg' \| 'full'`	`'md'`	Modal width
`closeOnOverlay`	`boolean`	`true`	Close when clicking backdrop

Select

import { Select } from '@shellapps/react-ui';
 
<Select
  label="Theme"
  options={[
    { value: 'ocean', label: 'Ocean' },
    { value: 'forest', label: 'Forest' },
    { value: 'sunset', label: 'Sunset' },
  ]}
  onChange={(value) => setTheme(value)}
/>

Prop	Type	Default	Description
`label`	`string`	—	Label text
`options`	`{ value: string; label: string }[]`	`[]`	Options list
`value`	`string`	—	Controlled value
`onChange`	`(value: string) => void`	—	Change handler
`placeholder`	`string`	`'Select...'`	Placeholder
`multi`	`boolean`	`false`	Allow multiple selection

Badge

import { Badge } from '@shellapps/react-ui';
 
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>

Prop	Type	Default	Description
`variant`	`'default' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`	Colour variant
`size`	`'sm' \| 'md'`	`'md'`	Badge size

Avatar

import { Avatar } from '@shellapps/react-ui';
 
<Avatar src="https://example.com/photo.jpg" alt="Alex" size="lg" />
<Avatar fallback="A" size="md" />

Prop	Type	Default	Description
`src`	`string`	—	Image URL
`alt`	`string`	—	Alt text
`fallback`	`string`	—	Text when no image
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Avatar size

ThemeProvider

See Theming for full details.

import { ThemeProvider } from '@shellapps/react-ui';
 
<ThemeProvider theme="ocean" mode="system">
  {children}
</ThemeProvider>

Prop	Type	Default	Description
`theme`	`string`	`'default'`	Theme name
`mode`	`'light' \| 'dark' \| 'system'`	`'system'`	Colour mode
`children`	`ReactNode`	—	App content

Overview Theming