Cerberus Design System (omnifed/cerberus)

Cerberus UI Platform

https://github.com/omnifed/cerberus
Admin
Cerberus is a React UI platform for building scalable, accessible, and performant design systems and...

Tokens:175,238
Snippets:833
Trust Score:7.5
Update:1 week ago
Show doc for...
Context Summary (auto-generated)
Raw
# Cerberus Design System

Cerberus is a comprehensive design system factory developed by Omnifederal that provides a complete suite of tools for building accessible, themeable React applications. It consists of four main packages: `@cerberus/panda-preset` for PandaCSS styling presets and recipes, `@cerberus-design/react` for React primitive components built on Ark UI, `@cerberus-design/signals` for fine-grained reactive state management, and `@cerberus-design/data-grid` for high-performance virtualized data tables.

The design system emphasizes WCAG accessibility compliance, with all components meeting Level AAA standards for target size and interaction patterns. Cerberus supports multiple themes (Cerberus, Acheron, Elysium) with light and dark color modes, and integrates seamlessly with PandaCSS for type-safe styling through semantic design tokens and slot recipes.

## Installation and Setup

### Installing the Panda Preset

```bash
# Using JSR (recommended for non-React packages)
npx jsr add @cerberus/panda-preset

# Install themes separately
npx jsr add @cerberus/preset-cerberus-theme
npx jsr add @cerberus/preset-acheron-theme
npx jsr add @cerberus/preset-elysium-theme
```

### Installing React Components

```bash
# Using npm for React packages
npm install @cerberus-design/react
```

### Installing Signals Library

```bash
npx jsr add @cerberus/signals
```

### Installing Data Grid

```bash
npm install @cerberus-design/data-grid
```

---

## Panda Preset Configuration

### createCerberusConfig

A function to define a PandaCSS configuration with Cerberus settings, including preflight styles, JSX framework configuration, and output directory settings.

```typescript
// panda.config.ts
import { createCerberusConfig, createCerberusPreset } from '@cerberus/panda-preset'

export default createCerberusConfig({
  clean: true,
  include: ['./src/**/*.{js,jsx,ts,tsx}'],
  exclude: [],

  presets: [createCerberusPreset({
    displayFont: 'Poppins, sans-serif',
    sansFont: 'Poppins, sans-serif',
    monoFont: 'Recursive, monospace',
  })],
})
```

### Multi-Theme Configuration

Configure multiple themes in your Panda config to support theme switching throughout your application.

```typescript
// panda.config.ts
import { createCerberusConfig, createCerberusPreset } from '@cerberus/panda-preset'
import { presetAcheronTheme, getThemeName as getAcheronThemeName } from '@cerberus/preset-acheron-theme'
import { presetElysiumTheme, getThemeName as getElysiumThemeName } from '@cerberus/preset-elysium-theme'

export default createCerberusConfig({
  clean: true,
  include: ['./src/**/*.{js,jsx,ts,tsx}'],
  exclude: [],

  presets: [createCerberusPreset(), presetAcheronTheme, presetElysiumTheme],

  staticCss: {
    themes: ['cerberus', getAcheronThemeName(), getElysiumThemeName()],
  },
})
```

---

## React Components

### CerberusProvider

The root provider component that supplies configuration context to all Cerberus components, including custom icons and system settings.

```tsx
import { CerberusProvider, makeSystemConfig } from '@cerberus-design/react'

// Optional: Create custom config with custom icons
const config = makeSystemConfig({
  icons: {
    // Override default icons
  }
})

function App() {
  return (
    <CerberusProvider config={config}>
      <YourApplication />
    </CerberusProvider>
  )
}
```

### ThemeProvider

A context provider for managing theme and color mode state, supporting theme switching between Cerberus, Acheron, and Elysium themes with light/dark modes.

```tsx
import { ThemeProvider, useThemeContext } from '@cerberus-design/react'

function App() {
  return (
    <ThemeProvider defaultTheme="cerberus" defaultColorMode="light">
      <ThemeToggle />
    </ThemeProvider>
  )
}

function ThemeToggle() {
  const { theme, mode, updateTheme, updateMode } = useThemeContext()

  return (
    <div>
      <p>Current theme: {theme}, mode: {mode}</p>
      <button onClick={() => updateTheme('acheron')}>Switch to Acheron</button>
      <button onClick={() => updateMode('dark')}>Toggle Dark Mode</button>
    </div>
  )
}
```

### Button

