A step-by-step guide to get started with Cerberus
Cerberus is a Design System factory built on top of Panda CSS. This means you can create the strict ruleset of your own design system guidelines with the flexibility of a UI-library.
Cerberus provides an extensive ecosystem which consists of:
Cerberus has multiple presets that can be used to customize the look and feel of your application. You can pick and choose which presets you want to use.
The React package is a set of primitive React components (low-level layers) that consume the core preset recipes for sytling. Anything in the Components section of the docs comes from the React package.
The React library comes with the following benefits:
asChild (built into the Factory)The React library provides a default set of icons (Carbon Icons)
via the Cerberus Context Provider. However,
if you are interested in using a different icon set, you can simply register it
with the provider via the defineIcons helper.
The Data Grid package is a single component that provides a powerful and flexible way to display tabular data. It uses the React library to create and manage the grid in addition to the Signal library to manage the state.
We call advanced component APIs like this compositional components.
Signals are a way to manage reactive state that is external to the React library. This concept has become popular thanks to SolidJS. Thus, we have created a wrapper around the Preact Signals Core library to allow signal usage in React components.
This is a powerful way to ensure React components are optimized for performance and only re-render when absolutely necessary. This ultimately means that your application will show state updates without any unnecessary re-renders..
The Signals library powers the Data Grid package.
The docs are organized into sections that cover different aspects of Cerberus:
On this page
Loading...
Loading...
Loading...
Loading...
On this page