Storybook setup

Install

npx storybook@latest init

Detects your framework automatically. Works with Next.js, Vite, CRA, and Remix.

Write your first story

import type { Meta, StoryObj } from '@storybook/react'
import { Button } from './Button'

const meta: Meta<typeof Button> = {
  title: 'UI/Button',
  component: Button,
  args: { children: 'Click me' },
}
export default meta

type Story = StoryObj<typeof Button>
export const Primary: Story = {}
export const Disabled: Story = { args: { disabled: true } }

Run it

npm run storybook

Opens on localhost:6006. Hot-reloads on every save.

Tailwind integration

// .storybook/preview.ts
import '../src/app/globals.css'

export const parameters = {
  backgrounds: {
    default: 'meridian-dark',
    values: [{ name: 'meridian-dark', value: '#0A0612' }],
  },
}

Import your global CSS once — every story inherits your Tailwind config and custom properties.