@cerberus-design/panda-preset

Panda Preset

This is the official Panda-CSS preset for the Cerberus design system.

Installation

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

Usage

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

export default defineConfig({
  ...cerberusConfig,

  include: ['./src/**/*.{ts,tsx,js,jsx}'],
  exclude: [],

  presets: [pandaPreset, cerberusPreset],
})

Features

• Conditions
• Utilities
• Patterns
• Global CSS
• Key-frames
• Text Styles
• Tokens
• Semantic Tokens
• Recipes

NextJS Font Features

If you use NextJS, we recommend the font and settings mentioned below. Unfortunately, NextJS enforces a rule of Font loader values must be explicitly written literals. which means you cannot use a variable to define the font settings or else we would also provide that. 😭

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

---

Copyright (c) 2024 Digital University, All Rights Reserved