Early Adopting Cerberus (Alpha)

[caseybaggz]

If you are a user or team that is interested in early adopting Cerberus, follow the steps below to add Cerberus Design System to your app.

Step 1 - Install Panda-CSS

Install Panda CSS using the guide related to your project stack. Make sure you have validated Panda works before moving onto the next step. This is included in the Panda setup guides.

Supporting Older Browsers

If your app needs to support older browsers be sure to also install and use the CSS Polyfills

Step 2 - Install Cerberus Packages

Once you have verified Panda CSS works in your project, install the Cerberus and Panda preset:

pnpm add -D @cerberus-design/panda-preset @pandacss/preset-panda

Step 3 - Update Panda Config to use Cerberus

Once the preset packages are installed, update your panda.config.ts to use those:

import { defineConfig } from '@pandacss/dev'
import pandaPreset from '@pandacss/preset-panda'
import { cerberusPreset, cerberusConfig } from '@cerberus-design/panda-preset'

export default defineConfig({
  ...cerberusConfig,

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

  presets: [pandaPreset, cerberusPreset],
})

Update your local styles

Now that you have extended Panda, you need to update your local styles by running the prepare script.

pnpm run prepare

Step 4 - Setup Cerberus Fonts (optional)

If you would like to use the Brand font associated with Cerberus, we recommend Poppins. Unfortunately, it is not a variable font, so another great solution which is, is the Inter font (comes pre-configured in NextJS apps).

NextJS usage:

import { Poppins } from 'next/font/google'

const poppins = Poppins({
  display: 'swap',
  subsets: ['latin'],
  weight: ['400', '600', '700', '800'],
})

Using the Cerberus React & Icons packages

If you are interested in using the Cerberus React and Icons packages, install those now:

pnpm add @cerberus-design/{react,icons}

Add a Cerberus script

To help make maintaining a breeze, add this new script to your package.json to use when you are ready to upgrade Cerberus:

"up:cerberus": "pnpm up @cerberus-designs/{panda-preset,icons,react}"

Typescript w/out NextJS