Components

Semantic Tailwind CSS components. Every component exposes a CSS variable API so you can create custom variants without touching the source — override only what you need.

How theming works

Every component uses a two-tier token system. Knowing which tier to reach for keeps your CSS minimal and genre-aware.

Tier 1 — Genre tokens
--z-btn-*  --z-card-*  …

Controlled by the active genre. Switch with the Genre Builder or set data-genre on <html>. Changing one value repaints every component on the page simultaneously.

Edit in Genre Builder →
falls back to ↑
Tier 2 — Element tokens
--btn-*  --card-*  …

Set on a single element. Overrides genre defaults for that instance only — everything else on the page stays genre-themed. If unset, the value falls back to Tier 1.

Documented in each component's CSS API →
Rule of thumb: Use the Genre Builder to set the mood globally. Use element tokens (--btn-bg, --card-border-color, …) when one specific component needs its own colour story.
Actions
Button →
Scan-fill hover effect and glow physics. 4 variants, 3 sizes, 4 shapes, icon mode.
System Status
Online v2.4.1
Data Display
Card →
L-bracket corners, animated top power bar, optional glow pulse. Composable header + body.
Primary Online Critical Warning Info Live
Data Display
Badge →
Parallelogram scan-sweep badges. Semantic variants, shape modifiers, pulsing status dot.
Feedback
Alert →
Left-bar status messages with HUD prefix. Semantic variants, icon slot, dismissible pattern.