# Charizard Design System (@hybr1d-tech/charizard)

> The React 19 component library powering ZenAdmin (https://www.zenadmin.ai). ESM-only,
> tree-shakeable named exports, TypeScript prop types included, styles injected on import.
> Built on Zag.js state machines, TanStack Table v8, Zustand, react-day-picker and dnd-kit.

Install: `pnpm add @hybr1d-tech/charizard`
If your bundler strips CSS side effects: `import '@hybr1d-tech/charizard/styles.css'`
Components needing router context (Button links, Breadcrumbs, TaskCards, Error pages) must render inside a react-router v8 router.
This index lists the current generation of every component. Some are still exported under a V2-suffixed
name (e.g. InputV2, ModalV2) — always import the exact name shown in the component's Import line.
Superseded originals (Input, Modal, Checkbox, …) remain exported for backwards compatibility only; do not use them in new code.

Human-browsable showcase with live demos of every component: https://ui.zenadmin.co/
Structured version of this index: https://ui.zenadmin.co/components.json
Full markdown page for one component (description, imports, snippets, prop tables): https://ui.zenadmin.co/components/<slug>.md
Release history: https://ui.zenadmin.co/#/changelog

## Actions

### Button

Primary, secondary and tertiary buttons, icon-only buttons and grouped actions with menus.

- Import: `import {Button} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/button
- Markdown: https://ui.zenadmin.co/components/button.md

```tsx
import {Button, BUTTON_VARIANT} from '@hybr1d-tech/charizard'

<Button>Primary</Button>
<Button variant={BUTTON_VARIANT.SECONDARY}>Secondary</Button>
<Button variant={BUTTON_VARIANT.TERTIARY}>Tertiary</Button>
<Button variant={BUTTON_VARIANT.LINK}>Link</Button>
```

```tsx
import {Button, BUTTON_VARIANT} from '@hybr1d-tech/charizard'

<Button.GroupAction
  variant={BUTTON_VARIANT.SECONDARY}
  menuItems={[
    {label: 'Item 1', onClick: () => console.log('Item 1 clicked')},
    {label: 'Disabled Item', onClick: () => {}, disabled: true},
  ]}
>
  Click me
</Button.GroupAction>
```

### SegmentedControl

Mutually exclusive option switcher rendered as connected segments.

- Import: `import {SegmentedControl} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/segmented-control
- Markdown: https://ui.zenadmin.co/components/segmented-control.md

```tsx
import {SegmentedControl} from '@hybr1d-tech/charizard'

<SegmentedControl
  items={[
    {label: 'Overview', value: 'overview', component: <OverviewPanel />},
    {label: 'Activity', value: 'activity', component: <ActivityPanel />},
    {label: 'Settings', value: 'settings', component: <SettingsPanel />},
  ]}
/>
```

```tsx
<SegmentedControl
  items={items}
  defaultValue="activity"
/>
```

## Forms & inputs

### Input

Text input and textarea with labels, error handling, icons and adornments.

- Import: `import {InputV2, TextareaV2, InputControlV2, LabelV2} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/input
- Markdown: https://ui.zenadmin.co/components/input.md

```tsx
import {InputV2, TextareaV2} from '@hybr1d-tech/charizard'

<InputV2 placeholder="Enter asset tag" />
<InputV2 placeholder="Enter serial number" errorMsg="Serial number is required" />
<InputV2 placeholder="Managed by MDM" disabled />
<TextareaV2 placeholder="Add a note about this device" rows={3} />
```

```tsx
import {InputControlV2, LabelV2, InputV2} from '@hybr1d-tech/charizard'

<InputControlV2>
  <LabelV2 required info="Shown on the device sticker">Asset tag</LabelV2>
  <InputV2 placeholder="e.g. ZEN-MBP-0042" />
</InputControlV2>
```

### Checkbox

Checkbox with label, indeterminate and disabled states.

- Import: `import {CheckboxV2} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/checkbox
- Markdown: https://ui.zenadmin.co/components/checkbox.md

```tsx
import {CheckboxV2} from '@hybr1d-tech/charizard'

const [subscribed, setSubscribed] = useState(true)

<CheckboxV2
  label="Email me when an order ships"
  checked={subscribed}
  onChange={setSubscribed}
/>
```

```tsx
const allChecked = selected.length === devices.length
const someChecked = selected.length > 0 && !allChecked

<CheckboxV2
  label="All devices"
  checked={allChecked}
  indeterminate={someChecked}
  onChange={checked => setSelected(checked ? devices.map(d => d.id) : [])}
/>
```

### RadioGroup

Single-choice radio group with horizontal and vertical layouts.

- Import: `import {RadioGroupV2} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/radio-group
- Markdown: https://ui.zenadmin.co/components/radio-group.md

```tsx
import {RadioGroupV2} from '@hybr1d-tech/charizard'

<RadioGroupV2
  label="Shipping speed"
  items={[
    {label: {heading: 'Standard (5-7 business days)'}, value: 'standard'},
    {label: {heading: 'Express (2-3 business days)'}, value: 'express'},
    {label: {heading: 'Next-day'}, value: 'next-day'},
  ]}
  defaultValue="standard"
  onChange={value => setShipping(value)}
/>
```

```tsx
const [ownership, setOwnership] = useState<string | null>('company')

<RadioGroupV2
  label="Device ownership"
  items={items}
  value={ownership ?? undefined}
  onChange={setOwnership}
/>
```

### Switch

On/off toggle switch.

- Import: `import {SwitchV2} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/switch
- Markdown: https://ui.zenadmin.co/components/switch.md

```tsx
import {SwitchV2} from '@hybr1d-tech/charizard'

<SwitchV2
  defaultChecked
  onCheckedChange={({checked}) => console.log(checked)}
>
  Notify me on delivery
</SwitchV2>
```

```tsx
const [mfa, setMfa] = useState(true)

<SwitchV2 checked={mfa} onCheckedChange={({checked}) => setMfa(checked)}>
  Require MFA for all users
</SwitchV2>
```

### Select

Single and multi-select dropdown with search, sub-labels and creatable options.

- Import: `import {SelectV2, CreatableSelectV2} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/select
- Markdown: https://ui.zenadmin.co/components/select.md

```tsx
import {SelectV2} from '@hybr1d-tech/charizard'

<SelectV2
  options={[
    {label: 'MacBook Pro 14"', value: 'mbp-14', subLabel: 'M3 Pro · 18GB · 512GB'},
    {label: 'Dell XPS 13', value: 'xps-13', subLabel: 'i7 · 16GB · 512GB'},
  ]}
  placeholder="Select a laptop"
  onChange={value => setLaptop(value as string)}
/>
```

```tsx
const [approvers, setApprovers] = useState<string[]>([apiUsers[0].id])

<SelectV2
  options={userOptions}
  variant={SELECT_VARIANT.CHECKBOX}
  isMulti
  value={userOptions.filter(o => approvers.includes(o.value))}
  onChange={value => setApprovers(value as string[])}
/>
```

### Selectors

Multi-select option picker with custom option rendering.

- Import: `import {SelectorsV2} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/selectors
- Markdown: https://ui.zenadmin.co/components/selectors.md

```tsx
import {SelectorsV2} from '@hybr1d-tech/charizard'

<SelectorsV2
  options={[
    {label: 'Option 1', value: 'option1'},
    {label: 'Option 2', value: 'option2'},
    {label: 'Option 3', value: 'option3'},
  ]}
  value="option1"
  onChange={value => console.log(value)}
/>
```

```tsx
const [selectedValue, setSelectedValue] = useState('option1')

<SelectorsV2
  options={dummyOptions}
  value={selectedValue}
  onChange={newValue => setSelectedValue(newValue)}
/>
```

### Search

Debounced search input with clear button and overflow handling.

- Import: `import {SearchV2} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/search
- Markdown: https://ui.zenadmin.co/components/search.md

```tsx
import {SearchV2} from '@hybr1d-tech/charizard'

<SearchV2 placeholder="Search devices" />
```

```tsx
const [query, setQuery] = useState('')

<SearchV2
  search={query}
  setSearch={setQuery}
  placeholder="Search assigned devices"
/>
```

### DatePicker

Date and date-range picker built on react-day-picker, with quick-select presets.

- Import: `import {DatePicker} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/date-picker
- Markdown: https://ui.zenadmin.co/components/date-picker.md

```tsx
import {DateRangePicker, useDateRangePicker} from '@hybr1d-tech/charizard'

const {period, handleDateChange} = useDateRangePicker()

<DateRangePicker
  value={{from: period.from, to: period.to}}
  onChange={handleDateChange}
  mode="range"
  showQuickSelect
  disabled={date => date > new Date()}
/>
```

```tsx
import {DatePicker} from '@hybr1d-tech/charizard'

const [date, setDate] = React.useState<string | Date | undefined>()

<DatePicker mode="single" variant="form" value={date} onChange={setDate} />
```

### TimePicker

Time-of-day picker.

- Import: `import {TimePicker} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/time-picker
- Markdown: https://ui.zenadmin.co/components/time-picker.md

```tsx
import {TimePicker} from '@hybr1d-tech/charizard'

const [maintenanceAt, setMaintenanceAt] = useState<number | undefined>()

<TimePicker
  timestamp={maintenanceAt}
  onTimeChange={ts => setMaintenanceAt(ts)}
/>
```

```tsx
import {TimePicker, TIME_PICKER_FORMAT} from '@hybr1d-tech/charizard'

<TimePicker
  format={TIME_PICKER_FORMAT.DUAL}
  onTimeChange={ts => setSyncAt(ts)}
/>
```

### ColorPicker

Color picker with a preset palette.

- Import: `import {ColorPicker} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/color-picker
- Markdown: https://ui.zenadmin.co/components/color-picker.md

```tsx
import {ColorPicker} from '@hybr1d-tech/charizard'

<ColorPicker
  name="tag-color"
  onChange={color => setTagColor(color)}
/>
```

```tsx
<ColorPicker
  name="brand-color"
  label="Workspace accent color"
  required
  defaultColor="#2980b9"
  onChange={color => setBrandColor(color)}
/>
```

### Upload

File upload dropzone with progress and file management.

- Import: `import {Upload} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/upload
- Markdown: https://ui.zenadmin.co/components/upload.md

```tsx
import {DOCS_TYPE, Upload} from '@hybr1d-tech/charizard'

<Upload
  type={DOCS_TYPE.LEAVE_DOCS}
  getUploadDoc={files => console.log(files)}
  handleImageUpload={handleImageUpload} // presigned-URL flow in the real app
  acceptedFileTypes="image/png, image/jpeg, image/webp, application/pdf"
  addDocumentSubtitle="PDF, PNG, WEBP and JPEG."
  fileUploadLimit={2}
  uploadFileLimit={5}
/>
```

## Data display

### Table

Batteries-included data table on TanStack Table v8: filters, sorting, search, pagination, row selection, expansion, column reordering and export.

- Import: `import {Table} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/table
- Markdown: https://ui.zenadmin.co/components/table.md

```tsx
import {createColumnHelper} from '@tanstack/react-table'
import {Table, TableDeviceCell, type TableFeatureSet} from '@hybr1d-tech/charizard'

// Table v9 leads every generic with TFeatures. Pass charizard's TableFeatureSet so the
// helper describes the same table <Table /> builds — that is what makes per-column
// options like \
```

### TaskCards

Card list for task-style records with headers and pagination.

- Import: `import {TaskCards} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/task-cards
- Markdown: https://ui.zenadmin.co/components/task-cards.md

```tsx
import {TaskCards} from '@hybr1d-tech/charizard'

const headers = ['Task', 'Details', 'Status']

// Renders link/navigation affordances, so it must live under a react-router context.
export function OpenTasks() {
  return <TaskCards headers={headers} data={tasks} />
}
```

### Badge

Small count or status badge.

- Import: `import {Badge} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/badge
- Markdown: https://ui.zenadmin.co/components/badge.md

```tsx
import {Badge, BADGE_STATUS} from '@hybr1d-tech/charizard'

<Badge status={BADGE_STATUS.POSITIVE}>Compliant</Badge>
<Badge status={BADGE_STATUS.WARNING}>Update pending</Badge>
<Badge status={BADGE_STATUS.NEGATIVE}>Non-compliant</Badge>
```

```tsx
import {Badge, BADGE_STATUS, BADGE_HIGHLIGHT} from '@hybr1d-tech/charizard'
import infoIcon from './assets/info-circle.svg'

<Badge highlight={BADGE_HIGHLIGHT.DOT} status={BADGE_STATUS.POSITIVE}>Online</Badge>
<Badge highlight={BADGE_HIGHLIGHT.ICON} icon={infoIcon} status={BADGE_STATUS.HIGHLIGHT}>
  Awaiting approval
</Badge>
```

### Pill

Rounded pill label.

- Import: `import {Pill} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/pill
- Markdown: https://ui.zenadmin.co/components/pill.md

```tsx
import {Pill, PILL_STATUS} from '@hybr1d-tech/charizard'

<Pill>Procurement</Pill>
<Pill status={PILL_STATUS.POSITIVE}>Delivered</Pill>
<Pill status={PILL_STATUS.WARNING}>Awaiting quote</Pill>
<Pill status={PILL_STATUS.NEGATIVE}>Payment overdue</Pill>
```

### Tag

Removable tag chip.

- Import: `import {Tag} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/tag
- Markdown: https://ui.zenadmin.co/components/tag.md

```tsx
import {Tag, STATUS_MAP} from '@hybr1d-tech/charizard'

<Tag status={STATUS_MAP.SUCCESS} text="Assigned" />
<Tag status={STATUS_MAP.WARNING} text="Unassigned" />
<Tag status={STATUS_MAP.INFO} text="In-transition" />
<Tag status={STATUS_MAP.ERROR} text="Under maintenance" />
<Tag status={STATUS_MAP.DEFAULT} text="Archived" />
```

```tsx
import checkIcon from './assets/check.svg'

<Tag status={STATUS_MAP.SUCCESS} text="MDM enrolled" icon={checkIcon} />
<Tag status={STATUS_MAP.INFO} text="Awaiting handover" icon={infoIcon} />
<Tag status={STATUS_MAP.DEFAULT} text="Spare pool" customStyles={{borderRadius: 16}} />
```

### Status

Colored status indicator with label.

- Import: `import {Status} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/status
- Markdown: https://ui.zenadmin.co/components/status.md

```tsx
import {Status, STATUS_STATUS} from '@hybr1d-tech/charizard'

<Status status={STATUS_STATUS.ENABLED}>
  <div className="zap-caption-medium">MDM enrolled</div>
</Status>
<Status status={STATUS_STATUS.WARNING}>
  <div className="zap-caption-medium">OS update pending</div>
</Status>
<Status status={STATUS_STATUS.NODATA}>
  <div className="zap-caption-medium">Agent unreachable</div>
</Status>
```

```tsx
<Status status={STATUS_STATUS.DONE}>
  <div className="zap-caption-medium">Onboarding complete</div>
</Status>
<Status status={STATUS_STATUS.CANCEL}>
  <div className="zap-caption-medium">Order cancelled</div>
</Status>
```

### Avatar

User avatar with image fallback.

- Import: `import {Avatar} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/avatar
- Markdown: https://ui.zenadmin.co/components/avatar.md

```tsx
import {Avatar} from '@hybr1d-tech/charizard'

const user = {
  first_name: 'Priya',
  last_name: 'Nair',
  work_email: 'priya.nair@acme.io',
  profile_img_url: '...',
}

<Avatar user={user} />
```

```tsx
<Avatar user={user} imageStyles={{width: 24, height: 24}} />
<Avatar user={user} imageStyles={{width: 40, height: 40}} />
<Avatar user={user} imageStyles={{width: 64, height: 64}} />
```

### UserChip

Compact user identity chip (avatar + name).

- Import: `import {UserChip} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/user-chip
- Markdown: https://ui.zenadmin.co/components/user-chip.md

```tsx
import {UserChip, USER_CHIP_STATUS} from '@hybr1d-tech/charizard'

<UserChip
  status={USER_CHIP_STATUS.POSITIVE}
  username="Priya Nair"
  profileImgUrl={priya.profile_img_url}
/>
```

```tsx
<UserChip
  selected
  username="Marcus Chen"
  profileImgUrl={marcus.profile_img_url}
/>
```

### UsersChip

Overflow-aware chip for a set of users.

- Import: `import {UsersChip} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/users-chip
- Markdown: https://ui.zenadmin.co/components/users-chip.md

```tsx
import {UsersChip, USER_CHIP_STATUS} from '@hybr1d-tech/charizard'

const users = [
  {
    first_name: 'Priya',
    last_name: 'Nair',
    work_email: 'priya.nair@acme.io',
    profile_img_url: '...',
    id: 'cea4d3ed-bc4b-4092-ba5d-8245a106e08d',
  },
  // ...
]

<UsersChip status={USER_CHIP_STATUS.POSITIVE} users={users} />
```

```tsx
<UsersChip users={users} userCount={45} />
<UsersChip users={[]} />
```

### Accordion

Expandable content sections.

- Import: `import {Accordion} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/accordion
- Markdown: https://ui.zenadmin.co/components/accordion.md

```tsx
import {Accordion} from '@hybr1d-tech/charizard'

<Accordion defaultActiveKey="mdm" isMulti allEventKeys={['mdm', 'apps', 'offboarding']}>
  <Accordion.Item eventKey="mdm">
    <Accordion.Header eventKey="mdm">How do devices get enrolled into MDM?</Accordion.Header>
    <Accordion.Collapse eventKey="mdm">
      <div>New devices enroll automatically at first boot via zero-touch provisioning.</div>
    </Accordion.Collapse>
  </Accordion.Item>

  <Accordion.Item eventKey="apps">
    <Accordion.Header eventKey="apps">Which apps are installed by default?</Accordion.Header>
    <Accordion.Collapse eventKey="apps">
      <div>The baseline bundle: browser, VPN client, password manager and the ZenAdmin agent.</div>
    </Accordion.Collapse>
  </Accordion.Item>
</Accordion>
```

### Progress

Progress bar.

- Import: `import {Progress} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/progress
- Markdown: https://ui.zenadmin.co/components/progress.md

```tsx
import {Progress} from '@hybr1d-tech/charizard'

<Progress
  steps={[
    {label: 'Select device', component: <SelectDevice />, isError: false},
    {label: 'Assign user', component: <AssignUser />, isError: false},
    {label: 'Review', component: <Review />, isError: false},
  ]}
  onCancelClick={() => console.log('cancelled')}
  onFinalStepClick={() => console.log('submitted')}
  lastStepFooterContinueBtnText="Create order"
/>
```

### AsyncImage

Image with async loading state and fallback.

- Import: `import {AsyncImage} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/async-image
- Markdown: https://ui.zenadmin.co/components/async-image.md

```tsx
import {AsyncImage} from '@hybr1d-tech/charizard'

<AsyncImage
  src={product.image_url}
  alt='MacBook Pro 14" M4'
  className={classes.thumb}
/>
```

```tsx
<AsyncImage
  src="/cdn/product-shots/still-uploading.png"
  alt="Product shot"
  className={classes.banner}
/>
```

### SVG

Inline SVG renderer with CSS-filter coloring.

- Import: `import {SVG} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/svg
- Markdown: https://ui.zenadmin.co/components/svg.md

```tsx
import {SVG} from '@hybr1d-tech/charizard'
import searchIcon from './assets/search.svg'

<SVG path={searchIcon} width={24} height={24} />
```

```tsx
<SVG path={checkIcon} width={16} height={16} />
<SVG path={checkIcon} width={32} height={32} customSvgStyles={{fill: 'var(--status-success-s50)'}} />
<SVG path={plusIcon} width={24} height={24} handleClick={() => addRow()} />
```

## Overlays & feedback

### Modal

Dialog with header, scrollable body, footer buttons and size variants.

- Import: `import {ModalV2} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/modal
- Markdown: https://ui.zenadmin.co/components/modal.md

```tsx
import {ModalV2, Button, BUTTON_VARIANT, useDisclosure, type DialogFooterButtons} from '@hybr1d-tech/charizard'

const {isOpen, onOpen, onClose} = useDisclosure()

const buttons: DialogFooterButtons = [
  {variant: BUTTON_VARIANT.SECONDARY, btnText: 'Cancel', onClick: onClose},
  {variant: BUTTON_VARIANT.PRIMARY, btnText: 'Confirm', onClick: onClose},
]

<Button onClick={onOpen}>Open ModalV2</Button>
<ModalV2
  title="Order laptop"
  subTitle="MacBook Pro 14-inch, M4 Pro"
  isOpen={isOpen}
  onClose={onClose}
  footerButtons={buttons}
>
  Modal body content goes here.
</ModalV2>
```

### Drawer

Slide-in side panel that locks body scroll while open.

- Import: `import {DrawerV2} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/drawer
- Markdown: https://ui.zenadmin.co/components/drawer.md

```tsx
import {DrawerV2, BUTTON_VARIANT, useDisclosure, type DialogFooterButtons} from '@hybr1d-tech/charizard'

const {isOpen, onOpen, onClose} = useDisclosure()

const buttons: DialogFooterButtons = [
  {variant: BUTTON_VARIANT.SECONDARY, btnText: 'Cancel', onClick: onClose},
  {variant: BUTTON_VARIANT.PRIMARY, btnText: 'Save', onClick: onClose},
]

<DrawerV2
  isOpen={isOpen}
  onClose={onClose}
  title="Edit workflow"
  subTitle="Onboarding — new joiner"
  size="md"
  buttons={buttons}
>
  Drawer content goes here.
</DrawerV2>
```

### Popover

Anchored popover with trigger and content.

- Import: `import {Popover} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/popover
- Markdown: https://ui.zenadmin.co/components/popover.md

```tsx
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverTitle,
  PopoverDescription,
  PopoverCloseButton,
} from '@hybr1d-tech/charizard'

