Product Pages

7 components in this category.

PurchaseNav

Product purchase-status block: routes a resolved product through the 6 Mercari status states (available/sold/incoming/askToBuy/discontinued/unavailable).

11 variants

IncomingItem

PurchaseNav right-column block for incoming products: "Coming soon..." status plus the optional notify-me/reservation action buttons.

5 variants

DiscontinuedItem

PurchaseNav right-column notice for discontinued products: italic uppercase label, locale status message, and a subline noting specs are kept for reference.

3 variants

BrandDocsDialog

Trigger link + modal note about official brand documentation, shown below the manuals/guides grid on RYK and OXI product pages.

2 variants

BrandHero

Decorative animated vector artwork band for brand pages, with pause / replay controls. The canvas is aria-hidden; the page h1 stays the heading.

2 variants

Amber-bordered callout for MDX pages announcing something has ended. Warning icon, locale-aware default heading/body (product-discontinued preset), optional heading override and children body override for other ended states (e.g. finished campaigns).

4 variants

RelatedProducts

Product cards for a set of related-product ids, pulled live from the real catalog (`src/data/products.mjs`) — no mock layer. Shows a warning for any id not found in the catalog.