A WCAG Level AAA compliant button component with support for multiple palettes, usages, shapes, sizes, and loading states.

```tsx
import { Button, ButtonIcon } from '@cerberus-design/react'
import { Add } from '@carbon/icons-react'

function ButtonExamples() {
  const [pending, setPending] = useState(false)

  return (
    <>
      {/* Basic button */}
      <Button>Default Button</Button>

      {/* Button variants */}
      <Button palette="action" usage="filled" size="md">Primary Action</Button>
      <Button palette="danger" usage="outlined">Delete</Button>
      <Button palette="secondary-action" usage="ghost">Cancel</Button>

      {/* Button with icon and loading state */}
      <Button pending={pending} onClick={() => setPending(true)}>
        <ButtonIcon>
          <Add />
        </ButtonIcon>
        Add Item
      </Button>

      {/* Button shapes */}
      <Button shape="sharp">Sharp Corners</Button>
      <Button shape="rounded">Rounded Pill</Button>
    </>
  )
}
```

### Field and Input

Form field components with built-in label, helper text, and error handling for accessible form inputs.

```tsx
import { Field, Input } from '@cerberus-design/react'

function ContactForm() {
  const [invalid, setInvalid] = useState(false)

  return (
    <form>
      <Field
        ids={{ control: 'firstName' }}
        label="First Name"
        helperText="This will be displayed on your profile."
        errorText="A first name is required."
        required
        invalid={invalid}
      >
        <Input
          name="firstName"
          type="text"
          placeholder="Enter your first name"
          onBlur={(e) => setInvalid(!e.target.value)}
        />
      </Field>

      <Field
        ids={{ control: 'email' }}
        label="Email Address"
        helperText="We'll never share your email."
      >
        <Input name="email" type="email" />
      </Field>
    </form>
  )
}
```

### Select

A dropdown select component with collection-based items, supporting disabled options and custom placeholders.

```tsx
import { Select, Option, createListCollection } from '@cerberus-design/react'

function SelectExample() {
  const collection = createListCollection({
    items: [
      { label: 'Hades', value: 'hades' },
      { label: 'Persephone', value: 'persephone' },
      { label: 'Zeus', value: 'zeus', disabled: true },
      { label: 'Athena', value: 'athena' },
    ]
  })

  return (
    <Select
      collection={collection}
      label="Select Deity"
      placeholder="Choose a deity"
      onValueChange={(details) => console.log('Selected:', details.value)}
    >
      {collection.items.map((item) => (
        <Option key={item.value} item={item}>
          {item.label}
        </Option>
      ))}
    </Select>
  )
}
```

### Checkbox

A controlled checkbox component with indeterminate state support and accessible labeling.

```tsx
import { Checkbox } from '@cerberus-design/react'

function CheckboxExample() {
  const [checked, setChecked] = useState(false)
  const [items, setItems] = useState([false, false, false])

  const allChecked = items.every(Boolean)
  const indeterminate = items.some(Boolean) && !allChecked

  return (
    <>
      {/* Simple checkbox */}
      <Checkbox
        checked={checked}
        onCheckedChange={(details) => setChecked(details.checked)}
      >
        Accept terms and conditions
      </Checkbox>

      {/* Parent checkbox with indeterminate state */}
      <Checkbox
        checked={indeterminate ? 'indeterminate' : allChecked}
        onCheckedChange={(details) => setItems(items.map(() => !!details.checked))}
      >
        Select All
      </Checkbox>

      {/* Required checkbox */}
      <Checkbox required>
        I confirm this information is accurate
      </Checkbox>
    </>
  )
}
```

### Dialog

A modal dialog component with backdrop, positioning, and close triggers for displaying focused content.

```tsx
import {
  Dialog,
  DialogProvider,
  DialogTrigger,
  DialogCloseTrigger,
  DialogHeading,
  DialogDescription,
} from '@cerberus-design/react'
import { Button } from '@cerberus-design/react'

function DialogExample() {
  return (
    <DialogProvider>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>

      <Dialog>
        <DialogHeading>Confirm Action</DialogHeading>
        <DialogDescription>
          Are you sure you want to proceed with this action?
          This cannot be undone.
        </DialogDescription>

        <HStack gap="md" pt="md">
          <Button palette="action">Confirm</Button>
          <DialogCloseTrigger asChild>
            <Button usage="outlined">Cancel</Button>
          </DialogCloseTrigger>
        </HStack>
      </Dialog>
    </DialogProvider>
  )
}
```