<Popover placement="bottom">
  <PopoverTrigger openOnHover={false}>Click me</PopoverTrigger>
  <PopoverContent>
    <PopoverTitle>Popover title</PopoverTitle>
    <PopoverDescription>Anchored content with an arrow.</PopoverDescription>
    <PopoverCloseButton>Close</PopoverCloseButton>
  </PopoverContent>
</Popover>
```

### Tooltip

Hover tooltip with placement and delay controls.

- Import: `import {TooltipV2} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/tooltip
- Markdown: https://ui.zenadmin.co/components/tooltip.md

```tsx
import {TooltipV2, Button} from '@hybr1d-tech/charizard'

<TooltipV2
  placement="top"
  variant="dark"
  trigger={<Button>Hover me</Button>}
  content="This is a tooltip"
/>
```

### Alert

Inline alert banner in info, success, warning and error intents.

- Import: `import {Alert} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/alert
- Markdown: https://ui.zenadmin.co/components/alert.md

```tsx
import {Alert, ALERT_TYPES} from '@hybr1d-tech/charizard'

<Alert
  alertType={ALERT_TYPES.DEFAULT}
  header={<div>Alert header</div>}
  body={<p>Supporting detail for the alert goes here.</p>}
/>
```

```tsx
import {Alert, ALERT_TYPES, ALERT_ACTION_TYPES} from '@hybr1d-tech/charizard'

