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

Cards

Used to display a collection of items in a grid or list

Card Authentification

Figma

Card Issue

Figma

Card Notification

Figma

Card Payment

Figma

Card Shop

Figma