Shop Styleguide

Type to search...

to open search from anywhere

Shop components

The real Nightjar Supply component pack, with working storefront interactions.

35 components

Chrome

Breadcrumbs

Home › category › product trail from static items.

3 variants

Cart button

Header link to the cart with the live item count.

3 variants

Demo note

Muted caption saying the mock sends no data.

3 variants

Footer

Three columns: footer links, small print and the zudo-composer credit.

3 variants

Header

Sticky top bar with brand, navigation and cart; a drawer below md.

3 variants

Nav link

One navigation link; active when the current path starts with its href.

3 variants

Layout

Category body

Main region of a category page — the slot rule is the point of this component.

3 variants

Container

Centred max-width wrapper with the responsive page inset.

3 variants

Grid

Responsive columns: one, then up to the chosen count at sm / lg / xl.

3 variants

Section

Block spacing wrapper between sections.

3 variants

Section heading

Eyebrow, heading and optional intro; `as` sets the heading level.

3 variants

Split

Two columns from md.

3 variants

Stack

Vertical rhythm on the vsp ladder.

3 variants

Catalog

Category tile

Home shelf tile: square image, label and a short caption.

3 variants

Pagination

Prev / page numbers / next; the product grid renders its own.

3 variants

Price tag

Currency-formatted price in mono with tabular numerals.

3 variants

Product card

One product; the whole card links to its page and hides itself when the grid filters it out.

3 variants

Product grid

List host for product cards with category chips, sort, search and pagination.

3 variants

Status badge

Uppercase stock caption coloured by availability.

3 variants

Content

Contact form

Mock name / email / message form: required fields, 600 ms, then the success text. Sends nothing.

3 variants

FAQ accordion

List host of question rows; one open at a time unless several are allowed.

3 variants

FAQ item

One question with a markdown answer; square with a 1px bottom rule.

3 variants

Hero

Full-bleed image with eyebrow, heading, lead and up to two actions; wrap one heading word in *asterisks* to emphasise it.

3 variants

Image

Plain figure with a fixed aspect ratio and optional caption.

3 variants

Newsletter

Mock email sign-up: format check, 600 ms, then a thank-you. Sends nothing.

3 variants

Prose

Markdown body: headings, paragraphs, lists, links, emphasis and rules.

3 variants

Product

Add to cart

Quantity stepper and primary button that write to the cart; disabled when sold out.

3 variants

Gallery image

One square product image inside a product gallery. An empty URL renders nothing.

3 variants

Product gallery

Square main image with thumbnails when two or more gallery images are set; arrow keys move the selection.

3 variants

Product hero

Product page split: gallery on the left from lg, copy on the right.

3 variants

Related products

Strip of product cards without a toolbar; hides the card for the current product and shows at most `limit`.

3 variants

Spec table

Label / value rows in mono; a row with an empty label or value is skipped.

3 variants

Cart

Cart lines

Line items from the cart store with quantity, remove and line totals; an empty state links back to the catalog.

3 variants

Cart summary

Subtotal, flat shipping and total from the cart store, with an optional checkout button.

3 variants

Checkout form

Mock checkout: validates, waits 600 ms, shows a fake order number and clears the cart. Sends nothing.

3 variants