Styling Addon: configure styles and themes in StorybookAutomate with Chromatic
Storybook Day 2023
Back to integrations
Add your integration
  • ⭐️ 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.


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


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

This can be done at the story level as well


export const Primary = () => (
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

Maintained by
Special thanks to Netlify and CircleCI