Getting Started

Using Panda CSS with Storybook

Setting up Panda CSS in a Storybook project using PostCSS.

Setup

We are assuming that you already have a project set up with a framework like React, Vue or Svelte.

Install Storybook

Storybook needs to be installed into a project that is already set up with a framework. It will not work on an empty project.

pnpm dlx storybook@latest init

Install Panda

Install panda and create your panda.config.ts file.

pnpm install -D @pandacss/dev
pnpm panda init --postcss

Configure the content

Make sure that all of the paths of your Storybook components are included in the include section of the panda.config.ts file.

panda.config.ts
import { defineConfig } from "@pandacss/dev"
export default defineConfig({
 // Whether to use css reset
 preflight: true,
 // Where to look for your css declarations
 include: [
  "./src/**/*.{js,jsx,ts,tsx}",
  "./pages/**/*.{js,jsx,ts,tsx}",
  "./stories/**/*.{js,jsx,ts,tsx}",
 ],
 // Files to exclude
 exclude: [],
 // The output directory for your css system
 outdir: "styled-system",
})

Configure the entry CSS with layers

Locate your main CSS file and add the following layers:

src/index.css
@layer reset, base, tokens, recipes, utilities;

Import the CSS in your Storybook config

Locate your .storybook/preview.js file and import the CSS file.

In this example CSS file is located in the src folder.

.storybook/preview.js
import "../src/index.css";
 
import type { Preview } from "@storybook/react";
 
const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};
 
export default preview;

Start your build process

Run the following command to start your Storybook server.

pnpm storybook

Start using Panda

Now you can start using Panda CSS in Storybook.

Here is the example of a Button component and its corresponding Storybook story:

src/stories/Button.tsx
import { ReactNode } from 'react';
import { css } from '../../styled-system/css';
 
export interface IButtonProps {
  children: ReactNode;
}
 
export const Button = ({ children }: IButtonProps) => {
  return (
    <button
      className={css({
        bg: 'red.300',
        fontFamily: 'Inter',
        px: '4',
        py: '3',
        borderRadius: 'md',
        _hover: { bg: 'red.400' },
      })}
    >
      {children}
    </button>
  )
};
src/stories/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { css } from '../../styled-system/css';
 
import { Button } from './Button';
 
const meta = {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <div className={css({ m: 10 })}>
        <Story />
      </div>
    ),
  ],
} satisfies Meta<typeof Button>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Default: Story = {
  args: {
    children: 'Hello 🐼!',
  },
};

Troubleshooting

If you are having issues with the PostCSS plugin similar to Cannot find module '@pandacss/dev/postcss', update the PostCSS config as follows:

postcss.config.js
module.exports = {
  plugins: [require('@pandacss/dev/postcss')],
}
SvelteCascade Layers