By Shaheer Malik · Source: Framer Help: How plugins work, read on 29 October 2026
Quick answer: Storybook documents a coded React component library; it does not connect to Framer. Framer supports React code components, so a component from your library can be rebuilt or brought in as a code component, while Storybook stays the home of the coded system.
How to connect Storybook to Framer
- Decide which components the marketing site really needs
- Rebuild simple ones as native Framer components for easy editing
- Bring complex ones in as React code components
- Keep Storybook as the reference for the product's coded library
Good to know
- Native Framer components are easier for marketers to edit than code components
- Shared tokens keep the site and product looking like one brand
At a glance
| Tool | Storybook |
|---|---|
| Category | Design and code |
| How it connects | Not a Framer integration |
| Where in Framer | Used with coded component libraries |
Storybook and Framer questions
Can I use my Storybook components in Framer?
Not directly. Framer supports React code components, so components can be brought in as code, or rebuilt natively for easier editing.
Related integrations
- Figma and Framer: a marketplace plugin
- GitHub and Framer: a marketplace plugin; ai tools via framer mcp
- Keystatic and Framer: not a framer integration
Every integration is on the integrations page. If you would rather have the site built with this already connected, the Framer website sprint is $1,999 fixed for 14 days.
Want it connected for you?
I design and build Framer sites with analytics, forms and integrations set up, for a fixed $1,999 in 14 days.