@cdsxyz/setu-storefront-ui
v0.1.0
Published
Brand-agnostic Vue 3 components for storefronts built on the Setu commerce backend.
Maintainers
Readme
@setu/storefront-ui
Brand-agnostic Vue 3 components for storefronts built on the Setu commerce backend.
Install
npm install @setu/storefront-uiPeer dependencies
npm install vue @inertiajs/vue3 @setu/storefrontComponents
| Component | Purpose |
|---|---|
| PriceDisplay | Paise integer → formatted price + compare-at |
| ProductCard | Product tile: image, name, price |
| VariantSelector | Multi-option variant selector |
| QuantitySelector | Inc/dec quantity input |
| CartDrawer | Slide-out cart sidebar |
| CartLine | Single cart line item |
| SearchBar | Search form |
| SearchAutocomplete | Search with dropdown suggestions |
| FilterSidebar | Category + attribute filters |
| ActiveFilterChips | Removable filter tags |
| Breadcrumbs | Navigation trail |
| MobileNav | Mobile navigation drawer |
| EmptyState | Generic empty placeholder |
| ImageWithFallback | Image with error handling |
| CollectionBlocks | Editorial, featured product, image banner, related |
Usage
import { ProductCard, CartDrawer, PriceDisplay } from '@setu/storefront-ui'Theming
Components use CSS custom properties scoped with --store-*. Define these on :root in your app:
:root {
--store-text: #1a1a1a;
--store-canvas: #ffffff;
--store-font-heading: 'Playfair Display', serif;
--store-font-body: 'Inter', sans-serif;
}What's NOT included
Domain-specific Setu components (textile customizer, weaver profiles, serialized stock, etc.) remain in the demo app. This package contains only generic commerce UI.