### ConfirmModal

A pre-built confirmation modal provider with promise-based API for handling user consent flows.

```tsx
import { ConfirmModal, useConfirmModal, Button } from '@cerberus-design/react'

function FeatureSection() {
  return (
    <ConfirmModal>
      <DeleteButton />
    </ConfirmModal>
  )
}

function DeleteButton() {
  const confirm = useConfirmModal()

  const handleDelete = async () => {
    const userConsent = await confirm.show({
      kind: 'destructive',
      heading: 'Delete this item?',
      description: 'This action cannot be undone. All associated data will be permanently removed.',
      actionText: 'Yes, delete item',
      cancelText: 'No, keep it',
    })

    if (userConsent) {
      // User confirmed - proceed with deletion
      await deleteItem()
    }
  }

  return <Button palette="danger" onClick={handleDelete}>Delete</Button>
}
```

### Menu

A dropdown menu component for displaying a list of actions or options.

```tsx
import {
  Menu,
  MenuTrigger,
  MenuContent,
  MenuItem,
  MenuItemGroup,
  MenuGroupLabel,
  MenuSeparator,
} from '@cerberus-design/react'
import { Button } from '@cerberus-design/react'

function MenuExample() {
  return (
    <Menu>
      <MenuTrigger>
        <Button>Actions</Button>
      </MenuTrigger>

      <MenuContent>
        <MenuItemGroup>
          <MenuGroupLabel>File Operations</MenuGroupLabel>
          <MenuSeparator />
          <MenuItem value="new" onClick={() => console.log('New file')}>
            New File
          </MenuItem>
          <MenuItem value="open">Open File</MenuItem>
          <MenuItem value="save">Save</MenuItem>
        </MenuItemGroup>

        <MenuSeparator />

        <MenuItem value="delete" onClick={() => console.log('Delete')}>
          Delete
        </MenuItem>
      </MenuContent>
    </Menu>
  )
}
```

### Tabs

A tabbed interface component for organizing content into separate panels.

```tsx
import { Tabs } from '@cerberus-design/react'

function TabsExample() {
  return (
    <Tabs.Root defaultValue="overview">
      <Tabs.List>
        <Tabs.Tab value="overview">Overview</Tabs.Tab>
        <Tabs.Tab value="analytics">Analytics</Tabs.Tab>
        <Tabs.Tab value="settings">Settings</Tabs.Tab>
      </Tabs.List>

      <Tabs.Panel value="overview">
        <h2>Overview Content</h2>
        <p>This is the overview panel content.</p>
      </Tabs.Panel>

      <Tabs.Panel value="analytics">
        <h2>Analytics Content</h2>
        <p>View your analytics data here.</p>
      </Tabs.Panel>

      <Tabs.Panel value="settings">
        <h2>Settings Content</h2>
        <p>Configure your preferences.</p>
      </Tabs.Panel>
    </Tabs.Root>
  )
}
```

### Accordion

An expandable/collapsible content component for organizing information in a compact format.

```tsx
import {
  AccordionRoot,
  AccordionItem,
  AccordionItemTrigger,
  AccordionItemContent,
  AccordionItemIndicator,
} from '@cerberus-design/react'
import { ChevronDown } from '@carbon/icons-react'

function AccordionExample() {
  return (
    <AccordionRoot multiple defaultValue={['item-1']}>
      <AccordionItem value="item-1">
        <AccordionItemTrigger>
          What is Cerberus?
          <AccordionItemIndicator>
            <ChevronDown />
          </AccordionItemIndicator>
        </AccordionItemTrigger>
        <AccordionItemContent>
          Cerberus is a comprehensive design system providing React components,
          PandaCSS presets, and state management tools.
        </AccordionItemContent>
      </AccordionItem>

      <AccordionItem value="item-2">
        <AccordionItemTrigger>
          How do I install it?
          <AccordionItemIndicator>
            <ChevronDown />
          </AccordionItemIndicator>
        </AccordionItemTrigger>
        <AccordionItemContent>
          Install via npm for React packages or JSR for other packages.
        </AccordionItemContent>
      </AccordionItem>
    </AccordionRoot>
  )
}
```

### Tooltip

A component for displaying additional information on hover.

