DOCSEARCHbyAlgolia
Submit Docs

Cerberus Design System

website·Indexed 32 days ago

https://cerberus.digitalu.design

A React-based UI library and design system featuring a comprehensive set of components including Data Grid, Combobox, and DatePicker. It includes Cerberus Signals for state management, a primitive-based composition API inspired by Radix UI, and specialized layout tools like Container Queries and Box.

Tokens
123.9K
Snippets
684
Records
851
Agent score
62%

What's inside Cerberus

  1. Overview of the Cerberus Design System ecosystem

    Cerberus is a Design System factory built on Panda CSS that allows developers to create strict design system guidelines with UI-library flexibility. The ecosystem consists of four main pillars:

    1. PandaCSS Presets: Core tools and themes. The 'Panda Preset' is the required base containing tokens, recipes, conditions, utilities, and patterns (including the Cerberus Theme preset).
    2. React: A library of primitive, accessible low-level components that consume core preset recipes. It includes a Factory for super-powered JSX elements and supports component composition via asChild.
    3. Data Grid: A compositional component for displaying tabular data, built using the React and Signals libraries.
    4. Signals: A reactive state management system based on Preact Signals Core, designed to optimize React performance by reducing unnecessary re-renders.

  2. Render components in an iframe using Frame

    The Frame component renders its children inside an iframe using a Portal. It tracks the size of the content and exposes it via CSS variables. It allows for custom head injection, custom initial HTML via srcDoc, and lifecycle callbacks.
    import { Frame } from '@cerberus/react/react'

<Frame
  title="Custom Frame"
  style={{ border: '1px solid #ccc', width: '100%', height: 'var(--height)' }}
  head={<style>{'body { background-color: #f0f0f0; }'}</style>}
>
  <div>Hello from inside the frame!</div>
</Frame>

  3. Use the Tag component for labeling content

    The Tag component is used for categorizing or labeling content. It supports various visual styles through props for usage, shape, and color. It can also be made 'closable' by providing an onClick handler, which adds a close icon button and changes the shape to a pill.
    import { Tag } from '@cerberus/react'

export function TagExample() {
  return (
    <>
      <Tag>Filled</Tag>
      <Tag palette="info">Information Tag</Tag>
      <Tag onClick={() => console.log('Closed!')}>Closable Tag</Tag>
    </>
  )
}

  4. Marquee component architecture and parts

    The Marquee API is an object containing a family of components used to build a marquee animation. The available parts are:

    • Root: The context provider for the Marquee family.
    • Edge: The stylistic edge of the Marquee (often used for gradients).
    • Viewport: The viewport container that holds the Marquee content.
    • Content: The content of the Marquee.
    • Item: The individual item to be displayed in the Marquee.

  5. Understand Cerberus Signals Reactivity

    Cerberus Signals provides fine-grained reactivity in React applications. Unlike standard React state, which triggers a full component re-render when state changes, Cerberus Signals allow you to define and consume state without forcing the entire component to re-render. This is achieved by separating the state management from the React render engine, allowing specific UI elements (like ReactiveText) to update their values directly in the DOM.

  7. Create subtle notifications using the toaster

    Subtle notifications provide a less intrusive way to inform users about events or updates, featuring a softer appearance. To create a subtle notification, use the usage: 'subtle' option within the toaster.create() method.
    import { toaster } from '@cerberus/react/react'

// Example of triggering a subtle notification
toaster.create({
  usage: 'subtle',
  title: 'Update available',
  description: 'A new version of the app is ready.',
  // Optional action object
  action: {
    label: 'Reload',
    onClick: () => window.location.reload(),
  },
})

  8. Cerberus Signals performance and capabilities

    Cerberus Signals uses a push/pull scheduling algorithm and an O(1) signal-based memory map. This architecture is designed for complex dependency graphs and high-scale reactive components, significantly reducing memory overhead and increasing speed compared to traditional context-based providers or class-based libraries like TanStack Query Core. It supports enterprise-grade features including Race-Condition Locks and React 19 Hydration.

  9. Configure Switch RootProvider and Thumb

    The Switch architecture includes a RootProvider and a Thumb component. Both support the asChild boolean prop to merge behavior with a custom child element. The RootProvider requires a value prop of type UseSwitchReturn to manage the switch state.

  10. Migrate to Cerberus v1.8 for improved token performance

    Cerberus v1.8 introduces a redesigned preset architecture where the base preset no longer ships primitive color tokens. Instead, each theme registers its own primitives and semantic tokens, and extra Panda Base color tokens are stripped. This results in a performance boost as only one set of tokens is assigned in the browser at a time.

    To migrate to v1.8:

    1. Remove the staticCss.themes field from your Panda config.
    2. Delete the styled-system directory (rm -rf styled-system) to ensure a fresh start.
    3. Run the prepare command to regenerate the styled-system directory.
    import { createCerberusConfig, createCerberusPreset } from '@cerberus/panda-preset'
import { presetAcheronTheme } from '@cerberus/preset-acheron-theme'
import { presetElysiumTheme } from '@cerberus/preset-elysium-theme'
import { presetOceanusTheme } from '@cerberus/preset-oceanus-theme'

const isProd = process.env.NODE_ENV === 'production'

export default createCerberusConfig({
    clean: true,
    minify: isProd,
    
    include: [
      './node_modules/@cerberus-design/react/**/*.{ts,tsx,js,jsx}',
      './node_modules/@cerberus-design/data-grid/src/components/*.client.{ts,tsx}',
      './mdx-components.tsx',
      './app/**/*.{ts,tsx}',
    ],
    exclude: [],
    
    presets: [
      createCerberusPreset(),
      presetAcheronTheme,
      presetElysiumTheme,
      presetOceanusTheme,
    ],
})