release - March 12, 2025

Cerberus 0.18

CB

Casey Baggz

Cerberus Admin

We are excited to announce the release of Cerberus v0.18! This release introduces a new set of PandaCSS config helpers that make it easier to customize your Cerberus project.

Our goal this year is to make it easier to install, use, and extend Cerberus. Today, we are taking a big step towards that goal with the introduction of PandaCSS config helpers.

PandaCSS Config Helpers

PandaCSS is the foundation of Cerberus and our new config helpers will keep your config clean with the ultimate goal of understanding where Cerberus is contributing within your PandaCSS setup.

Let's see it in action:

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


export default createCerberusConfig({
  presets: [createCerberusPreset()],


  include: ['./app/**/*.{ts,tsx}'],
  exclude: [],
})

createCerberusConfig

The createCerberusConfig function adds the recommended Cerberus settings and any additional settings you pass into it.

This function is designed to be used as the default export of your PandaCSS config file as it will ensure that all the necessary Cerberus settings are applied to your project while providing the strict type checking you expect from PandaCSS.

It takes the same Object as the PandaCSS defineConfig function.

createCerberusPreset

The createCerberusPreset function does the same except on the preset level. It will add all the necessary Cerberus theme setup to your PandaCSS configuration.

At the core level, the Cerberus preset is a collection of:

  1. Tokens - The primitive tokens that power the Cerberus design system.
  2. Semantic Tokens - The theme specific tokens that are used to create a consistent look and feel for your application.
  3. Recipes - The component recipes that are used to create the Cerberus component library.
  4. Conditions - The conditional styles that are used to create responsive and adaptive designs.
  5. Utilities - The utility classes that are used to create custom css properties for your application.
  6. Patterns - The layout patterns that are used to make building layouts easier.
  7. Themes - The multi-theme setup that is used to manage multiple themes within Panda.

This will open up the door for more advanced use cases and customizations, while keeping the core Cerberus experience consistent and easy to use.

Check out the new Installation Docs to get the full picture.

Archiving the @cerberus/styled-system Package

With the introduction of the new PandaCSS config helpers, we no longer need to depend on an external package to manage Cerberus styles within your project.

Before, we needed it in order for our React library to be able to use the same styling system as the rest of your application. With the new setup, we utilize the local styles generated by PandaCSS within your project.

This means that your local styled-system directory is the single source of truth for all of your styles.

Migrating to the New Setup

  1. Step 1: Update your PandaCSS config file to use the new createCerberusConfig and createCerberusPreset functions.
  2. Step 2: Make sure your project has the correct typescript settings applied
  3. Step 3: Remove the @cerberus/styled-system package from your project.
  4. Step 4: Update your imports to use styled-system instead of @cerberus/styled-system.

Once you have applied these steps, the only Cerberus package you will need to use imports from is @cerberus-design/react.

Anything PandaCSS/Preset related should be imported from your local styled-system.

Other Updates

Among the new config helpers, we have also made some other updates to the Cerberus project:

  • Fixed: Added better typing for the Show component that is more consistent with the original SolidJS API
  • Fixed: Corrected a bad DatePicker import for the DatePickerHead primitive
  • Fixed: Added missing styles for the Scrollable pattern

Upgrading

To upgrade to the latest version of Cerberus, run the following command:

Terminal
npm run up:cerberus

What's Next?

We are continuously working on improving the Cerberus experience and we have some exciting features and improvements planned for the future.