```tsx
import { Tooltip, Button } from '@cerberus-design/react'
import { Information } from '@carbon/icons-react'

function TooltipExample() {
  return (
    <>
      {/* Basic tooltip */}
      <Tooltip content="Click to submit your changes">
        <Button>Save Changes</Button>
      </Tooltip>

      {/* Icon with tooltip */}
      <Tooltip content="This field is required for account verification">
        <Information />
      </Tooltip>

      {/* Positioned tooltip */}
      <Tooltip content="Bottom positioned" positioning="bottom">
        <Button>Hover me</Button>
      </Tooltip>
    </>
  )
}
```

### NotificationCenter

A toast notification system for displaying transient messages to users.

```tsx
import { NotificationCenter, toaster, Button } from '@cerberus-design/react'

function App() {
  return (
    <>
      <NotificationCenter />
      <NotifyButton />
    </>
  )
}

function NotifyButton() {
  const showNotifications = () => {
    // Success notification
    toaster.create({
      title: 'Success!',
      description: 'Your changes have been saved.',
      type: 'success',
    })

    // Error notification
    toaster.create({
      title: 'Error',
      description: 'Failed to save changes. Please try again.',
      type: 'danger',
    })

    // Info notification with action
    toaster.create({
      title: 'New Update Available',
      description: 'A new version is ready to install.',
      type: 'info',
      action: {
        label: 'Update Now',
        onClick: () => console.log('Updating...'),
      },
    })
  }

  return <Button onClick={showNotifications}>Show Notifications</Button>
}
```

### FileUploader

A drag-and-drop file upload component with preview support.

```tsx
import { FileUploader } from '@cerberus-design/react'

function FileUploadExample() {
  return (
    <FileUploader
      heading="Upload Documents"
      accept={{ 'image/*': ['.png', '.jpg', '.jpeg'], 'application/pdf': ['.pdf'] }}
      maxFiles={5}
      maxFileSize={1024 * 1024 * 10} // 10MB
      showPreview={true}
      onFileAccept={(details) => {
        console.log('Accepted files:', details.files)
      }}
      onFileReject={(details) => {
        console.log('Rejected files:', details.files)
      }}
    />
  )
}
```

### DatePicker

A date selection component with calendar view and range support.

```tsx
import { DatePicker, DatePickerInput, DatePickerCalendar } from '@cerberus-design/react'

function DatePickerExample() {
  return (
    <DatePicker
      onValueChange={(details) => console.log('Selected date:', details.value)}
    >
      <DatePickerInput label="Select Date" />
      <DatePickerCalendar />
    </DatePicker>
  )
}
```

### Show and For Components

Utility components for conditional rendering and list iteration.

```tsx
import { Show, For } from '@cerberus-design/react'

function ConditionalRendering() {
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const items = ['Apple', 'Banana', 'Cherry']

  return (
    <>
      {/* Conditional rendering with fallback */}
      <Show when={isLoggedIn} fallback={<LoginButton />}>
        <UserDashboard />
      </Show>

      {/* List rendering */}
      <ul>
        <For each={items}>
          {(item, index) => (
            <li key={index}>{item}</li>
          )}
        </For>
      </ul>
    </>
  )
}
```

---

## Signals Library

### createSignal

Creates a reactive signal with getter and setter functions for fine-grained state management outside of React's reconciliation.

```typescript
import { createSignal, createEffect } from '@cerberus-design/signals'

// Create a global signal (outside React components)
const [getCount, setCount] = createSignal(0)
const [getUser, setUser] = createSignal({ name: 'John', age: 30 })

// Read the signal value
console.log(getCount()) // 0

// Update the signal
setCount(5)
setCount((prev) => prev + 1) // Supports functional updates

// Create reactive effects
const cleanup = createEffect(() => {
  console.log('Count changed to:', getCount())
})

// Clean up when done
cleanup()
```

### createComputed

Creates a derived/computed value that automatically tracks dependencies and recomputes only when source signals change.

```typescript
import { createSignal, createComputed } from '@cerberus-design/signals'

const [getFirstName, setFirstName] = createSignal('John')
const [getLastName, setLastName] = createSignal('Doe')

// Computed value automatically tracks dependencies
const getFullName = createComputed(() => {
  return `${getFirstName()} ${getLastName()}`
})

console.log(getFullName()) // "John Doe"

setFirstName('Jane')
console.log(getFullName()) // "Jane Doe" - automatically recomputed
```

### createEffect

Creates a reactive side effect that automatically tracks signal dependencies and re-runs when they change.

