Make it yours

Copy and paste the following code into your config file.

import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@park-ui/panda-preset'

export default defineConfig({
  preflight: true,
  presets: [
    '@pandacss/preset-base',
    createPreset({
      accentColor: 'neutral',
      grayColor: 'neutral',
      borderRadius: 'sm',
    }),
  ],
  include: ['./src/**/*.{js,jsx,ts,tsx,astro,vue}'],
  jsxFramework: 'react',
  outdir: 'styled-system',
})

Examples

Banners

Used to display an important message at the top or bottom of the page

Banner For Cookies

Figma

Banner For Newsletter

Figma

Banner With Two Buttons

Figma