Svelte ecommerce, written the way Svelte 5 wants.
Runes for state, small components with real props, and a component vocabulary a person or a model can read without a tour.
The component layer
Runes, not stores-by-default
State is explicit with $state and $derived, so where a value comes from is visible at the point of use.
Composed upward
Primitives, then commerce components, then layout chrome, then page sections, then routes. Repeated markup becomes a component rather than a copy.
Tailwind and shadcn
Token-based utility classes and familiar primitives — bg-primary, text-foreground,
border-border — instead of bespoke class names.
Accessibility preserved
ARIA attributes, labels, semantic tags, keyboard behaviour and focus states are treated as load-bearing, not decoration.
Why it matters for editing
Small, typed, conventionally-named components are the difference between an edit that lands and one that cascades.
// state is explicit — no hunting for the source of truth
let loading = $state(false)
let total = $derived(items.reduce((n, i) => n + i.price * i.qty, 0))Start with your backend.
Clone it, point it at your API, and describe the store you want.