Decisions Tokens Back to overview
Showcase

Components

Live reference for every Caster component. Each page shows all states and variants alongside the markup. View-source on any page is the canonical reference implementation — copy markup directly from the snippets below the live examples.

How to use this

Each component page imports ../tokens/tokens.css + components.css. To build a page, import those two files and use the class names exactly as documented. --caster-* custom properties are available globally; override them at any scope to retheme without editing the component CSS.

Status: v0.16.3 · 30 / 30 component pages live. Foundations, primitives, composites, layout, and patterns all complete. Use the sidebar (or tiles below) to navigate.

Foundations

The visual primitives every component is built from. 7 pages.

Color

Brand, accent, neutrals, feedback, alpha overlays

 Typography

Display, heading, body, label, code styles

 Spacing

4px scale, container padding, section gaps

 Radius

7 primitives + 5 semantic aliases (control, card, panel, pill, tag)

 Shadow

5 primitives + elevation aliases (rest, raised, floating, overlay, deep)

 Motion

4 durations × 4 easings, with live hover demos

 Breakpoints

3 mobile-first breakpoints with live viewport indicator

Primitives

Single-purpose components used everywhere. 8 pages.

Button

7 styles × 5 sizes × icon-only modifier

 Pill

Status pill — 7 tones

 Stock badge

In stock, low, out, backordered

 Input / Select

Text, select, textarea — states, sizes, input groups

 Checkbox / Radio

Native + card variants, indeterminate states

 Qty stepper

Default + large (PDP), interactive +/- with bounds

 Breadcrumb

Standard, chevron, with-home-icon variants

 Tabs

Underline-style with optional counter badges, scrolling overflow

Composites

Compositions of primitives that make up product surfaces. 6 pages.

Product card

PLP card with badges, price, stock, CTA

 Machine card

Equipment unit — status badges, due-by row, fleet meta

 Alert

4 tones (info, success, warning, brand) — with title + dismissable

 Stat block

Single stat + grouped stats-bar with optional trend indicators

 Section header

Title + optional eyebrow + description + trailing link

 Reorder row

Buy-Again line item — SKU, badges, cadence hint, qty + add + save

Layout

Page-spanning chrome — header, nav, footer, container, rails. 6 pages.

Announcement bar

Deep-navy strip — shipping context + utility links

 Site header

Logo + global search + user pill + cart, sticky

 Primary nav

6-item top-level nav with active states + utility CTA

 Footer

Brand cluster + 4 link columns + bottom strip

 Container

Page-content wrapper with responsive side gutter

 Scroll row

Horizontal-scrolling rail for cards — carousels + recommendation rows

Patterns

Compositions of multiple components — recipes, not new components. 3 pages.

PDP price block

Pills + price + auto-ship + qty + ATC + savings link

 Compat checker

"Will this fit my machine" — 3 result states

 Bundle rows

FBT stacked-cards + curated kit patterns