const [showMore, setShowMore] = React.useState(false)

<Alert
  alertType={ALERT_TYPES.WARNING}
  actionType={ALERT_ACTION_TYPES.SHOW_MORE}
  header={<div>Some devices are missing warranty info</div>}
  body={<p>Expanded details are revealed by the chevron.</p>}
  showMore={showMore}
  setShowMore={setShowMore}
/>
```

### Toasts

Toast notifications (success, error, info, warning) on react-toastify.

- Import: `import {Toasts} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/toasts
- Markdown: https://ui.zenadmin.co/components/toasts.md

```tsx
import {toastSuccess, toastError, toastInfo, toastWarning} from '@hybr1d-tech/charizard'

// Mount <ToastContainer /> from react-toastify once at the app root,
// then fire toasts from anywhere:
toastSuccess({msg: 'Inventory item added'})
toastInfo({msg: 'Sync scheduled for tonight'})
toastWarning({msg: 'License expires in 7 days'})
toastError({msg: 'Could not reach the MDM server'})
```

```tsx
toastSuccess({
  msg: 'Successfully added inventory item',
  info: 'The device is now available to fulfill orders placed before today.',
})
```

### Loader

Loading spinners in multiple styles.

- Import: `import {Loader} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/loader
- Markdown: https://ui.zenadmin.co/components/loader.md

```tsx
import {Loader, LOADER_VARIANT} from '@hybr1d-tech/charizard'

