Skip to content

Commit e458309

Browse files
committed
Docs: Add documentation for the publishing via the share menu
1 parent 62d53db commit e458309

2 files changed

Lines changed: 34 additions & 6 deletions

File tree

278 KB
Loading

docs/sharing/index.mdx

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,38 @@ sidebar:
55
order: 7
66
---
77

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.
99

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+
![Share menu open, with title: Publish a build to share](../_assets/sharing/share-menu.png)
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

Comments
 (0)