---
schema_version: "1"
id: 5f4bf4450f17c6aada7ee3cccb1a702a9657f7a70334e9f3f8d037be096127db
title: Create a Storybook Story
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/sfnext/guides/sfnext-storybook-create-story.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-storybook-create-story.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 01c7782ee4b030fe7dced7f8c16cd4b47bf21544e53e2467774b7b4fcf77dbff
products:
  - Composable Storefront
  - Salesforce APIs
---
# Create a Storybook Story

Create a story for a component for a specific rendered state to show its look and behavior. A component can have multiple stories, one per state—default, loading, and error. Add a story in the Storybook UI or use a code file.

To add a story in the Storybook UI, click **+** in the sidebar and search for your component. For more details, see [Working with Stories](https://storybook.js.org/docs/get-started/whats-a-story#working-with-stories) and [How to write stories](https://storybook.js.org/docs/writing-stories) in the Storybook documentation.

After you add a story in the Storybook UI, a story file is created. The story file format is `*.stories.tsx` (for example, `index.stories.tsx`, or named after a subcomponent such as `signup.stories.tsx`). Update the story file to customize it for the specific rendered state for displaying the component. If you add a story using a code file, add it in the `stories/` subfolder next to the component file.

This code example defines a Storybook story for a React component named `MyComponent`. It renders `MyComponent` in the `Default` state and exports a story with the primary variant.

```
import type { Meta, StoryObj } from '@storybook/react-vite';
import { MyComponent } from './MyComponent';

const meta: Meta<typeof MyComponent> = {
  title: 'Components/MyComponent',
  component: MyComponent,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    variant: 'primary',
  },
};

```

## Best Practices for Writing a Story

When you write a story, keep in mind these best practices.

- Use one file per component.
- To test components with different screen sizes, use Storybook's built-in viewport toolbar instead of creating separate stories.
- Use `args` & `argTypes` to make props interactive.
- Include play functions for interaction coverage.
- Add component description in the docs.
- Fix a11y issues directly in component logic.
- Avoid mocking real implementations incorrectly.
- Use mock data at the router boundary with story parameters. For components that require global context, wrap them in the provider stack via a decorator.

## See Also

- [GitHub: Storybook Readme](https://github.com/SalesforceCommerceCloud/storefront-next-template/blob/latest/docs/README-STORYBOOK.md)
- [Build and Test Components with Storybook](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-storybook.md)