Ship

Storybook

Every exported project comes with a ready Storybook: generated stories for every component, variant, state and breakpoint.

Storybook is where developers, designers and QA look at components one by one, outside the product. Shippp generates it for you: every Next.js project export includes a configured Storybook with stories for every component in your file — each variant, interaction state, breakpoint and swap you designed.

Why it matters

The stories render the exact components Shippp exported, inside your theme. There is no second, hand-maintained copy of the UI that could drift away from the design — Storybook shows the same source of truth as your product.

What Shippp generates

For every component on your Components page, Shippp creates a story file with one story per case. Stories are grouped under Components/<Component name> and have Storybook's automatic docs page turned on.

Story case	Comes from	Example
Default	The component's default variant	Button
Variant	Every value of every property in Studio	Button / Variant: Secondary
Compound	Combinations of properties you styled separately	Button / Secondary + Small
State	Hover, focus and disabled	Button / Hover
Breakpoint	Components you turned responsive in Studio	Navigation / Mobile
Swap	Instance swap properties, shown with an alternative from the preferred list	Button / Icon swapped

Stories are generated from the same export as the components themselves, so the same file and version always give the same stories with stable story IDs — handy for visual regression tests.

Run Storybook

Export a Next.js project
Open Export code, choose Next.js project and any code target — Storybook is included for Next.js + Chakra UI, Next.js + Base UI and Next.js + Radix. See Export code.
Install and start it
Terminal
```
npm install
npm run storybook
```
Storybook opens at http://localhost:6006.
Share a static build
Terminal
```
npm run build-storybook
```
The static site lands in storybook-static/ — host it anywhere to share components with your team or stakeholders.

Where the files are

Path	Contents
`.storybook/`	Storybook configuration. Every story renders inside your project theme, with your fonts.
`src/storybook/`	One <component>.stories.tsx file per component; the rendered cases live in src/storybook/cases/.
`storybook/case-manifest.json`	The list of cases the stories are generated from.

Note

Treat the generated stories like the rest of the generated code: change the design in Shippp and export (or sync) again rather than editing them by hand. Write your own extra stories in separate files.

Design-system packages

A Design system export is a package other projects install. If your developers write stories for its components in their own Storybook, they add one decorator so every story renders with your theme — the package README includes it:

.storybook/preview.tsx

import { ChakraProvider } from "@chakra-ui/react";
import { system } from "your-design-system";

export default {
  decorators: [
    (Story) => (
      <ChakraProvider value={system}>
        <Story />
      </ChakraProvider>
    ),
  ],
};

Get better stories from your design

Name components clearly — the name becomes the story title (Components/Button).

Name properties and values by intent — they become story names (Variant: Secondary).

Design hover, focus and disabled as states in Studio — each gets its own story.

Turn components responsive in Studio when they change per breakpoint — each breakpoint gets a story.

Use instance swap properties with a preferred list for icons and slots — an alternative option gets its own story.

AI clients connected through MCP use the same export, so a project generated or synced by an agent includes the same Storybook.

Export code

Plans & usage