componentsdirectory, but this path is also configurable via a local
componentLibPathfield. Once you have that set, create an MDX (or Markdown) file alongside any component in that directory to document it and the Gatsby theme will automatically consume them and add them to the reserved
Componentsdirectory (again, see the
gatsby-config.js(this can be a local or remote path).
<StorybookComponent id="button--emoji" />
idfor your component is the ID that Storybook uses to identify the component in their iframe, which follows this convention:
COMPONENT_DIRECTORY--COMPONENT_NAME(you can find this in the Storybook URL of your component). Put in the correct ID and you will see your live component show in your documentation! See the
examplecomponents directory for usage ideas. Also, there is a height prop that you can configure to increase the height of the iframe depending on the nature of the component (e.g.,
<StorybookComponent id="button--emoji" height="100px" />).