Source file extensions: .stories.(js|jsx|ts|tsx)

Stories are isolated instances of a component and they could have different variants.

Adding a story is easy and will be picked up automatically by Adding a very simple index.stories.js file containing just

export const story1 = () => "<button>Hello</button>";

Will automatically result in that story being rendered in the preview tab:

Of course, how you write this story will depend on your framework and needs. Read on for more information.

Storybook compatible supports Storybook's CSF stories.