Web only — React, from @krizaka/ui/shop. Beta: its API may still change in a minor version.

• Mobile · n/a. A shop's public page is a web page; the studio that edits it is the product's. → Profile card

Why it is here. Akinaza's public shop page and its composer: a page as a document of sections and variants (krizaka/akinaza#398, ADR-007, krizaka-ui#742).

Installation

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

import { shopPageSchema, parseShopPage, migrateShopPage, defineSection, ShopFrame, ShopSection, shopStarters } from "@krizaka/ui/shop";

Examples

Props

Accessibility

• The hero's name is the page's only h1; every section is a section named by its h2.
• The services are a real list (ul/li), grouped by category, the price is text, and each button names its service (« Choose Short cut »).
• Third-party media sit behind a facade: a platform's reel, the social facade and the map on a phone request nothing before a click. Reduced motion stills the loops, the neon and the wall.

Keyboard

Best practices

• Store the document, not the HTML: the product keeps schema, preset and sections and parses them on write and on read (parseShopPage); an older schema goes through migrateShopPage first.
• References, not copies: a services section holds a rule (source, groupBy), never a price; the product resolves the services, photos and times at render, so a changed price changes everywhere.
• Resolve each photo once per page and give a service its own photo or none: the menu draws a thumbnail only for a service that has one, and the trade's defaults go to the hero and the gallery.
• Give every image its alt and let the section choose the sizes; the first image is the page's LCP and every box has a fixed ratio.
• A section with nothing to show is not drawn: reviews under the host's minimum, an expired flyer, an empty list draw nothing.
• The renderer hoists bulletin · banner above the hero (the document keeps the hero first); wrap each section in <div data-shop-key="…"> so the composer's preview can outline it (connectShopPreview).

Related components

• Cover heroThe first screen of a shop or a place: its cover — a photo, or a muted loop that stays a still under reduced motion — behind the name, a one-line promise, a few true facts and the main action. Without a cover, the brand's colours.
• Service cardA service a shop sells, as a card that argues: icon or photo, name, duration, capacity, price (« from » when it varies), what is included, a « Popular » tag — and one way in, the whole card pressable.
• Slot pickerThe next free times of a service as tappable chips: a strip of days, then the day's times — each a link to the booking page or a toggle the reader presses.
• Opening hoursA shop's weekly hours in one quiet row — « Open now · closes at 5 pm » and today's hours — that unfolds into the whole week, today highlighted.
• Media galleryA shop's own photos and loops in tiles — the first featured, loops playing muted while their tile is on screen (a still under reduced motion), a caption on the foot of a tile.
• WallA read-only wall of photos, short notes and the owner's sign: Montréal brick, Moroccan eight-point zellige, Grenoble ridgelines or warm plaster, over a real keyboard-reachable list.
• Retro TVA vertical video presented in a detailed television cabinet, with an accessible player, channel label, scanlines and an animated off-state.
• Sticky actionThe one action of a page held at the bottom edge of a phone's screen while it scrolls — pure CSS, not drawn from md up.
• Call-to-action panelThe invitation at the end of a section or a page: a title, why it matters, the ways to answer — in the hue of the page.

Generated from the code of @krizaka/ui 3.64.0: its meta.ts, its examples and its types.Edit this documentation on GitHub