<Loader variant={LOADER_VARIANT.RING} />
<Loader variant={LOADER_VARIANT.DUAL_RING} />
<Loader variant={LOADER_VARIANT.ELLIPSES} />
<Loader variant={LOADER_VARIANT.GRID} />
<Loader variant={LOADER_VARIANT.HOURGLASS} />
<Loader variant={LOADER_VARIANT.RIPPLE} />
<Loader variant={LOADER_VARIANT.ROLLER} />
<Loader variant={LOADER_VARIANT.SPINNER} />
```

### Skeleton

Skeleton loading placeholders.

- Import: `import {Skeleton} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/skeleton
- Markdown: https://ui.zenadmin.co/components/skeleton.md

```tsx
import {Skeleton} from '@hybr1d-tech/charizard'

// Skeleton renders an animated span; give it dimensions via style or className.
<Skeleton style={{display: 'block', width: 320, height: 14}} />
<Skeleton style={{display: 'block', width: 280, height: 14}} />
<Skeleton style={{display: 'block', width: 180, height: 14}} />
```

## Navigation & layout

### Tabs

Tab switcher with panels.

- Import: `import {Tabs} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/tabs
- Markdown: https://ui.zenadmin.co/components/tabs.md

```tsx
const [activeKey, setActiveKey] = React.useState('overview')

