---
schema_version: "1"
id: 5561df0c6c3bb6338abc8a2c97122bfcb3ac8a7ab237e5dd97c4888e746e43db
title: Storybook File and Folder Structure
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/sfnext/guides/sfnext-storybook-structure.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-storybook-structure.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: ca3c4effe4d9000cfa729b63b16e45ded1f4cfa9de18fab80c85508d1ca8fe2f
products:
  - Composable Storefront
  - Salesforce APIs
---
# 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](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-storybook.md)