NEWAI-native design subscriptions are back
Book a call

Storybook integration

Storybook is a workshop for UI components: each component gets stories that show its states, and the build is a static site your team can browse. Its MCP server lets coding agents read those components and run their tests. Next.js has an official Storybook framework; Astro does not, so there we run Storybook for the React or Svelte islands. Framer and Webflow keep components in their own editors, so Storybook does not apply there.

Connect StorybookSee the setup

Updated

Official sources

  1. Install StorybookStorybook docs · storybook.js.org
  2. Framework supportStorybook docs · storybook.js.org
  3. Storybook for Next.js with ViteStorybook docs · storybook.js.org
  4. Storybook for Next.jsStorybook docs · storybook.js.org
  5. Storybook for React and ViteStorybook docs · storybook.js.org
  6. Storybook for Svelte and ViteStorybook docs · storybook.js.org
  7. Publish StorybookStorybook docs · storybook.js.org
  8. Design integrationsStorybook docs · storybook.js.org
  9. MCP serverStorybook docs · storybook.js.org
  10. Front-end frameworksAstro docs · docs.astro.build
  11. DevLink export quickstartWebflow developer docs · developers.webflow.com

Checked against the official docs on. Tools change often; we re-check before every build.

ComplexityMedium
Method
  • Framer: Not supported
  • Webflow: Not supported
  • Astro: API
  • Next.js: Native
Typical setup1 to 3 days
What we doWe set up Storybook, write stories for the shared components and publish a private build your team can review.
CategoryDesign and handoff

Setup by platform

How we set up Storybook

  • Framer

    • Not supported

    Framer components, their variants and properties live on the Framer canvas, and there is no codebase for Storybook to run on. The Framer project itself is the component library.

  • Webflow

    • Not supported

    Webflow components are built and documented inside Webflow, so Storybook does not apply to the site. If the same components are needed in a React app, DevLink exports them as React code on a paid Workspace or CMS, Business or Ecommerce Site plan, and those can get stories there.

  • Astro

    • API

    Storybook has no Astro framework in its official list, so .astro components cannot get stories. We run @storybook/react-vite or @storybook/svelte-vite for the interactive islands, and show the .astro components on a styleguide page in the site.

    Astro development

  • Next.js

    • Native

    Storybook recommends its official @storybook/nextjs-vite framework for most projects, and @storybook/nextjs (Webpack) when the project has a custom Webpack setup. next/image works with no configuration, next/font is partly supported, and React Server Components render behind an experimental flag.

    Next.js development

Use cases

What teams use it for

  1. One place for every component

    Buttons, cards, forms and navigation in every state, so designers and developers review the same thing.

  2. Components an AI agent reuses

    With the MCP addon, Claude Code or Cursor can list your documented components, read their props and run the component tests, so new UI reuses what exists instead of inventing near-copies.

  3. Design next to code

    The designs addon embeds the Figma frame beside each story, so differences between design and build are easy to spot.

Before you add it

What to watch out for

  • Limits

    Stories drift from the code

    A story nobody updates shows a component that no longer exists. We keep stories next to the component files and build Storybook in CI, so a broken story fails the check.

  • Performance

    It is a second build

    Storybook builds separately and never ships to visitors, but it adds minutes to every CI run. We build it when components change, not on every content edit.

  • Security

    Keep the build private

    A built Storybook is a static site, so anyone with the link can open it. We put it behind your host’s access control or on Chromatic, and add a noindex tag either way.

FAQ

Questions about Storybook

Adrian

Can't find your answer?

Book a call and let's talk.

Book a call

Or email us  hello@designme.agency

Does Storybook work with Astro components?

Not directly. Storybook’s framework list has no Astro entry, so .astro files cannot get stories.

We use Storybook for the React or Svelte islands and a styleguide page for the rest. This site documents its own components the same way.

Is Storybook worth it for a marketing site?

When the site has a real component library, several developers, or components shared with a product, yes. For a small site with a dozen sections, a styleguide page does the job and costs less to keep up.

Can our designers see stories in Figma?

Yes. The Storybook Connect plugin for Figma embeds stories in Figma, but it needs the Storybook published to Chromatic. Going the other way, the designs addon shows the Figma frame inside Storybook.

Can AI agents use our Storybook?

Yes, through Storybook’s MCP addon, @storybook/addon-mcp, which serves an MCP endpoint from the Storybook dev server. Agents get tools to write and preview stories, look up the documented components and run component tests, accessibility checks included when Storybook Test is set up.

The component docs tools need the components manifest, which every React framework supports, so they work on Next.js and on the React islands of an Astro site. Storybook marks its AI features as a preview, so the API may still change.

Services

Glossary

Other integrations

All integrations 

You've reached the end, so now…

Tell us what you’re building.

We’ll help you map the right scope, team, timeline, and next steps.

Book a call