<Tabs id="device-tabs" activeKey={activeKey} onSelect={setActiveKey}>
  <Tab title="Overview" eventKey="overview" isActive={false} onClick={() => {}}>
    <p>Overview pane</p>
  </Tab>
  <Tab title="Specifications" eventKey="specs" isActive={false} onClick={() => {}}>
    <p>Specifications pane</p>
  </Tab>
  <Tab title="Activity" eventKey="activity" isActive={false} onClick={() => {}}>
    <p>Activity pane</p>
  </Tab>
</Tabs>
```

```tsx
<Tabs
  id="billing-tabs"
  activeKey={activeKey}
  onSelect={setActiveKey}
  customStyles={{maxWidth: 420}}
>
  <Tab
    title="Monthly"
    eventKey="monthly"
    customStyles={{letterSpacing: '0.04em'}}
    isActive={false}
    onClick={() => {}}
  >
    Billed every month.
  </Tab>
  <Tab
    title="Yearly"
    eventKey="yearly"
    customStyles={{letterSpacing: '0.04em'}}
    isActive={false}
    onClick={() => {}}
  >
    Billed once a year.
  </Tab>
</Tabs>
```

### LayoutTabs

Route-level tab navigation.

- Import: `import {LayoutTabs} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/layout-tabs
- Markdown: https://ui.zenadmin.co/components/layout-tabs.md