```typescript
import { createSignal, createEffect } from '@cerberus-design/signals'

const [getTheme, setTheme] = createSignal('light')

// Effect runs immediately and whenever getTheme changes
const cleanup = createEffect(() => {
  document.body.classList.toggle('dark', getTheme() === 'dark')

  // Optional cleanup function
  return () => {
    document.body.classList.remove('dark', 'light')
  }
})

setTheme('dark') // Effect re-runs, body gets 'dark' class

// Manual cleanup when component unmounts
cleanup()
```

### useSignal

A React hook for creating signals within components, combining createSignal with React's lifecycle.

```tsx
import { useSignal, ReactiveText } from '@cerberus-design/signals'

function Counter() {
  const [count, setCount, getCount] = useSignal(0)

  return (
    <div>
      {/* Regular React rendering - full component re-render */}
      <p>Count: {count}</p>

      {/* Fine-grained reactivity - only text updates */}
      <p>Reactive Count: <ReactiveText accessor={getCount} /></p>

      <button onClick={() => setCount((c) => c + 1)}>
        Increment
      </button>
    </div>
  )
}
```

### useRead

A hook for reading global signals within React components, bridging signals with React's rendering.

```tsx
import { createSignal } from '@cerberus-design/signals'
import { useRead } from '@cerberus-design/signals'

// Global signal defined outside component
const [getUser, setUser] = createSignal({ name: 'Guest', isAuthenticated: false })

function UserProfile() {
  // Subscribe to global signal changes
  const user = useRead(getUser)

  return (
    <div>
      <p>Welcome, {user.name}!</p>
      {user.isAuthenticated && <LogoutButton />}
    </div>
  )
}

// Update from anywhere
function login(userData) {
  setUser({ ...userData, isAuthenticated: true })
}
```

### createQuery

Creates a reactive query for data fetching with automatic caching and signal-based argument tracking.

```tsx
import { createSignal, createQuery } from '@cerberus-design/signals'
import { useQuery } from '@cerberus-design/signals'
import { Suspense } from 'react'

// Signal for query arguments
const [getUserId, setUserId] = createSignal<number | null>(1)

// Create the query - automatically refetches when userId changes
const userQuery = createQuery(
  getUserId,
  async (userId) => {
    const response = await fetch(`/api/users/${userId}`)
    return response.json()
  }
)

function UserDetails() {
  // useQuery integrates with Suspense and Error Boundaries
  const user = useQuery(userQuery)

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  )
}

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <UserDetails />
    </Suspense>
  )
}

// Change user - query automatically refetches
function switchUser(id: number) {
  setUserId(id)
}
```

### createMutation

Creates a mutation handler with automatic cache invalidation for modifying server data.

```tsx
import { createSignal, createQuery, createMutation } from '@cerberus-design/signals'
import { useMutation } from '@cerberus-design/signals'

// Query to invalidate
const [getUserId, setUserId] = createSignal(1)
const userQuery = createQuery(getUserId, fetchUser)

// Create mutation with invalidation
const updateUserMutation = createMutation(
  async (userData: { id: number; name: string }) => {
    const response = await fetch(`/api/users/${userData.id}`, {
      method: 'PUT',
      body: JSON.stringify(userData),
    })
    return response.json()
  },
  {
    onSuccess: (data) => console.log('User updated:', data),
    onError: (error) => console.error('Update failed:', error),
    // Invalidate the user query after successful mutation
    invalidate: (data, variables) => [userQuery.key],
  }
)

function EditUserForm() {
  const { mutate, status, error } = useMutation(updateUserMutation)

  const handleSubmit = async (formData: FormData) => {
    await mutate({
      id: 1,
      name: formData.get('name') as string,
    })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" />
      <button type="submit" disabled={status === 'pending'}>
        {status === 'pending' ? 'Saving...' : 'Save'}
      </button>
      {status === 'error' && <p>Error: {String(error)}</p>}
    </form>
  )
}
```

---

## Data Grid

### DataGrid Component

A high-performance, virtualized data grid with sorting, filtering, pagination, and column pinning.

