> For the complete documentation index, see [llms.txt](https://helpscout.gitbook.io/hsds-react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helpscout.gitbook.io/hsds-react/contributing/storybook.md).

# Write a story

In this guide, we'll walk through render our newly [styled](/hsds-react/contributing/styling.md) [custom `Strong` component](/hsds-react/contributing/creating.md) in [Storybook](https://storybook.js.org/).

## Initial files

The first thing we'll need to do is create a dedicated `Strong` directory under `stories/`:

```
hsds-react/
  └── stories/
      └── Strong/
        └── Strong.stories.mdx
```

[Writing stories](https://hsds.helpscout.com/?path=/docs/welcome-4-writing-stories--page)

## Next

Let's [write some tests](/hsds-react/contributing/testing.md) to make sure `Strong` works as we expect it to. (Just in case!)

## See also

* [Storybook](https://storybook.js.org/)