```tsx
<LayoutTabs
  defaultValue="details"
  tabs={[
    {label: 'Details', value: 'details', content: <DetailsPane />},
    {label: 'Apps', value: 'apps', content: <AppsPane />},
    {label: 'Security', value: 'security', content: <SecurityPane />},
  ]}
/>
```

```tsx
const [current, setCurrent] = React.useState('open')

<LayoutTabs
  defaultValue="open"
  tabs={orderTabs}
  tabClassName="my-tab-list"
  onValueChange={value => setCurrent(value)}
/>
```

### Breadcrumbs

Router-aware breadcrumb trail.

- Import: `import {Breadcrumbs} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/breadcrumbs
- Markdown: https://ui.zenadmin.co/components/breadcrumbs.md

```tsx
// in the app shell (rendered once):
<Breadcrumbs />

// in a page component:
useBreadcrumbs([
  {label: 'Home', href: '/'},
  {label: 'Tabs', href: '/components/tabs'},
  {label: 'Breadcrumbs', active: true},
])
```

```tsx
useBreadcrumbs([
  {label: 'Home', href: '/'},
  {label: 'Tabs', href: '/components/tabs'},
  {label: 'LayoutTabs', href: '/components/layout-tabs'},
  {label: 'EmptyState', href: '/components/empty-state'},
  {label: 'Breadcrumbs', active: true},
])
```

### EmptyState

Empty-state placeholder with illustration and actions.

- Import: `import {EmptyState} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/empty-state
- Markdown: https://ui.zenadmin.co/components/empty-state.md