```tsx
import { DataGrid, createColumnHelper } from '@cerberus-design/data-grid'

interface User {
  id: number
  firstName: string
  lastName: string
  email: string
  role: string
  status: 'active' | 'inactive'
}

const columnHelper = createColumnHelper<User>()

const columns = [
  columnHelper.accessor('id', {
    header: 'ID',
    width: 80,
    features: {
      sort: true,
      pinning: { defaultPosition: 'left' },
    },
  }),

  columnHelper.accessorFn(
    (row) => `${row.firstName} ${row.lastName}`,
    {
      id: 'fullName',
      header: 'Full Name',
      width: 200,
      features: { sort: true, filter: true },
    }
  ),

  columnHelper.accessor('email', {
    header: 'Email',
    width: 250,
    features: { filter: { operator: 'contains' } },
  }),

  columnHelper.accessor('status', {
    header: 'Status',
    width: 120,
    cell: ({ value }) => (
      <span style={{ color: value === 'active' ? 'green' : 'gray' }}>
        {value}
      </span>
    ),
  }),

  columnHelper.display({
    id: 'actions',
    header: 'Actions',
    width: 150,
    cell: ({ row }) => (
      <Button size="sm" onClick={() => handleEdit(row.id)}>
        Edit
      </Button>
    ),
  }),
]

function UsersTable() {
  const [users, setUsers] = useState<User[]>([])

  return (
    <DataGrid
      data={users}
      columns={columns}
      rowSize="md"
      initialState={{
        pagination: {
          pageSize: 25,
          customRange: [10, 25, 50, 100],
        },
      }}
      onPageChange={(details) => {
        console.log('Page changed:', details.page)
      }}
      toolbar={<SearchInput />}
      theme={{
        borderColor: 'page.border.initial',
        rowHoverBgColor: 'page.surface.200',
      }}
    />
  )
}
```

### createColumnHelper

A type-safe helper for defining data grid columns with accessor, accessorFn, and display column types.

```tsx
import { createColumnHelper, type ColumnDef } from '@cerberus-design/data-grid'

interface Product {
  id: string
  name: string
  price: number
  category: string
  inStock: boolean
}

const columnHelper = createColumnHelper<Product>()

const columns: ColumnDef<Product>[] = [
  // Simple accessor - accesses property directly
  columnHelper.accessor('name', {
    header: 'Product Name',
    width: 200,
    features: {
      sort: true,
      filter: true,
    },
  }),

  // AccessorFn - compute derived values
  columnHelper.accessorFn(
    (row) => `$${row.price.toFixed(2)}`,
    {
      id: 'formattedPrice',
      header: 'Price',
      width: 100,
      features: {
        sort: {
          comparator: (a, b) => parseFloat(a.slice(1)) - parseFloat(b.slice(1)),
        },
      },
    }
  ),

  // Display column - no accessor, custom render only
  columnHelper.display({
    id: 'availability',
    header: 'Availability',
    width: 120,
    cell: ({ row }) => (
      <Badge palette={row.inStock ? 'success' : 'danger'}>
        {row.inStock ? 'In Stock' : 'Out of Stock'}
      </Badge>
    ),
  }),
]
```

### useDataGridContext

A hook for accessing the data grid store within custom toolbar or cell components.

```tsx
import { useDataGridContext } from '@cerberus-design/data-grid'
import { useRead } from '@cerberus-design/signals'

function GridToolbar() {
  const store = useDataGridContext()
  const globalFilter = useRead(store.globalFilter)
  const rowCount = useRead(store.rowCount)

  return (
    <HStack justify="space-between" p="md">
      <Input
        value={globalFilter}
        onChange={(e) => store.setGlobalFilter(e.target.value)}
        placeholder="Search all columns..."
      />
      <Text>Total rows: {rowCount}</Text>
    </HStack>
  )
}

function UsersGrid() {
  return (
    <DataGrid
      data={users}
      columns={columns}
      toolbar={<GridToolbar />}
    />
  )
}
```

---

## Summary

Cerberus Design System provides a complete toolkit for building modern, accessible React applications. The modular architecture allows teams to adopt individual packages based on their needs: use `@cerberus/panda-preset` for consistent styling with PandaCSS recipes and semantic tokens, `@cerberus-design/react` for pre-built accessible UI components, `@cerberus-design/signals` for fine-grained reactivity that bypasses React's reconciliation overhead, and `@cerberus-design/data-grid` for performant virtualized tables with built-in sorting, filtering, and pagination.

The system integrates seamlessly with Next.js and other React frameworks through its JSR/npm distribution. Common integration patterns include wrapping your application with `CerberusProvider` and `ThemeProvider` at the root, using the signals library for complex state management scenarios where React's re-rendering model becomes a bottleneck, and leveraging the DataGrid for large dataset visualization. All components follow WCAG accessibility guidelines and support multiple themes with light/dark color modes out of the box.