You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/sharing/index.mdx
+34-6Lines changed: 34 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,10 +5,38 @@ sidebar:
5
5
order: 7
6
6
---
7
7
8
-
You have your components ready and tested. That's great! Now you want to make your component library available to your team or community to help them understand how they work. There are multiple ways you can do that. You can publish your Storybook to services like Chromatic, embed some of your stories in your own website, or use third party services like Figma.
8
+
Once your components are built and tested, sharing your Storybook helps the rest of your team see how they work. You can publish your Storybook online, embed individual stories on other sites, integrate with design tools like Figma, or compose multiple Storybooks together.
9
9
10
-
-[Publish](./publish-storybook.mdx)
11
-
-[Embed](./embed.mdx)
12
-
-[Design integrations](./design-integrations.mdx)
13
-
-[Composition](./storybook-composition.mdx)
14
-
-[Package Composition](./package-composition.mdx)
10
+
## Quick sharing
11
+
12
+
The easiest way to share your Storybook is the Share button in the Storybook UI, which allows you to quickly share your Storybook with teammates and stakeholders without needing to set up a hosting solution. It provides a temporary, publicly accessible link to your Storybook that you can share with anyone.
13
+
14
+

15
+
16
+
The Share button requires the [Chromatic addon](https://storybook.js.org/addons/@chromatic-com/storybook).
17
+
18
+
## Publish
19
+
20
+
If you need more control over how your Storybook is shared, you can build Storybook as a static web app and deploy it anywhere you host static sites. A published Storybook gives developers, designers, PMs, and other stakeholders a shared URL to review work in progress without a local dev environment. You can host it for free on [Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) for review and visual testing workflows, or on services like GitHub Pages, Netlify, or AWS S3.
21
+
22
+
Read more in [Publish Storybook](./publish-storybook.mdx).
23
+
24
+
## Embed
25
+
26
+
Once your Storybook is published and publicly accessible, you can embed individual stories in other pages. Storybook supports `<iframe>` embeds out of the box, and Storybooks published to Chromatic also work with the oEmbed standard, so stories render inline in Notion, Medium, and other oEmbed-compatible platforms.
27
+
28
+
Read more in [Embed stories](./embed.mdx).
29
+
30
+
## Design integrations
31
+
32
+
Storybook integrates with design tools to tighten the loop between design and implementation. Embed Storybook stories in Figma to compare designs against the real components, or embed Figma frames in Storybook to reference designs alongside the components that implement them.
33
+
34
+
Read more in [Design integrations](./design-integrations.mdx).
35
+
36
+
## Composition
37
+
38
+
Composition lets you browse components from any other Storybook—published or running locally—inside your own Storybook's sidebar. It works across renderers and tech stacks, which makes it useful for referencing a design system, auditing component usage across projects, or viewing multiple Storybooks in one place.
39
+
40
+
Design system and component library authors can [configure their package](./package-composition.mdx) so that consumers automatically see the library's stories alongside their own when they install it. That gives consumers usage documentation in context, without leaving their Storybook.
41
+
42
+
Read more in [Storybook Composition](./storybook-composition.mdx).
0 commit comments