```tsx
<EmptyState
  icon={boxIconSvg}
  title="No devices yet"
  desc="Devices will appear here once they are enrolled or imported."
/>
```

```tsx
<EmptyState
  icon={boxIconSvg}
  title="No team members"
  desc="Invite your teammates to start assigning devices."
  btnText="Invite people"
  onClick={handleInvite}
/>
```

### Error

Full-page error layouts (404, 500).

- Import: `import {Error} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/error
- Markdown: https://ui.zenadmin.co/components/error.md

```tsx
// route-level usage: renders Error404 at ./404 (and as the index) and Error500 at ./500
<Route path="/error/*" element={<ErrorsPage homeRoute="/" />} />

// or compose the pieces directly:
<ErrorsLayout homeRoute="/">
  <Error404 />
</ErrorsLayout>
```

```tsx
<ErrorsLayout homeRoute="/">
  <Error500 />
</ErrorsLayout>
```

### Helmet

Document head / page title manager.

- Import: `import {Helmet} from '@hybr1d-tech/charizard'`
- Demos: https://ui.zenadmin.co/#/components/helmet
- Markdown: https://ui.zenadmin.co/components/helmet.md

```tsx
<Helmet title="Devices — ZenAdmin" />
```

```tsx
<Helmet
  title="Devices — ZenAdmin"
  description="Manage every company device from one place."
  keywords="devices, MDM, IT asset management"
  canonicalUrl="https://app.zenadmin.ai/devices"
  ogImage="https://app.zenadmin.ai/og/devices.png"
  site="https://app.zenadmin.ai"
>
  {/* extra head tags as children */}
  <meta name="robots" content="noindex" />
</Helmet>
```