# vuestorefront/storefront-ui architecture

> Architecture diagram of the GitHub repository vuestorefront/storefront-ui, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/vuestorefront/storefront-ui
- Repository: https://github.com/vuestorefront/storefront-ui

## Overview

Storefront UI is an eCommerce-focused, framework-agnostic component library and design system; the preview apps let developers inspect examples and adjust showcase controls. The main workflow is browsing a framework preview, selecting a component showcase, and viewing its rendered example; control state can be synchronized with URL parameters. The README also documents reusable base components, copyable blocks, interaction composables, a Tailwind preset, and typography support. Preview wiring is based on the supplied tree and sampled control code; unsampled API and library internals are represented only at supported directory paths.

Main entry points: [`apps/preview/next/pages/showcases`](https://github.com/vuestorefront/storefront-ui/tree/v2-develop/apps/preview/next/pages/showcases) (React showcases), [`packages/sfui/frameworks`](https://github.com/vuestorefront/storefront-ui/tree/v2-develop/packages/sfui/frameworks) (Base components), [`apps/preview/next/pages`](https://github.com/vuestorefront/storefront-ui/tree/v2-develop/apps/preview/next/pages) (React preview pages), [`apps/preview/nuxt/pages`](https://github.com/vuestorefront/storefront-ui/tree/v2-develop/apps/preview/nuxt/pages) (Vue preview pages)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_preview["Component previews"]
  node_next_pages["React preview pages"]
  node_nuxt_pages["Vue preview pages"]
  node_next_showcases["React showcases"]
  node_nuxt_showcases["Vue showcases"]
  node_next_example["React example view"]
  node_nuxt_example["Vue example view"]
  node_next_controls["React controls<br/>[Controls.tsx]"]
  node_nuxt_controls["Vue controls<br/>[Controls.vue]"]
  node_control_state["URL control state<br/>[useSearchParams.ts]"]
  node_examples_api["Examples API<br/>[getExamples.ts]"]
  node_showcases_api["Showcases API<br/>[getShowcases.ts]"]
  node_icons_api["Icons API<br/>[getIcons.ts]"]
end

subgraph group_library["UI building blocks"]
  node_base_components["Base components"]
  node_blocks["Commerce blocks"]
end

subgraph group_interaction["Interaction utilities"]
  node_react_hooks["React composables"]
  node_vue_composables["Vue composables"]
  node_shared_accessibility["Shared accessibility"]
end

subgraph group_design["Design system"]
  node_tailwind["Tailwind preset<br/>[index.js]"]
  node_typography["Typography package"]
  node_figma["Figma design kit"]
end

node_developer(("Developer"))

node_developer -->|"browses"| node_next_pages
node_developer -->|"browses"| node_nuxt_pages
node_next_pages -->|"renders routes"| node_next_showcases
node_nuxt_pages -->|"renders routes"| node_nuxt_showcases
node_next_showcases -->|"displays example"| node_next_example
node_nuxt_showcases -->|"displays example"| node_nuxt_example
node_next_example -->|"exposes controls"| node_next_controls
node_nuxt_example -->|"exposes controls"| node_nuxt_controls
node_next_controls -->|"syncs URL state"| node_control_state
node_nuxt_controls -->|"syncs URL state"| node_control_state
node_next_showcases -->|"requests examples"| node_examples_api
node_next_showcases -->|"requests showcase data"| node_showcases_api
node_next_showcases -->|"requests icons"| node_icons_api
node_base_components -->|"builds upon"| node_blocks
node_react_hooks -->|"uses focus helpers"| node_shared_accessibility
node_vue_composables -->|"uses focus helpers"| node_shared_accessibility
node_tailwind -->|"styles"| node_base_components
node_typography -.->|"supports text styles"| node_base_components
node_figma -.->|"documents design"| node_base_components

click node_next_pages "https://github.com/vuestorefront/storefront-ui/tree/v2-develop/apps/preview/next/pages"
click node_nuxt_pages "https://github.com/vuestorefront/storefront-ui/tree/v2-develop/apps/preview/nuxt/pages"
click node_next_showcases "https://github.com/vuestorefront/storefront-ui/tree/v2-develop/apps/preview/next/pages/showcases"
click node_nuxt_showcases "https://github.com/vuestorefront/storefront-ui/tree/v2-develop/apps/preview/nuxt/pages/showcases"
click node_next_example "https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/next/components/utils/ComponentExample.tsx"
click node_nuxt_example "https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/nuxt/components/utils/ComponentExample.vue"
click node_next_controls "https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/next/components/utils/Controls.tsx"
click node_nuxt_controls "https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/nuxt/components/utils/Controls.vue"
click node_control_state "https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/shared/utils/useSearchParams.ts"
click node_base_components "https://github.com/vuestorefront/storefront-ui/tree/v2-develop/packages/sfui/frameworks"
click node_blocks "https://github.com/vuestorefront/storefront-ui/tree/v2-develop/apps/preview/next/pages/showcases/Checkout"
click node_react_hooks "https://github.com/vuestorefront/storefront-ui/tree/v2-develop/packages/sfui/frameworks/react/hooks"
click node_vue_composables "https://github.com/vuestorefront/storefront-ui/tree/v2-develop/packages/sfui/frameworks/vue/composables"
click node_shared_accessibility "https://github.com/vuestorefront/storefront-ui/tree/v2-develop/packages/sfui/shared"
click node_tailwind "https://github.com/vuestorefront/storefront-ui/blob/v2-develop/packages/config/tailwind/index.js"
click node_examples_api "https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/next/pages/api/getExamples.ts"
click node_showcases_api "https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/next/pages/api/getShowcases.ts"
click node_icons_api "https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/next/pages/api/getIcons.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_next_pages,node_nuxt_pages,node_next_showcases,node_nuxt_showcases,node_next_example,node_nuxt_example,node_next_controls,node_nuxt_controls,node_control_state,node_examples_api,node_showcases_api,node_icons_api toneBlue
class node_base_components,node_blocks toneAmber
class node_react_hooks,node_vue_composables,node_shared_accessibility toneMint
class node_tailwind,node_typography,node_figma toneRose
class node_developer toneIndigo
```

## Components

### Component previews

- [React preview pages](https://github.com/vuestorefront/storefront-ui/tree/v2-develop/apps/preview/next/pages): `apps/preview/next/pages`
- [Vue preview pages](https://github.com/vuestorefront/storefront-ui/tree/v2-develop/apps/preview/nuxt/pages): `apps/preview/nuxt/pages`
- [React showcases](https://github.com/vuestorefront/storefront-ui/tree/v2-develop/apps/preview/next/pages/showcases): `apps/preview/next/pages/showcases`
- [Vue showcases](https://github.com/vuestorefront/storefront-ui/tree/v2-develop/apps/preview/nuxt/pages/showcases): `apps/preview/nuxt/pages/showcases`
- [React example view](https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/next/components/utils/ComponentExample.tsx): `apps/preview/next/components/utils/ComponentExample.tsx`
- [Vue example view](https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/nuxt/components/utils/ComponentExample.vue): `apps/preview/nuxt/components/utils/ComponentExample.vue`
- [React controls](https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/next/components/utils/Controls.tsx): `apps/preview/next/components/utils/Controls.tsx`
- [Vue controls](https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/nuxt/components/utils/Controls.vue): `apps/preview/nuxt/components/utils/Controls.vue`
- [URL control state](https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/shared/utils/useSearchParams.ts): `apps/preview/shared/utils/useSearchParams.ts`
- [Examples API](https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/next/pages/api/getExamples.ts): `apps/preview/next/pages/api/getExamples.ts`
- [Showcases API](https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/next/pages/api/getShowcases.ts): `apps/preview/next/pages/api/getShowcases.ts`
- [Icons API](https://github.com/vuestorefront/storefront-ui/blob/v2-develop/apps/preview/next/pages/api/getIcons.ts): `apps/preview/next/pages/api/getIcons.ts`

### UI building blocks

- [Base components](https://github.com/vuestorefront/storefront-ui/tree/v2-develop/packages/sfui/frameworks): `packages/sfui/frameworks`
- [Commerce blocks](https://github.com/vuestorefront/storefront-ui/tree/v2-develop/apps/preview/next/pages/showcases/Checkout): `apps/preview/next/pages/showcases/Checkout`

### Interaction utilities

- [React composables](https://github.com/vuestorefront/storefront-ui/tree/v2-develop/packages/sfui/frameworks/react/hooks): `packages/sfui/frameworks/react/hooks`
- [Vue composables](https://github.com/vuestorefront/storefront-ui/tree/v2-develop/packages/sfui/frameworks/vue/composables): `packages/sfui/frameworks/vue/composables`
- [Shared accessibility](https://github.com/vuestorefront/storefront-ui/tree/v2-develop/packages/sfui/shared): `packages/sfui/shared`

### Design system

- [Tailwind preset](https://github.com/vuestorefront/storefront-ui/blob/v2-develop/packages/config/tailwind/index.js): `packages/config/tailwind/index.js`
- **Typography package**
- **Figma design kit**

### Other components

- **Developer**

## Connections

- Developer → React preview pages: browses
- Developer → Vue preview pages: browses
- React preview pages → React showcases: renders routes
- Vue preview pages → Vue showcases: renders routes
- React showcases → React example view: displays example
- Vue showcases → Vue example view: displays example
- React example view → React controls: exposes controls
- Vue example view → Vue controls: exposes controls
- React controls → URL control state: syncs URL state
- Vue controls → URL control state: syncs URL state
- React showcases → Examples API: requests examples
- React showcases → Showcases API: requests showcase data
- React showcases → Icons API: requests icons
- Base components → Commerce blocks: builds upon
- React composables → Shared accessibility: uses focus helpers
- Vue composables → Shared accessibility: uses focus helpers
- Tailwind preset → Base components: styles
- Typography package → Base components: supports text styles
- Figma design kit → Base components: documents design