Release - August 17, 2026

Cerberus v1.8 Release

Casey Baggz

Cerberus Admin

This release provides a major performance improvement for all of the Cerberus presets packages.

Overview

Here is a brief overview of what's new:

Core Problem - overloaded base preset
Solution - better token management
Migration - migration guide

Ever since our presets have come to life there has always been a need for a better way to manage tokens. However, anyone that has experience in building open-source projects knows that you don't really know how things scale until they start scaling.

With that said, we have always known that the long term goal of Cerberus is to be a preset-driven ecosystem regarding anything related to styling. This makes Cerberus IDE-like in that you can essentially "build your own" Cerberus experience by combining presets.

This is why was have a base preset and themes. Theme presets add new theme-related functionality to the Cerberus base. Likewise, the base should be the foundational non-theme-related functionality. This is where the problem lies.

When we started and were moving fast, we put the color primitives in the base preset because at the time, there was only a single theme (cerberus). Likewise, PandaCSS was still in the early stages and had not yet created the APIs we have today.

Now that we know what the "big picture" is for the ecosystem, we have spotted some potential issues with the current base preset focusing around the primtive tokens.

At the base level, we were adding Cerberus tokens on top of the Panda Base tokens which resulted in shipping additional color tokens we didn't need. Likewise, we sync our color tokens from the Cerberus Figma variables which also resulted in shipping every color token for every theme we supported. Not ideal.

Solution

After a quick redesign for our preset architecture, we divided and conquered through upgrading both the Figma variables and the API preset design. This resulted in allowing us to manage color tokens more efficiently while also providing a better Figma experience.

Thus, as of 1.8 the base preset no longer ships primitive color tokens. We not only allow each respective theme to register their own primtives and semantic tokens, but we also strip out the extra Panda Base color tokens.

Additionally, we've improved the developer experience of the createCerberusConfig utility which now looks for any Cerberus theme preset and does some extra work on behalf of the developer under the hood.

The result is a better developer experience with a big performance boost for development as now only a single set of both color and semantic tokens are ever assigned at a time in the browser. When you can a theme, Panda will replace the current tokens with new values (vs. creating a new set of variables that need to be evaluated by the browser).

Migration Guide

Migration is straightforward and simple, but we will add in an extra step just to clean up any old tokens that may have been assigned before.

Once you have installed v1.8, do the following:

If you have the staticCss.themes field in your panda config, kill it. You no longer need it.
Run rm -rf styled-system just to ensure you are starting fresh
Run the prepare command to regenerate the styled-system directory

Basically, your config should look something like this (this is what we use for this site):

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,
  ],
})

To use Cerberus presets, you simply just need to add them to your presets array in your config and we'll take care of the rest.

Thanks!

This is another great release introducing some beneficial tools and overall improvements.

A special thanks to everyone who has helped validate the APIs, docs, and submitted features or bugfixes for this release.

There is no "I" in Cerber-"US"

Upgrading

To upgrade to this release, you can upgrade all your Cerberus packages to the latest version: 1.8.0