How vuestorefront/storefront-ui works
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: showcases React showcases · frameworks Base components · next/pages React preview pages · nuxt/pages Vue preview pages
Components 21
Component previews
- React preview pages
apps/preview/next/pages - Vue preview pages
apps/preview/nuxt/pages - React showcases
apps/preview/next/pages/showcases - Vue showcases
apps/preview/nuxt/pages/showcases - React example view
apps/preview/next/components/utils/ComponentExample.tsx - Vue example view
apps/preview/nuxt/components/utils/ComponentExample.vue - React controls
apps/preview/next/components/utils/Controls.tsx - Vue controls
apps/preview/nuxt/components/utils/Controls.vue - URL control state
apps/preview/shared/utils/useSearchParams.ts - Examples API
apps/preview/next/pages/api/getExamples.ts - Showcases API
apps/preview/next/pages/api/getShowcases.ts - Icons API
apps/preview/next/pages/api/getIcons.ts
UI building blocks
- Base components
packages/sfui/frameworks - Commerce blocks
apps/preview/next/pages/showcases/Checkout
Interaction utilities
- React composables
packages/sfui/frameworks/react/hooks - Vue composables
packages/sfui/frameworks/vue/composables - Shared accessibility
packages/sfui/shared
Design system
- Tailwind preset
packages/config/tailwind/index.js - Typography package
- Figma design kit
Other components
- Developer
Connections 19
- 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