New
Styling Addon: configure styles and themes in StorybookAutomate with Chromatic
Storybook Day 2023
Star77,634
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Readme View on GitHub

Storybook Addon Source Link

npm npm

Provides a link to the story's source in the toolbar.

Usage

Inside each component, include a parameter for your components's source code.

*.stories.js

export default {
  title: 'Example',
  component: Button,
  parameters: {
    sourceLink: '<link to source>'
  }
};

This can be done at the story level as well

*.stories.js

export const Primary = () => (
  <Button>Primary</Button>
);
Primary.parameters = {
  sourceLink: '<link to source>'
};

If the parameter is set, clicking the icon button will take you to the source link.

Screen Shot 2022-03-23 at 1 15 50 PM

If an inactive source link is clicked, a tool-top will remind the user of this usage.

Alternatively, you may set a global parameter to define a default link in the .storybook/preview.js file like so:

export const parameters = {
  sourceLink: '<link to source>'
}

Precedence follows the rules of parameter inheritance

Join the community
6,055 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI