# Write a story

In this guide, we'll walk through render our newly [styled](https://helpscout.gitbook.io/hsds-react/contributing/styling) [custom `Strong` component](https://helpscout.gitbook.io/hsds-react/contributing/creating) 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](https://helpscout.gitbook.io/hsds-react/contributing/testing) to make sure `Strong` works as we expect it to. (Just in case!)

## See also

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