Skip to main content
The apps/storybook directory runs Storybook as a frontend workshop for the design system.

​
Overview

Storybook ships pre-configured with every shadcn/ui component, the correct fonts, and matching providers so it renders the same as your app. 
turbo dev --filter=storybook
The preview opens at localhost:6006.

​
Adding stories

Create .stories.tsx files in apps/storybook/stories. Each component gets its own file:
apps/storybook/stories/button.stories.tsx
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "@repo/design-system/components/ui/button";

const meta: Meta<typeof Button> = {
  title: "Components/Button",
  component: Button,
};

export default meta;

export const Default: StoryObj<typeof Button> = {
  args: { children: "Click me", variant: "default" },
};