{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "template-goods", "title": "Kiln & Co: online store", "author": "Ballmac ", "description": "A five-page store with a bag that persists across pages: a collage home, a filterable shop, a product page with glaze and gallery pickers, a bag with a free-shipping meter and promo code, and a validated checkout. Products are drawn in CSS.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/sheet.json", "https://ui.ballmac.com/r/slider.json", "https://ui.ballmac.com/r/progress.json", "https://ui.ballmac.com/r/accordion.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/templates/goods/goods-fonts.ts", "content": "// Ballmac UI: Goods template fonts. https://ui.ballmac.com/templates/template-goods\nimport { Fraunces, Hanken_Grotesk } from \"next/font/google\"\n\nexport const goodsSerif = Fraunces({ variable: \"--goods-serif\", subsets: [\"latin\"], display: \"swap\", preload: false })\nexport const goodsSans = Hanken_Grotesk({ variable: \"--goods-sans\", subsets: [\"latin\"], display: \"swap\", preload: false })\n", "type": "registry:component", "target": "@components/ballmac/templates/goods/goods-fonts.ts" }, { "path": "registry/ballmac/components/templates/goods/goods-data.ts", "content": "import type { MediaSource } from \"@/components/ballmac/media\"\n// Ballmac UI: Goods template data. https://ui.ballmac.com/templates/template-goods\nexport type Shape = \"mug\" | \"bowl\" | \"vase\" | \"plate\" | \"pitcher\" | \"cup\"\nexport type Category = \"Mugs\" | \"Bowls\" | \"Vases\" | \"Plates\"\n\nexport const glazes = [\n { name: \"Terracotta\", cls: \"bg-chart-1\", border: \"border-chart-1\" },\n { name: \"Sage\", cls: \"bg-chart-2\", border: \"border-chart-2\" },\n { name: \"Mustard\", cls: \"bg-chart-3\", border: \"border-chart-3\" },\n { name: \"Slate\", cls: \"bg-chart-4\", border: \"border-chart-4\" },\n { name: \"Blush\", cls: \"bg-chart-5\", border: \"border-chart-5\" },\n] as const\n\nexport type Product = {\n id: string\n name: string\n category: Category\n shape: Shape\n price: number\n glazes: number[]\n tagline: string\n description: string\n size: string\n rating: number\n reviews: number\n tag?: \"New\" | \"Low stock\" | \"Bestseller\"\n inStock: boolean\n /** Your own photos instead of the drawn piece, keyed by glaze number (the index into `glazes`). A glaze without a photo keeps the drawing. Each photo is an image URL, an object with alt text and a dark-mode file, or your own element. */\n images?: Partial>\n}\n\nexport const products: Product[] = [\n { id: \"morning-mug\", name: \"Morning mug\", category: \"Mugs\", shape: \"mug\", price: 34, glazes: [0, 1, 2, 4], tagline: \"Thick walls, a thumb rest and room for a proper coffee.\", description: \"Thrown on the wheel and glazed twice, so the colour pools where your thumb rests. Holds 350 ml, which is exactly one slow coffee.\", size: \"9 cm × 8 cm · 350 ml\", rating: 4.9, reviews: 212, tag: \"Bestseller\", inStock: true },\n { id: \"tea-cup\", name: \"Tea cup\", category: \"Mugs\", shape: \"cup\", price: 26, glazes: [1, 3, 4], tagline: \"No handle, all warmth.\", description: \"A handleless cup that sits in two hands. The wide foot keeps it steady on a crowded table.\", size: \"8 cm × 7 cm · 200 ml\", rating: 4.7, reviews: 98, inStock: true },\n { id: \"noodle-bowl\", name: \"Noodle bowl\", category: \"Bowls\", shape: \"bowl\", price: 48, glazes: [0, 2, 3], tagline: \"Deep enough for broth, wide enough for company.\", description: \"A generous bowl with a slightly turned-in rim that keeps the steam where you want it. Dishwasher and microwave safe.\", size: \"19 cm × 9 cm · 900 ml\", rating: 4.8, reviews: 156, tag: \"Bestseller\", inStock: true },\n { id: \"breakfast-bowl\", name: \"Breakfast bowl\", category: \"Bowls\", shape: \"bowl\", price: 36, glazes: [1, 4, 2], tagline: \"Porridge, yoghurt, whatever the day needs.\", description: \"A shallow bowl with a soft speckle that shows through the glaze. Stacks neatly in sets of four.\", size: \"15 cm × 6 cm · 500 ml\", rating: 4.6, reviews: 74, inStock: true },\n { id: \"tall-vase\", name: \"Tall vase\", category: \"Vases\", shape: \"vase\", price: 78, glazes: [3, 0, 1], tagline: \"One stem looks intentional.\", description: \"A narrow-necked vase built to hold a single branch or three tulips. Watertight, with a ground foot that will not scratch wood.\", size: \"14 cm × 30 cm\", rating: 4.9, reviews: 63, tag: \"New\", inStock: true },\n { id: \"bud-vase\", name: \"Bud vase\", category: \"Vases\", shape: \"vase\", price: 42, glazes: [2, 4, 0], tagline: \"Small, round and difficult to dislike.\", description: \"A pocket-sized vase for a single flower from the garden or the corner shop. Makes a good present.\", size: \"9 cm × 12 cm\", rating: 4.8, reviews: 121, inStock: true },\n { id: \"dinner-plate\", name: \"Dinner plate\", category: \"Plates\", shape: \"plate\", price: 44, glazes: [0, 1, 3, 4], tagline: \"A wide rim, a quiet glaze.\", description: \"A flat plate with a raised rim, glazed in a satin finish that hides knife marks. Sold singly or in fours.\", size: \"27 cm diameter\", rating: 4.7, reviews: 187, inStock: true },\n { id: \"side-plate\", name: \"Side plate\", category: \"Plates\", shape: \"plate\", price: 28, glazes: [1, 2, 4], tagline: \"For toast, cheese and everything in between.\", description: \"The plate you will reach for ten times a day. Light enough to carry two in one hand.\", size: \"19 cm diameter\", rating: 4.8, reviews: 143, tag: \"Low stock\", inStock: true },\n { id: \"water-pitcher\", name: \"Water pitcher\", category: \"Vases\", shape: \"pitcher\", price: 68, glazes: [3, 1, 0], tagline: \"A pour that does not drip.\", description: \"A one-litre pitcher with a pinched spout and a handle you can hold with two fingers. Equally good with flowers.\", size: \"13 cm × 19 cm · 1 L\", rating: 4.9, reviews: 88, tag: \"New\", inStock: true },\n { id: \"serving-bowl\", name: \"Serving bowl\", category: \"Bowls\", shape: \"bowl\", price: 62, glazes: [2, 0, 1], tagline: \"Big enough for the table.\", description: \"A wide bowl for salad, pasta or fruit. The inside is glazed in a lighter tone that makes food look good.\", size: \"28 cm × 12 cm · 2.4 L\", rating: 4.8, reviews: 52, inStock: true },\n { id: \"espresso-cup\", name: \"Espresso cup\", category: \"Mugs\", shape: \"cup\", price: 22, glazes: [0, 3], tagline: \"Small, strong, a little bit smug.\", description: \"A thick-walled cup that keeps a shot warm. Pairs with the Morning mug for people who need both.\", size: \"6 cm × 6 cm · 90 ml\", rating: 4.5, reviews: 41, inStock: false },\n { id: \"salad-plate\", name: \"Salad plate\", category: \"Plates\", shape: \"plate\", price: 36, glazes: [4, 1, 2], tagline: \"Between a dinner and a side.\", description: \"A 23 cm plate that suits lunch for one. Glazed on both sides so it lasts through years of dishwashers.\", size: \"23 cm diameter\", rating: 4.6, reviews: 66, inStock: true },\n]\n\nexport const productById = (id: string) => products.find((p) => p.id === id) ?? products[0]!\n\nexport const reviewList = [\n { name: \"Hannah P.\", stars: 5, title: \"My favourite thing in the kitchen\", body: \"I have dropped it twice and it has survived both. The glaze is even prettier in person.\", date: \"Sep 12, 2026\" },\n { name: \"Marcus L.\", stars: 5, title: \"A proper size\", body: \"Most mugs are too small. This one holds a full coffee and feels good to hold.\", date: \"Aug 30, 2026\" },\n { name: \"Aiko T.\", stars: 4, title: \"Beautiful, a little heavy\", body: \"Heavier than I expected, in a good way. Shipped with no packing waste, which I loved.\", date: \"Aug 14, 2026\" },\n { name: \"Sofia R.\", stars: 5, title: \"Bought a second set\", body: \"Gave one to my sister and then bought another for myself. They look better the longer you use them.\", date: \"Jul 29, 2026\" },\n]\n\nexport const FREE_SHIPPING = 80\nexport const PROMO = { code: \"KILN10\", rate: 0.1 }\nexport const money = (n: number) => `$${n.toLocaleString(\"en-US\", { minimumFractionDigits: n % 1 ? 2 : 0, maximumFractionDigits: 2 })}`\n", "type": "registry:component", "target": "@components/ballmac/templates/goods/goods-data.ts" }, { "path": "registry/ballmac/components/templates/goods/goods-cart.ts", "content": "// Ballmac UI: Goods cart store. https://ui.ballmac.com/templates/template-goods\n\"use client\"\n\nimport * as React from \"react\"\n\nimport { productById } from \"@/components/ballmac/templates/goods/goods-data\"\n\nexport type CartLine = { id: string; glaze: number; qty: number }\n\nconst KEY = \"kiln-bag\"\nlet lines: CartLine[] = []\nlet loaded = false\nconst listeners = new Set<() => void>()\n\nfunction load() {\n if (loaded || typeof window === \"undefined\") return\n loaded = true\n try {\n const raw = window.sessionStorage.getItem(KEY)\n if (raw) lines = (JSON.parse(raw) as CartLine[]).filter((l) => l && typeof l.id === \"string\" && l.qty > 0)\n } catch {\n // Storage can be blocked; the bag still works for this page.\n }\n}\nfunction commit(next: CartLine[]) {\n lines = next\n try {\n window.sessionStorage.setItem(KEY, JSON.stringify(next))\n } catch {\n // ignore\n }\n listeners.forEach((l) => l())\n}\n\n/** The bag, shared by every page and kept for the browser session. */\nexport const cart = {\n add(id: string, glaze: number, qty = 1) {\n load()\n const found = lines.find((l) => l.id === id && l.glaze === glaze)\n commit(found ? lines.map((l) => (l === found ? { ...l, qty: Math.min(10, l.qty + qty) } : l)) : [...lines, { id, glaze, qty }])\n },\n setQty(id: string, glaze: number, qty: number) {\n load()\n commit(qty <= 0 ? lines.filter((l) => !(l.id === id && l.glaze === glaze)) : lines.map((l) => (l.id === id && l.glaze === glaze ? { ...l, qty: Math.min(10, qty) } : l)))\n },\n remove(id: string, glaze: number) {\n load()\n commit(lines.filter((l) => !(l.id === id && l.glaze === glaze)))\n },\n clear() {\n load()\n commit([])\n },\n}\n\nlet promoOn = false\nlet promoLoaded = false\nfunction loadPromo() {\n if (promoLoaded || typeof window === \"undefined\") return\n promoLoaded = true\n try {\n promoOn = window.sessionStorage.getItem(\"kiln-promo\") === \"1\"\n } catch {\n // ignore\n }\n}\n/** The KILN10 code, kept for the session so the bag and checkout agree. */\nexport const promo = {\n set(on: boolean) {\n loadPromo()\n promoOn = on\n try {\n window.sessionStorage.setItem(\"kiln-promo\", on ? \"1\" : \"0\")\n } catch {\n // ignore\n }\n listeners.forEach((l) => l())\n },\n}\nexport function usePromo() {\n return React.useSyncExternalStore(subscribe, () => { loadPromo(); return promoOn }, () => false)\n}\n\nconst empty: CartLine[] = []\nfunction subscribe(cb: () => void) {\n listeners.add(cb)\n return () => void listeners.delete(cb)\n}\n/** Lines in the bag, with totals. Empty on the server and first render so markup matches. */\nexport function useCart() {\n const current = React.useSyncExternalStore(subscribe, () => { load(); return lines }, () => empty)\n const detailed = current.map((l) => ({ ...l, product: productById(l.id) }))\n const count = detailed.reduce((n, l) => n + l.qty, 0)\n const subtotal = detailed.reduce((n, l) => n + l.qty * l.product.price, 0)\n return { lines: detailed, count, subtotal }\n}\n", "type": "registry:component", "target": "@components/ballmac/templates/goods/goods-cart.ts" }, { "path": "registry/ballmac/components/templates/goods/goods-theme.tsx", "content": "// Ballmac UI: Goods template shell. https://ui.ballmac.com/templates/template-goods\n\"use client\"\n\nimport * as React from \"react\"\nimport { Menu, Minus, Plus, ShoppingBag, Star, X } from \"lucide-react\"\n\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from \"@/components/ballmac/sheet\"\nimport { cart, useCart } from \"@/components/ballmac/templates/goods/goods-cart\"\nimport { FREE_SHIPPING, glazes, money, type Shape } from \"@/components/ballmac/templates/goods/goods-data\"\nimport { goodsSans, goodsSerif } from \"@/components/ballmac/templates/goods/goods-fonts\"\nimport { cn } from \"@/lib/utils\"\nimport { Media, type MediaSource } from \"@/components/ballmac/media\"\n\ntype GoodsPage = \"home\" | \"shop\" | \"product\" | \"cart\" | \"checkout\"\ntype GoodsHrefs = Record\n\nconst defaultHrefs: GoodsHrefs = { home: \"/goods\", shop: \"/goods/shop\", product: \"/goods/shop/morning-mug\", cart: \"/goods/cart\", checkout: \"/goods/checkout\" }\n\n/** Kiln & Co's palette: oat paper, warm brown ink and five glazes. Dark mode is a studio at night with the kiln still glowing. */\nconst goodsCss = `\n.goods-theme,body:not(:has([data-gallery])):has(.goods-theme){--background:oklch(0.968 0.02 85);--foreground:oklch(0.26 0.04 50);--card:oklch(0.985 0.012 85);--card-foreground:oklch(0.26 0.04 50);--popover:oklch(0.985 0.012 85);--popover-foreground:oklch(0.26 0.04 50);--primary:oklch(0.32 0.05 45);--primary-foreground:oklch(0.968 0.02 85);--secondary:oklch(0.93 0.03 80);--secondary-foreground:oklch(0.26 0.04 50);--muted:oklch(0.935 0.028 80);--muted-foreground:oklch(0.46 0.04 55);--accent:oklch(0.92 0.04 75);--accent-foreground:oklch(0.26 0.04 50);--border:oklch(0.26 0.04 50 / 14%);--input:oklch(0.26 0.04 50 / 22%);--ring:oklch(0.55 0.14 45);--surface:oklch(0.95 0.025 82);--destructive:oklch(0.52 0.21 27);--chart-1:oklch(0.62 0.14 42);--chart-2:oklch(0.68 0.07 150);--chart-3:oklch(0.8 0.13 88);--chart-4:oklch(0.55 0.06 240);--chart-5:oklch(0.82 0.07 25);--goods-wall:oklch(0.9 0.035 78);--goods-wall-2:oklch(0.82 0.045 70);--goods-on-clay:oklch(0.2 0.04 50);--radius:1rem}\n.dark .goods-theme,.dark body:not(:has([data-gallery])):has(.goods-theme){--background:oklch(0.19 0.02 50);--foreground:oklch(0.95 0.02 80);--card:oklch(0.23 0.022 50);--card-foreground:oklch(0.95 0.02 80);--popover:oklch(0.25 0.024 50);--popover-foreground:oklch(0.95 0.02 80);--primary:oklch(0.88 0.06 75);--primary-foreground:oklch(0.22 0.03 50);--secondary:oklch(0.28 0.025 50);--secondary-foreground:oklch(0.95 0.02 80);--muted:oklch(0.27 0.025 50);--muted-foreground:oklch(0.74 0.04 70);--accent:oklch(0.31 0.03 50);--accent-foreground:oklch(0.95 0.02 80);--border:oklch(1 0 0 / 11%);--input:oklch(1 0 0 / 16%);--ring:oklch(0.75 0.13 50);--surface:oklch(0.21 0.022 50);--destructive:oklch(0.7 0.19 27);--chart-1:oklch(0.7 0.14 45);--chart-2:oklch(0.74 0.08 150);--chart-3:oklch(0.84 0.12 88);--chart-4:oklch(0.68 0.08 240);--chart-5:oklch(0.8 0.08 25);--goods-wall:oklch(0.3 0.03 55);--goods-wall-2:oklch(0.26 0.03 50)}\nbody:not(:has([data-gallery])):has(.goods-theme){font-family:var(--goods-sans),ui-sans-serif,system-ui,sans-serif}\n`\n\nconst serif = \"[font-family:var(--goods-serif),ui-serif,Georgia,serif] font-medium tracking-[-0.02em]\"\nconst onClay = \"text-[var(--goods-on-clay)]\"\n\n/**\n * A piece of ceramics drawn in CSS: a mug, bowl, vase, plate, pitcher or cup in one of five glazes, on a wall.\n * `view` changes the composition (front, close, pair, dark wall) so a gallery has something to switch between.\n */\nfunction Piece({ shape, glaze = 0, view = 0, className, image, imageAlt }: { shape: Shape; glaze?: number; view?: number; className?: string; image?: MediaSource; imageAlt?: string }) {\n if (image) return \n const gl = glazes[glaze % glazes.length]!\n const g = gl.cls\n const shine = \"bg-gradient-to-br from-white/35 via-transparent to-black/25\"\n const wall = view === 3 ? \"bg-[var(--goods-wall-2)]\" : \"bg-[var(--goods-wall)]\"\n const body = (cls: string, extra?: React.ReactNode) => (\n
\n
\n {extra}\n
\n )\n const art: Record = {\n mug: (<>\n
\n {body(\"top-[34%] start-[28%] h-[34%] w-[38%] rounded-t-md rounded-b-[26%]\",
)}\n ),\n cup: (<>\n {body(\"top-[40%] start-[30%] h-[28%] w-[40%] rounded-t-sm rounded-b-[45%]\",
)}\n ),\n bowl: (<>\n {body(\"top-[42%] start-[16%] h-[28%] w-[68%] rounded-t-md rounded-b-full\",
)}\n ),\n vase: (<>\n {body(\"top-[16%] start-[43%] h-[16%] w-[14%] rounded-t-md\",
)}\n {body(\"top-[28%] start-[27%] h-[44%] w-[46%] rounded-[50%_50%_30%_30%/45%_45%_22%_22%]\")}\n ),\n plate: (<>\n {body(\"top-[52%] start-[10%] h-[10%] w-[80%] rounded-[50%]\")}\n
\n ),\n pitcher: (<>\n
\n {body(\"top-[28%] start-[26%] h-[44%] w-[40%] rounded-[30%_30%_26%_26%/20%_20%_22%_22%]\",
)}\n {body(\"top-[28%] start-[18%] h-[8%] w-[14%] -rotate-[28deg] rounded-md\")}\n ),\n }\n const ground = shape === \"plate\" ? \"top-[60%]\" : shape === \"vase\" ? \"top-[70%]\" : shape === \"bowl\" ? \"top-[68%]\" : \"top-[66%]\"\n return (\n
\n
\n
\n
{art[shape]}
\n {view === 2 && (\n
{art[shape === \"mug\" ? \"cup\" : shape === \"bowl\" ? \"plate\" : \"mug\"]}
\n )}\n
\n )\n}\n\nfunction Stars({ value, className }: { value: number; className?: string }) {\n return (\n \n {[1, 2, 3, 4, 5].map((i) => )}\n \n )\n}\n\nconst links: { key: GoodsPage; label: string }[] = [{ key: \"shop\", label: \"Shop\" }, { key: \"home\", label: \"Our story\" }]\n\ntype GoodsShellProps = React.ComponentProps<\"div\"> & {\n /** The page being shown, so its nav link is marked current. */\n page: GoodsPage\n /** Override where pages live (used by previews). */\n hrefs?: Partial\n}\n\n/** Kiln & Co's frame: an announcement bar, a header with the bag and a drawer that shows what you have picked. */\nfunction GoodsShell({ page, hrefs: overrides, className, style, children, ...props }: GoodsShellProps) {\n const hrefs = { ...defaultHrefs, ...overrides }\n const [menu, setMenu] = React.useState(false)\n const [bag, setBag] = React.useState(false)\n const { lines, count, subtotal } = useCart()\n React.useEffect(() => {\n const classes = [goodsSerif.variable, goodsSans.variable].filter(Boolean)\n document.body.classList.add(...classes)\n return () => document.body.classList.remove(...classes)\n }, [])\n const left = Math.max(0, FREE_SHIPPING - subtotal)\n return (\n \n \n

Free shipping on orders over {money(FREE_SHIPPING)} · Made in small batches, shipped in two days

\n
\n
\n \n \n Kiln & Co\n
\n \n
\n
\n {menu && }\n
\n\n \n \n Your bag{count === 0 ? \"Nothing in here yet.\" : `${count} ${count === 1 ? \"piece\" : \"pieces\"} picked out.`}\n
\n {lines.length === 0 ? (\n

Your bag is empty.

Browse the shop
\n ) : (\n
    \n {lines.map((l) => (\n
  • \n \n
    \n

    {l.product.name}

    \n

    {glazes[l.glaze]!.name} · {money(l.product.price)}

    \n
    \n
    \n \n {l.qty}\n \n
    \n \n
    \n
    \n
    • \n ))}\n
\n )}\n
\n {lines.length > 0 && (\n
\n

{left > 0 ? `${money(left)} away from free shipping.` : \"You have free shipping.\"}

\n

Subtotal{money(subtotal)}

\n Checkout\n View full bag\n
\n )}\n \n \n\n {children}\n\n
\n
\n

Kiln & Co

Everyday ceramics, thrown by hand in a shed in Bristol and fired in batches of forty.

\n {[[\"Shop\", [[\"Mugs\", hrefs.shop], [\"Bowls\", hrefs.shop], [\"Vases\", hrefs.shop], [\"Plates\", hrefs.shop]]], [\"Help\", [[\"Shipping\", hrefs.cart], [\"Returns\", hrefs.cart], [\"Care guide\", hrefs.product], [\"Contact\", hrefs.home]]], [\"Studio\", [[\"Our story\", hrefs.home], [\"Visit\", hrefs.home], [\"Wholesale\", hrefs.home]]]].map(([t, items]) => (\n

{t as string}

    {(items as string[][]).map(([l, h]) =>
  • {l}
    • )}
\n ))}\n
\n

© 2026 Kiln & Co. Every imperfection is deliberate.

\n
\n
\n )\n}\n\nexport { GoodsShell, Piece, Stars, defaultHrefs as goodsDefaultHrefs, onClay as goodsOnClay, serif as goodsSerifClass, type GoodsHrefs, type GoodsPage, type GoodsShellProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/goods/goods-theme.tsx" }, { "path": "registry/ballmac/components/templates/goods/goods-home.tsx", "content": "// Ballmac UI: Goods home page. https://ui.ballmac.com/templates/template-goods\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRight, Check, Flame, Recycle, RotateCcw, Truck } from \"lucide-react\"\n\nimport { cart } from \"@/components/ballmac/templates/goods/goods-cart\"\nimport { glazes, money, products, reviewList, type Product } from \"@/components/ballmac/templates/goods/goods-data\"\nimport { GoodsShell, Piece, Stars, goodsOnClay, goodsSerifClass, type GoodsHrefs } from \"@/components/ballmac/templates/goods/goods-theme\"\nimport { cn } from \"@/lib/utils\"\n\n/** Link to one product: preview pages pass the id as ?p=, installed routes use /goods/shop/. */\nfunction productLink(base: string, id: string) {\n return base.includes(\"/preview/\") ? `${base}?p=${id}` : base.replace(/[^/]+$/, id)\n}\n\n/** A product tile with the glaze dots and a quick add that confirms in place. */\nfunction ProductCard({ product, href }: { product: Product; href: string }) {\n const [added, setAdded] = React.useState(false)\n React.useEffect(() => {\n if (!added) return\n const id = window.setTimeout(() => setAdded(false), 1800)\n return () => window.clearTimeout(id)\n }, [added])\n return (\n
  • \n \n
    \n \n {product.tag && {product.tag}}\n
    \n {product.name}{money(product.price)}\n {product.tagline}\n     \n
    \n glazes[g]!.name).join(\", \")}`} role=\"img\">{product.glazes.map((g) => )}\n \n
    \n
    • \n )\n}\n\nconst values = [[Flame, \"Hand-thrown\", \"Every piece is made on the wheel.\"], [Recycle, \"Plastic-free\", \"Packed in paper and shredded card.\"], [Truck, \"Two-day dispatch\", \"From our shed to your door.\"], [RotateCcw, \"30-day returns\", \"No questions, free labels.\"]] as const\nconst cats = [[\"Mugs\", \"mug\", 1], [\"Bowls\", \"bowl\", 2], [\"Vases\", \"vase\", 3], [\"Plates\", \"plate\", 4]] as const\n\ntype GoodsHomeProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Goods home page: a hero collage, values, categories, bestsellers, the story, reviews and a newsletter. */\nfunction GoodsHome({ hrefs, ...props }: GoodsHomeProps) {\n const link = { shop: \"/goods/shop\", product: \"/goods/shop/morning-mug\", ...hrefs }\n const [email, setEmail] = React.useState(\"\")\n const [error, setError] = React.useState(\"\")\n const [done, setDone] = React.useState(false)\n function join(e: React.FormEvent) {\n e.preventDefault()\n if (!/^\\S+@\\S+\\.\\S+$/.test(email.trim())) return setError(\"Enter an email like you@example.com.\")\n setError(\"\")\n setDone(true)\n }\n return (\n \n
    \n
    \n
    \n

    4.8 from 1,240 reviews

    \n

    Made slowly.
    Used daily.

    \n

    Everyday ceramics thrown by hand in a shed in Bristol, fired in batches of forty and sent to your table.

    \n \n
    \n
    \n \n
    \n
    \n
    \n\n
    \n
      {values.map(([Icon, t, b]) =>
    • {t}{b}
      • )}
    \n
    \n\n
    \n

    Shop by piece

    \n
      {cats.map(([name, shape, g]) =>
    • {name}
      • )}
    \n
    \n\n
    \n

    People keep buying these

    Shop everything
    \n
      {[products[0]!, products[2]!, products[4]!, products[6]!].map((p) => )}
    \n
    \n\n
    \n
    \n
    \n
    \n

    A small studio with a very big kiln.

    \n

    Three potters, one shed and a kiln named Gerald. We make forty pieces at a time, so nothing sits in a warehouse and nothing is wasted.

    \n
    {[[\"412\", \"firings last year\"], [\"40\", \"pieces per batch\"], [\"0\", \"plastic in the box\"]].map(([n, l]) =>
    {n}
    {l}
    )}
    \n
    \n
    \n
    \n\n
    \n

    Kind words

    \n
      {reviewList.slice(0, 3).map((r) =>

    • “{r.title}”

      {r.body}

      {r.name}

      • )}
    \n
    \n\n
    \n
    \n

    Get 10% off your first piece

    \n

    Join the kiln list for new glazes, studio sales and the odd photo of Gerald.

    \n {done ?

    Welcome. Your code is KILN10.

    : (\n
    \n \n setEmail(e.target.value)} aria-invalid={!!error} aria-describedby={error ? \"gh-err\" : undefined} placeholder=\"you@example.com\" className=\"bg-background focus-visible:ring-ring/50 aria-invalid:border-destructive h-12 min-w-0 flex-1 rounded-full border px-5 outline-none focus-visible:ring-[3px]\" />\n \n
    \n )}\n {error &&

    {error}

    }\n
    \n
    \n
    \n     \n )\n}\n\nexport { GoodsHome, ProductCard, productLink, type GoodsHomeProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/goods/goods-home.tsx" }, { "path": "registry/ballmac/components/templates/goods/goods-shop.tsx", "content": "// Ballmac UI: Goods shop page. https://ui.ballmac.com/templates/template-goods\n\"use client\"\n\nimport * as React from \"react\"\nimport { SlidersHorizontal, X } from \"lucide-react\"\n\nimport { Slider } from \"@/components/ballmac/slider\"\nimport { ProductCard, productLink } from \"@/components/ballmac/templates/goods/goods-home\"\nimport { glazes, money, products, type Category } from \"@/components/ballmac/templates/goods/goods-data\"\nimport { GoodsShell, goodsSerifClass, type GoodsHrefs } from \"@/components/ballmac/templates/goods/goods-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst categories: Category[] = [\"Mugs\", \"Bowls\", \"Vases\", \"Plates\"]\nconst sorts = [[\"featured\", \"Featured\"], [\"low\", \"Price: low to high\"], [\"high\", \"Price: high to low\"], [\"rating\", \"Best rated\"]] as const\n\ntype GoodsShopProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The shop: category, price, glaze and stock filters with removable chips, sorting and an honest empty state. */\nfunction GoodsShop({ hrefs, ...props }: GoodsShopProps) {\n const link = { product: \"/goods/shop/morning-mug\", ...hrefs }\n const [cats, setCats] = React.useState([])\n const [maxPrice, setMaxPrice] = React.useState(80)\n const [picked, setPicked] = React.useState([])\n const [stock, setStock] = React.useState(false)\n const [sort, setSort] = React.useState<(typeof sorts)[number][0]>(\"featured\")\n const toggle = (set: React.Dispatch>, v: T) => set((a) => (a.includes(v) ? a.filter((x) => x !== v) : [...a, v]))\n const list = products\n .filter((p) => (cats.length === 0 || cats.includes(p.category)) && p.price <= maxPrice && (picked.length === 0 || p.glazes.some((g) => picked.includes(g))) && (!stock || p.inStock))\n .sort((a, b) => (sort === \"low\" ? a.price - b.price : sort === \"high\" ? b.price - a.price : sort === \"rating\" ? b.rating - a.rating : 0))\n const active = cats.length + picked.length + (stock ? 1 : 0) + (maxPrice < 80 ? 1 : 0)\n const clear = () => { setCats([]); setPicked([]); setStock(false); setMaxPrice(80) }\n const chip = \"bg-secondary hover:bg-accent focus-visible:ring-ring/50 inline-flex h-8 items-center gap-1.5 rounded-full ps-3 pe-2 text-sm font-medium outline-none focus-visible:ring-[3px]\"\n\n const filters = (p: string) => (\n
    \n
    Piece
    {categories.map((c) => )}
    \n

    Priceup to {money(maxPrice)}

    setMaxPrice(v[0]!)} />
    \n
    Glaze
    {glazes.map((g, i) =>
    \n \n
    \n )\n\n return (\n \n
    \n

    The shop

    \n

    Twelve pieces, five glazes and nothing you do not need.

    \n\n
    \n \n
    \n
    \n
    Filters{active > 0 ? ` (${active})` : \"\"}
    {filters(\"gs-m\")}
    \n

    {list.length} {list.length === 1 ? \"piece\" : \"pieces\"}

    \n
    \n
    \n {active > 0 && (\n
    \n {cats.map((c) => )}\n {picked.map((g) => )}\n {maxPrice < 80 && }\n {stock && }\n \n
    \n )}\n {list.length > 0 ? (\n
      {list.map((p) => )}
    \n ) : (\n

    Nothing fits that exactly.

    Try a higher price or fewer glazes.

    \n )}\n
    \n
    \n
    \n     \n )\n}\n\nexport { GoodsShop, type GoodsShopProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/goods/goods-shop.tsx" }, { "path": "registry/ballmac/components/templates/goods/goods-product.tsx", "content": "// Ballmac UI: Goods product page. https://ui.ballmac.com/templates/template-goods\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Minus, Plus, Truck } from \"lucide-react\"\n\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ballmac/accordion\"\nimport { cart } from \"@/components/ballmac/templates/goods/goods-cart\"\nimport { glazes, money, productById, products, reviewList } from \"@/components/ballmac/templates/goods/goods-data\"\nimport { ProductCard, productLink } from \"@/components/ballmac/templates/goods/goods-home\"\nimport { GoodsShell, Piece, Stars, goodsSerifClass, type GoodsHrefs } from \"@/components/ballmac/templates/goods/goods-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst viewNames = [\"Front\", \"Close up\", \"In a pair\", \"On a dark wall\"]\nconst bars = [[5, 78], [4, 15], [3, 5], [2, 1], [1, 1]]\n\ntype GoodsProductProps = React.ComponentProps<\"div\"> & {\n hrefs?: Partial\n /** Product id. When left out the page reads ?p= from the address, then falls back to the first product. */\n slug?: string\n}\n\n/** A product page: gallery with four views, glaze and quantity pickers, an add-to-bag that confirms, details, reviews and pairings. */\nfunction GoodsProduct({ hrefs, slug, ...props }: GoodsProductProps) {\n const link = { shop: \"/goods/shop\", product: \"/goods/shop/morning-mug\", cart: \"/goods/cart\", ...hrefs }\n const [id, setId] = React.useState(slug ?? products[0]!.id)\n React.useEffect(() => {\n if (slug) return setId(slug)\n const p = new URLSearchParams(window.location.search).get(\"p\")\n if (p) setId(p)\n }, [slug])\n const product = productById(id)\n const [glaze, setGlaze] = React.useState(product.glazes[0]!)\n const [view, setView] = React.useState(0)\n const [qty, setQty] = React.useState(1)\n const [added, setAdded] = React.useState(false)\n React.useEffect(() => { setGlaze(product.glazes[0]!); setView(0); setQty(1); setAdded(false) }, [product])\n const pairs = products.filter((p) => p.category !== product.category && p.id !== product.id).slice(0, 4)\n const picker = \"hover:bg-accent focus-visible:ring-ring/50 inline-flex size-11 items-center justify-center rounded-full outline-none focus-visible:ring-[3px]\"\n\n return (\n \n
    \n \n\n
    \n
    \n
    \n {viewNames.map((v, i) => (\n \n ))}\n
    \n

    Showing the {viewNames[view]!.toLowerCase()} view in {glazes[glaze]!.name}

    \n
    \n\n
    \n

    {product.name}

    \n

    {product.rating} · {product.reviews} reviews

    \n

    {money(product.price)}

    \n

    {product.description}

    \n\n
    Glaze: {glazes[glaze]!.name}\n
    {product.glazes.map((g) => )}
    \n
    \n\n
    \n
    \n \n {qty}\n \n
    \n \n
    \n

    {added ? Added to your bag. View bag : null}

    \n

    Ships in two working days. Free over $80, free returns for 30 days.

    \n\n \n Size and capacity{product.size}. Sizes vary by up to 5 mm because each piece is made by hand.\n CareDishwasher, microwave and oven safe to 220°C. Avoid sudden changes from freezer to hob. Hand wash if you want the glaze to last a lifetime.\n Shipping and returnsUK delivery takes two to three days and costs $6. Return anything within 30 days with the prepaid label in the box.\n \n
    \n
    \n\n
    \n
    \n

    Reviews

    \n

    {product.rating}

    \n

    {product.reviews} reviews

    \n
      {bars.map(([s, pct]) =>
    • {s} star{pct}%
      • )}
    \n
    \n
      {reviewList.map((r) =>
    • {r.date}

      {r.title}

      {r.body}

      {r.name} · Verified buyer

      • )}
    \n
    \n\n
    \n

    Pairs well with

    \n
      {pairs.map((p) => )}
    \n
    \n
    \n     \n )\n}\n\nexport { GoodsProduct, type GoodsProductProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/goods/goods-product.tsx" }, { "path": "registry/ballmac/components/templates/goods/goods-cart-page.tsx", "content": "// Ballmac UI: Goods bag page. https://ui.ballmac.com/templates/template-goods\n\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus, ShoppingBag, Truck } from \"lucide-react\"\n\nimport { Progress } from \"@/components/ballmac/progress\"\nimport { cart, promo, useCart, usePromo } from \"@/components/ballmac/templates/goods/goods-cart\"\nimport { FREE_SHIPPING, PROMO, glazes, money } from \"@/components/ballmac/templates/goods/goods-data\"\nimport { GoodsShell, Piece, goodsSerifClass, type GoodsHrefs } from \"@/components/ballmac/templates/goods/goods-theme\"\nimport { cn } from \"@/lib/utils\"\n\n/** Puts two pieces in an empty bag once, so previews and screenshots show a full page. Not used by the installed route. */\nfunction useDemoBag(on: boolean) {\n React.useEffect(() => {\n if (!on) return\n let empty = false\n try {\n empty = window.sessionStorage.getItem(\"kiln-bag\") === null\n } catch {\n // Storage is blocked; the demo bag still fills for this page.\n empty = true\n }\n if (empty) {\n cart.add(\"morning-mug\", 0, 2)\n cart.add(\"noodle-bowl\", 2, 1)\n }\n }, [on])\n}\n\ntype GoodsCartPageProps = React.ComponentProps<\"div\"> & { hrefs?: Partial; demo?: boolean }\n\n/** The bag page: quantities, a free-shipping meter, a promo code and a summary that updates as you change things. */\nfunction GoodsCartPage({ hrefs, demo = false, ...props }: GoodsCartPageProps) {\n const link = { shop: \"/goods/shop\", checkout: \"/goods/checkout\", product: \"/goods/shop/morning-mug\", ...hrefs }\n useDemoBag(demo)\n const { lines, count, subtotal } = useCart()\n const promoOn = usePromo()\n const [code, setCode] = React.useState(\"\")\n const [bad, setBad] = React.useState(false)\n const discount = promoOn ? subtotal * PROMO.rate : 0\n const after = subtotal - discount\n const shipping = after === 0 || after >= FREE_SHIPPING ? 0 : 6\n const total = after + shipping\n const left = Math.max(0, FREE_SHIPPING - after)\n function apply(e: React.FormEvent) {\n e.preventDefault()\n const ok = code.trim().toUpperCase() === PROMO.code\n setBad(!ok)\n if (ok) promo.set(true)\n }\n const step = \"hover:bg-accent focus-visible:ring-ring/50 inline-flex size-10 items-center justify-center rounded-full outline-none focus-visible:ring-[3px]\"\n return (\n \n
    \n

    Your bag

    \n {lines.length === 0 ? (\n

    Nothing in your bag yet.

    Pieces you add will wait here for you.

    Browse the shop
    \n ) : (\n
    \n
    \n
    \n

    {left > 0 ? `${money(left)} away from free shipping` : \"You have free shipping\"}

    \n \n
    \n
      \n {lines.map((l) => (\n
    • \n \n
      \n

      {l.product.name}

      \n

      {glazes[l.glaze]!.name} · {l.product.size}

      \n
      \n
      \n \n {l.qty}\n \n
      \n \n
      \n
      \n

      {money(l.product.price * l.qty)}

      \n
      • \n ))}\n
    \n
    \n \n
    \n )}\n
    \n     \n )\n}\n\nexport { GoodsCartPage, useDemoBag, type GoodsCartPageProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/goods/goods-cart-page.tsx" }, { "path": "registry/ballmac/components/templates/goods/goods-checkout.tsx", "content": "// Ballmac UI: Goods checkout page. https://ui.ballmac.com/templates/template-goods\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Lock } from \"lucide-react\"\n\nimport { cart, useCart, usePromo } from \"@/components/ballmac/templates/goods/goods-cart\"\nimport { useDemoBag } from \"@/components/ballmac/templates/goods/goods-cart-page\"\nimport { FREE_SHIPPING, PROMO, glazes, money } from \"@/components/ballmac/templates/goods/goods-data\"\nimport { GoodsShell, Piece, goodsSerifClass, type GoodsHrefs } from \"@/components/ballmac/templates/goods/goods-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst methods = [[\"standard\", \"Standard\", \"2 to 3 working days\", 6], [\"express\", \"Express\", \"Next working day\", 12]] as const\nconst field = \"bg-background focus-visible:ring-ring/50 aria-invalid:border-destructive h-12 w-full rounded-xl border px-4 outline-none focus-visible:ring-[3px]\"\ntype Values = { email: string; name: string; address: string; city: string; postcode: string; card: string; expiry: string; cvc: string }\nconst empty: Values = { email: \"\", name: \"\", address: \"\", city: \"\", postcode: \"\", card: \"\", expiry: \"\", cvc: \"\" }\n\ntype GoodsCheckoutProps = React.ComponentProps<\"div\"> & { hrefs?: Partial; demo?: boolean }\n\n/** Checkout: contact, delivery, a demo card form that formats as you type, a live summary and a thank-you page. */\nfunction GoodsCheckout({ hrefs, demo = false, ...props }: GoodsCheckoutProps) {\n const link = { shop: \"/goods/shop\", cart: \"/goods/cart\", ...hrefs }\n useDemoBag(demo)\n const { lines, subtotal } = useCart()\n const promoOn = usePromo()\n const [v, setV] = React.useState(empty)\n const [method, setMethod] = React.useState<(typeof methods)[number][0]>(\"standard\")\n const [errors, setErrors] = React.useState>>({})\n const [order, setOrder] = React.useState<{ number: string; total: number; email: string } | null>(null)\n const form = React.useRef(null)\n\n const after = subtotal * (promoOn ? 1 - PROMO.rate : 1)\n const base = methods.find((m) => m[0] === method)!\n const shipping = lines.length === 0 ? 0 : method === \"standard\" && after >= FREE_SHIPPING ? 0 : base[3]\n const total = after + shipping\n\n const set = (k: keyof Values, format?: (s: string) => string) => ({\n id: `gk-${k}`, name: k, value: v[k], \"aria-invalid\": !!errors[k], \"aria-describedby\": errors[k] ? `gk-err-${k}` : undefined,\n onChange: (e: React.ChangeEvent) => setV((s) => ({ ...s, [k]: format ? format(e.target.value) : e.target.value })),\n })\n const err = (k: keyof Values) => (errors[k] ?

    {errors[k]}

    : null)\n\n function submit(e: React.FormEvent) {\n e.preventDefault()\n const next: Partial> = {}\n if (!/^\\S+@\\S+\\.\\S+$/.test(v.email.trim())) next.email = \"Enter an email like you@example.com.\"\n if (!v.name.trim()) next.name = \"We need a name for the parcel.\"\n if (!v.address.trim()) next.address = \"Enter a street address.\"\n if (!v.city.trim()) next.city = \"Enter a town or city.\"\n if (v.postcode.trim().length < 5) next.postcode = \"Enter a full postcode.\"\n if (v.card.replace(/\\s/g, \"\").length < 16) next.card = \"Enter all 16 digits.\"\n if (!/^\\d{2}\\/\\d{2}$/.test(v.expiry)) next.expiry = \"Use MM/YY.\"\n if (v.cvc.length < 3) next.cvc = \"3 digits.\"\n setErrors(next)\n const first = Object.keys(next)[0]\n if (first) return void form.current?.querySelector(`[name=\"${first}\"]`)?.focus()\n setOrder({ number: \"KC-48213\", total, email: v.email.trim() })\n cart.clear()\n }\n\n return (\n \n
    \n {order ? (\n
    \n \n

    Thank you.

    \n

    Order {order.number} is confirmed. A receipt for {money(order.total)} is on its way to {order.email}, and your pieces will leave the studio in two working days.

    \n Back to the shop\n
    \n ) : lines.length === 0 ? (\n

    Your bag is empty.

    Add a piece before you check out.

    Browse the shop
    \n ) : (\n <>\n

    Checkout

    \n
    \n
    \n

    Contact

    \n
    {err(\"email\")}
    \n

    Delivery address

    \n
    {err(\"name\")}
    \n
    {err(\"address\")}
    \n
    {err(\"city\")}
    s.toUpperCase())} />{err(\"postcode\")}
    \n
    Delivery method\n {methods.map(([id, label, note, price]) => )}
    \n

    Payment

    \n
    s.replace(/\\D/g, \"\").slice(0, 16).replace(/(.{4})/g, \"$1 \").trim())} />{err(\"card\")}
    \n
    { const d = s.replace(/\\D/g, \"\").slice(0, 4); return d.length > 2 ? `${d.slice(0, 2)}/${d.slice(2)}` : d })} />{err(\"expiry\")}
    s.replace(/\\D/g, \"\").slice(0, 4))} />{err(\"cvc\")}
    \n

    Demo checkout: no payment is taken.

    \n
    \n \n
    \n \n )}\n
    \n     \n )\n}\n\nexport { GoodsCheckout, type GoodsCheckoutProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/goods/goods-checkout.tsx" }, { "path": "registry/ballmac/app/goods/page.tsx", "content": "// Ballmac UI: Goods template route. https://ui.ballmac.com/templates/template-goods\nimport type { Metadata } from \"next\"\n\nimport { GoodsHome } from \"@/components/ballmac/templates/goods/goods-home\"\n\nexport const metadata: Metadata = {\n title: \"Kiln & Co: handmade ceramics\",\n description: \"Everyday ceramics thrown by hand in Bristol and fired in small batches.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/goods/page.tsx" }, { "path": "registry/ballmac/app/goods/shop/page.tsx", "content": "// Ballmac UI: Goods template route. https://ui.ballmac.com/templates/template-goods\nimport type { Metadata } from \"next\"\n\nimport { GoodsShop } from \"@/components/ballmac/templates/goods/goods-shop\"\n\nexport const metadata: Metadata = {\n title: \"Shop · Kiln & Co\",\n description: \"Mugs, bowls, vases and plates in five glazes.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/goods/shop/page.tsx" }, { "path": "registry/ballmac/app/goods/shop/[id]/page.tsx", "content": "// Ballmac UI: Goods template route. https://ui.ballmac.com/templates/template-goods\nimport type { Metadata } from \"next\"\n\nimport { GoodsProduct } from \"@/components/ballmac/templates/goods/goods-product\"\n\nexport const metadata: Metadata = {\n title: \"Kiln & Co: product\",\n description: \"A handmade ceramic piece from Kiln & Co.\",\n}\n\nexport default async function Page({ params }: { params: Promise<{ id: string }> }) {\n const { id } = await params\n return \n}\n", "type": "registry:page", "target": "app/goods/shop/[id]/page.tsx" }, { "path": "registry/ballmac/app/goods/cart/page.tsx", "content": "// Ballmac UI: Goods template route. https://ui.ballmac.com/templates/template-goods\nimport type { Metadata } from \"next\"\n\nimport { GoodsCartPage } from \"@/components/ballmac/templates/goods/goods-cart-page\"\n\nexport const metadata: Metadata = {\n title: \"Your bag · Kiln & Co\",\n description: \"Review your pieces and apply a code.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/goods/cart/page.tsx" }, { "path": "registry/ballmac/app/goods/checkout/page.tsx", "content": "// Ballmac UI: Goods template route. https://ui.ballmac.com/templates/template-goods\nimport type { Metadata } from \"next\"\n\nimport { GoodsCheckout } from \"@/components/ballmac/templates/goods/goods-checkout\"\n\nexport const metadata: Metadata = {\n title: \"Checkout · Kiln & Co\",\n description: \"Delivery and payment.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/goods/checkout/page.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "template", "ecommerce", "store", "shop", "product", "cart", "checkout", "ceramics" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Installs a five-page store with a shared bag drawer, filters, a product page, a bag page with free-shipping progress and a validated checkout. Edit goods-data.ts and goodsCss; replace Piece with photos.", "whenToUse": [ "Small online shops and product drops", "Any store that needs filters, a product page, a bag and checkout" ], "whenNotToUse": [ "Large catalogues that need server-side search and pagination" ], "composesWith": [ "sheet", "slider", "accordion", "progress" ], "a11y": [ { "keys": "Glaze swatches", "action": "A radio group; arrow keys change the glaze and the picture follows" }, { "keys": "Bag drawer", "action": "Opens from the header; Escape closes it and focus returns to the button" }, { "keys": "Filter chips", "action": "Each active filter is a button that removes itself" } ], "customization": [ "Replace products and reviews in goods-data.ts", "Swap the cart store for your cart or commerce API", "Replace Piece with product photography", "Edit goodsCss for the palette" ] }, "examples": [ "template-goods-demo", "template-goods-shop", "template-goods-product", "template-goods-cart", "template-goods-checkout" ], "url": "https://ui.ballmac.com/components/template-goods" }, "docs": "Pages are at /goods, /goods/shop, /goods/shop/[id], /goods/cart and /goods/checkout. Products, glazes and reviews live in goods-data.ts. The bag is kept in sessionStorage (goods-cart.ts); swap it for your cart API. The promo code in the demo is KILN10. Replace Piece with product photos.", "categories": [ "templates" ], "type": "registry:block" }