# Storybook File and Folder Structure

Storybook files are under the `.storybook/` folder. Components are under the `src/components/` folder.

```
src/
  components/
    __mocks__/
      checkout-data.ts
      ...
    buttons/
      button.tsx
      button.test.tsx
      /stories
        button.stories.tsx
        button-snapshot.tsx
        __snapshots__/
          button-snapshot.tsx.snap
.storybook/
  main.ts
  preview.tsx
  vite.config.ts
  vitest.setup.ts
  storybook-providers.tsx

```

## See Also

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