React components
128 components shipped from @magicblocksai/ui. Search, filter, follow links to the chapter demos and per-component JSON specs. The chapter HTML pages remain the canonical visual reference.
-
Phase 6 — Kit chrome 7
- KitPage display
Page-shell wrapper for any kit-style chapter / reference page. Sets `data-theme` on its root so token swaps cascade to descendants. The…
no demo spec.json - KitNav interactive use client
The kit's top navigation bar — brand mark + a native `<select>` chapter picker + light/dark theme toggle on the right. Wraps `.topnav`…
no demo spec.json - Demo display
One demo block (the `.el` block in chapter HTML). Renders the head with a name + optional class tag, an optional one-line description,…
no demo spec.json - DemoTabs interactive use client
The HTML / CSS / JS / React code-tab strip with tab switcher + copy button — the same chrome the chapter HTML pages render below each…
no demo spec.json - CodeBlock display
Standalone code sample with a header bar — language pill + filename + copy button — wrapping `<pre><code>`. Wraps `.codeblk` from chapter 7.
no demo spec.json - CopyButton interactive use client
Small reusable copy-to-clipboard button. Wraps `.copy`. On click, writes `value` to `navigator.clipboard.writeText(...)`, swaps the label…
no demo spec.json - ThemeToggle interactive use client
Light / Dark theme switch — the same control the chapter pages use.
no demo spec.json
-
-
Phase 2 — Patterns & specials (chapter 10) 8
- PricingPage display
Three-tier pricing page. Wraps `.pg` + `.pg-grid`.
- SignInPage display
Two-panel sign-in / sign-up page shell. Wraps `.au` (form) + `.au-side` (testimonial). On mobile the panels stack; the side moves to the…
- NotFoundPage display
404 / not-found page. Wraps `.nf` — the warm cream canvas with double radial blooms and a Fraunces-italic title.
- ConversationPreview display
Conversation preview — the chat surface used on landing pages, dashboards, and case studies. Wraps `.cv` (paper card) with `.cv-head`,…
- DashboardShell display
App dashboard shell — warm sidebar + paper main. Wraps `.dash`.
- EmptyStatePage display
Page-level empty state, distinct from the icon-only `<EmptyState>` primitive. Wraps the chapter-07 `.empty` shell with chapter-10…
- SettingsShell interactive use client
Two-column settings shell. Wraps `.settings` (200px nav + fluid content).
- OnboardingStep interactive use client
Onboarding step — three-up flow with a top stepper, a focused panel, and back / continue actions. Wraps `.ob`.
-
-
Phase 2 — Narrative systems (chapter 11) 22
- BrandTimeline display
Brand timeline — horizontal milestone ticks with labelled rails. Used for the About page origin story ($200M → AI mortgage team →…
- ChatCompare display
Chat comparison — dual-conversation proof widget. Same inbound lead message in both columns; the asymmetry IS the message. Generic chatbot…
- DecayCurve display
Decay curve — a line graph of lead intent vs time with a hot/cooling/dead traffic-light overlay, an animated tracer dot riding the curve,…
- DormantMine display
Dormant-lead mine — a CRM mockup table where every row continuously cycles through cold → scanning → drafting → sent → replied,…
- EcosystemRings display
Ecosystem rings — three concentric rings with the engine at centre, today's products in the middle ring, and tomorrow's vision on the…
- EdgeRace interactive use client
Edge race — radar visualisation showing the user at the centre of concentric distance rings with edge servers scattered around them. Every…
- EngineBlock display
Engine block — central ink-block engine with four channel labels orbiting it (40s revolution), lead-source cards stacking on the left and…
- GuardianShield display
Guardian shield — one shield, one promise. Six universal compliance primitives (consent, privacy, encryption, retention, opt-out, audit)…
- HandoffCard display
Handoff card — credential-style card showing a qualified lead ready for human handoff. Five+ industry variants via the `role` prop — each…
- HappaArc display
HAPPA arc — five conversation stages (Hook · Align · Personalise · Pitch · Action) anchored along a soft S-curve, with a continuous tracer…
- HeroBloomCanvas display
Hero bloom canvas — large ambient SVG backdrop for hero sections. Three soft radial gradients with slow drift, optional drifting motes.…
- HeroLiveDemo display
Hero live demo — flagship laptop hero with a looping mortgage-scenario conversation, response-timer overlay, status badge, and scenario /…
- HeroScene display
Hero scene — flagship phone hero with a live SMS thread on the left and an annotation column on the right showing what the agent knew at…
- IntegrationHub display
Integration hub — radial diagram with 8 dashed spokes converging on a central MagicBlocks core, with branded integration chips at the…
- JourneyMap display
Journey map — horizontal branching flow with labelled connectors. One component, many variants — prequalification, follow-up,…
- LeakCard display
Leak card — one of the four-leaks diagnostic tiles. One atom, four variants (`leak={1|2|3|4}`), each carrying its own accent colour via…
- ProfileCard display
Profile card — visibly accretes memory as the agent learns more about a lead, with five progressive ticks of relationship memory. Three…
- RaceTimeline display
Race timeline — split timestamp sequence with a left lane that loses (cold, drawn-out) and a right lane that wins (sub-second beats marked…
- RevenueCalculator interactive use client live demo
Revenue calculator — dual-tab widget (Activation + Reactivation) with plan-aware pricing and live computation. Wraps `.roi-calc` from…
- Scoreboard display
Scoreboard — two-column contrast table for "most teams vs MagicBlocks" moments. Wraps `.scoreboard` (and `.scoreboard.dark` variant) from…
- StatBadge display
Stat badge — editorial big-number callout. Mono uppercase eyebrow + a Bricolage-display number with optional `<sup>` unit and a caption…
- Triptych display
Triptych — three equal panels separated by arrow dividers, used for "How It Works" sections across the site. Panels stack on mobile and…
-
-
Phase 2 — Media & presentation (chapter 12) 5
- VideoPlayer interactive use client
Branded HTML5 video player. Wraps `.vid-player` from chapter 12. Drops a native `<video>` inside MagicBlocks chrome — centre play button,…
- Carousel interactive use client
Snap carousel — horizontal slide scroller with a dot pager and prev/next arrows. Wraps `.carousel` from chapter 12. Uses native CSS…
- DeviceFrame display
Device frame — pure CSS chrome around a `.device-viewport` slot. Wraps the chapter-12 `.device` family: `.device.browser`,…
- StageChat interactive use client
Streaming HAPPA stage-progress chat. Wraps `.stage-chat` from chapter 12. A phone-framed conversation that token-streams each message and…
- ProductDashboard interactive use client
Animated marketing dashboard preview. Wraps `.product-dash` from chapter 12. Browser-framed "inside the product" view: sidebar nav, hero…
-
-
Phase 2 — Content blocks (chapter 09) 15
- Hero display
Marketing hero — pinned warm cream surface with a dual radial bloom (pink top-right, peach bottom-left), an eyebrow pill, large display…
- MarketingFeatureGrid display
Marketing feature grid (3-up). Wraps `.mfg` + `.mfg-grid` from chapter 09.
- LogoWall display
Typography logo wall. Wraps `.lw` from chapter 09. Pinned-white surface in both themes (greyscale wordmarks otherwise vanish on dark navy).
- TestimonialStrip display
Hero testimonial strip — single quote with a Fraunces glyph, italicised emphasis phrases in pink, author block, and an optional stat…
- CtaBlock display
CTA block — closing surface that asks for the next step. Wraps `.ctab` from chapter 09. Two tonal variants: `"warm"` is the marketing…
- StatsStrip display
Stats strip — band of 3–4 big numbers. Wraps `.stats` from chapter 09. Tabular nums so digits stack; hairline grid between cells.
- Faq display
FAQ accordion. Wraps `.faq` + `.faq-list` from chapter 09. Native `<details>` per row — no JavaScript required, no `'use client'` boundary.
- ComparisonTable display
Comparison table — N-column product-vs-competitor. Wraps `.compare` from chapter 09. The MagicBlocks column gets the `.is-ours` modifier…
- TeamCard display
Single team-member card. Wraps `.team-card`. Photo + name + role + bio.
- PullQuote display
Pull quote — full-bleed editorial moment between sections. Wraps `.pull-quote` from chapter 09. Oversized Fraunces-italic glyph; the quote…
- SiteFooter display
MagicBlocks site footer. Wraps `.mf` from chapter 09. One component, two tonal variants:
- CustomerLogoGrid display
Customer logo grid. Wraps `.logo-grid-section` / `.customer-logo-wall` from chapter 09. Pinned-white surface in both themes (greyscale…
- PressStrip display
Press strip — "as seen in" row of press-mention logos. Wraps `.press-strip` from chapter 09. Pinned-white surface in both themes; same…
- IntegrationGrid display
Integration grid — square tiles for third-party integrations. Wraps `.integration-grid` from chapter 09. Each tile is a pinned-white…
- FounderCard display
Single founder profile card. Wraps `.founder-card`. Headshot uses `object-fit: cover` with a 1:1 aspect ratio so any crop works.
-
-
Phase 3 — App shell (chapter 13) 4
- DetailShell interactive use client
Three-column detail shell — left summary · centre tabs · right context rail. Wraps `.detail-shell` from chapter 13. The host pattern for…
- CommandPalette interactive use client
⌘K command palette — modal launcher with grouped results, fuzzy filter, and full keyboard navigation. Wraps `.cmdk` from chapter 13.
- DensityProvider interactive use client
Density-mode wrapper. Sets `data-density` on its root so descendants — and any CSS that consumes `var(--row-h)` — automatically respond.
- EmptyAppCard display
CRM-flavoured empty state — illustration + headline + lede + primary CTA + secondary fallback. Wraps `.empty-card` from chapter 13.
-
-
Phase 3 — App pipeline (chapter 14) 6
- Kanban interactive use client live demo
Kanban board — the deals view's spine. Wraps `.kanban` from chapter 14.
- PipelineBar interactive use client live demo
Pipeline stage segmented bar — sits in a deal's page header. Wraps `.pip-bar` from chapter 14. Past stages get a soft ink wash; the…
- ActivityTimeline interactive use client
Activity timeline — vertical hairline rail with iconified nodes per event, filter chips at the top, and date dividers between days. Wraps…
- Inbox interactive use client
Inbox container — wraps `.inbox` from chapter 14. Renders as an unordered list so the row markup is semantic.
- Checklist interactive use client live demo
Onboarding checklist — vertical list with tickbox · title · description · due-date · assignee · more-menu, plus a header with progress…
- MrrChart display
MRR composition chart — vanilla SVG diverging-bar chart for the revenue dashboard. Wraps `.mrr-chart` from chapter 14.
-
-
Phase 3 — App AI (chapter 15) 5
- SageDrawer interactive use client
Sage AI drawer — right-anchored AI assistant. Wraps `.sage-drawer` from chapter 15.
- ComposeDrawer interactive use client
Compose drawer — the single email composer used everywhere. Wraps `.compose` from chapter 15.
- AiSuggestionCard interactive use client
AI suggestion card — Sage's proactive in-rail card. Wraps `.ai-card` from chapter 15.
- KbSuggestionCard interactive use client
Knowledge-base suggestion card — Sage's "assist" surface for support agents. Wraps `.kb-card-suggest` from chapter 15.
- ConfettiTrigger interactive use client
Confetti win-moment trigger — a `<button>` that fires a one-shot brand-palette confetti burst + toast on click. Wraps the chapter-15…
-
-
Phase 2 — Platform narrative (chapter 16) 4
- FeatureCluster display
Feature cluster — thematically-grouped block of feature cards. Wraps `.feature-cluster` + `.fc-card` from chapter 16. Header (eyebrow + h2…
- FeatureTable display
Feature table — 3-column capability comparison. Wraps `.feature-table` from chapter 16. Real `<table>` semantics with `<th scope>` for…
- ClusterMap display
Cluster map — six labelled hexes radiating around a centre node, each an anchor link. Wraps `.cluster-map` from chapter 16. Stateless, no…
- CounterRail interactive use client
Counter rail — vertical 01–05 numbered circles, each anchor-linked to its section below. Wraps `.counter-rail` from chapter 16. The active…
-
-
Phase 1B — Typography (chapter 02) 5
- Heading display
Kit-styled heading. Renders an h1–h6 with the kit's typography defaults. Pass `display` for the hero / marketing variant (56px, bold,…
- Eyebrow display
Small uppercase label that sits above a heading. Wraps `.eyebrow`. Mono, 11px, accent-text colour.
- Lede display
Larger paragraph (19px) that sits below a hero heading. Wraps `.lede`. Use exactly once per page hero. For body copy, use a plain `<p>`.
- Caption display
Small helper / metadata text (13px, dim). Wraps `.caption`.
- Quote display
Pull quote / testimonial figure. Wraps `<figure class="quote">` with a `<blockquote>` and an optional `<figcaption>` for attribution.…
-
-
Phase 1B — Feedback & overlays (chapter 08) 9
- Banner interactive use client
Page-level banner. Wraps `.banner` (`.banner-{tone}`).
- Alert display
Inline alert — a tighter banner for in-form / in-card surfaces. Wraps `.alert` (`.alert-{tone}`).
- Toast interactive use client
- Toaster interactive use client
Toaster — global, mountable-once stack that listens to the singleton `toastStore` and renders each `<Toast>` inside a `<Portal>`. Pair…
- Modal interactive use client
Centred modal dialog with backdrop. Wraps `.modal-backdrop` + `.modal`.
- Drawer interactive use client
Slide-in drawer. Wraps `.drawer-backdrop` + `.drawer`.
- Tooltip interactive use client
Lightweight tooltip — shows on hover or focus, hides on blur or leave.
- Popover interactive use client
Click-triggered popover with viewport-aware positioning. Wraps `.popover` — the trigger is whatever you pass as `children`, the panel is…
- BulkBar interactive use client
Sticky bottom action bar shown when items are bulk-selected. Wraps `.bulk-bar`.
-
-
Phase 1B — Data display (chapter 07) 9
- Avatar display
Circle avatar with initials and a soft tinted background. Wraps `.av` (with `.av-{xs|sm|md|lg|xl}` and `.av-ring`).
- ProgressBar display
Linear progress bar (6px). Wraps `.prog-head` (label/value row) + `.prog-track` (rail) + `.prog-fill` (fill). Per chapter 07 §7.7.
- ProgressRing display
SVG progress ring. Wraps `.ring-item` with `.ring` <svg> using `.ring-bg` + `.ring-fg` strokes. Stroke length encodes value via…
- ScoreRing display
0–100 fit / intent / health score ring. Wraps `.score-ring`. Uses a fixed `0 0 36 36` viewBox with `r=15` (circumference ≈ 94.2); size is…
- SLARing display
SLA countdown ring. Fills clockwise as elapsed-fraction grows; colour ramps green → amber → red as the deadline approaches. Wraps…
- Sparkline display
Tiny inline trend line. Wraps `.spark` (with `.spark--inline|card|page`). Inner SVG uses `.line`, optional `.area`, and `.end-dot`. Per…
- RiskBadge display
Risk band label. Wraps `.risk-badge` and uses `data-risk` to pick the colour. Per chapter 07 §7.17.
- Timeline display
Vertical activity feed. Wraps `.timeline` with `.tl-item > .tl-marker > .tl-dot` + `.tl-body > .tl-head + .tl-desc`. State classes…
- KeyValue display
Two-column key-value grid. Wraps `<dl class="kv">` with direct `<div>` children, each containing `<dt>` (mono uppercase key) and `<dd>`…
-
-
Phase 1B — Navigation (chapter 06) 7
- TopNav display
Marketing top nav — pill-shaped horizontal bar. Wraps `.tn`.
- SideNav display
Compact in-app vertical navigation. Wraps `.sn`.
- Tabs interactive use client live demo
Underline-style horizontal tabs. Wraps `.tabs` + `.tabs-body`. Pink underline marks the active tab.
- Breadcrumbs display
Breadcrumb trail. Wraps `.bc`. Mono-typed with soft chevrons.
- Pagination interactive use client
Pagination component. Wraps `.pag` (or `.pag-compact`).
- MenuDivider interactive use client
Horizontal rule between groups of menu rows.
- Stepper display
Vertical stepper. Wraps `.stepper`.
-
-
Phase 1B — Cards & surfaces (chapter 05) 11
- Card display
Base content card. Wraps `.card`, `.card-sunk`, or `.card-warm`.
- Divider display
Horizontal divider. Wraps `.div-hair`, `.div-accent`, or `.div-label`.
- Panel display
Card with a titled header bar and a body of `.panel-row`s (or any custom children). Wraps `.panel` + `.panel-head` from chapter 05.
- StatCard display
Dashboard stat / metric card. Wraps `.stat-card` from chapter 05.
- KpiTile display
Big-number tile for the top row of a dashboard. Wraps `.kpi-tile` from chapter 05.
- FeatureCard display
Feature card — icon + title + body + optional deeplink. Wraps `.feat-card` from chapter 05. Hover lifts 2px and shifts border to accent.
- TestimonialCard display
Testimonial card with optional oversized Fraunces glyph. Wraps `.testim-card` from chapter 05.
- MediaCard display
Media / blog card. Wraps `.media-card` (or `.media-card-wide`) from chapter 05.
- CalloutCard display
Full-bleed callout / CTA surface. Wraps `.cta-card` (or `.cta-card-ink`) from chapter 05.
- DashboardTile display
Three-zone dashboard content tile. Wraps `.dash-tile`.
- PricingCard display
Pricing card. Wraps `.price-card` (`.price-card-hero` when `featured`) from chapter 05.
-
-
Phase 1A — atom validation slice 11
- Button display
The kit's canonical button. Wraps the `.btn` family of CSS classes from `@magicblocksai/css`. All native `<button>` props are passed…
- IconButton display
Square 36×36 icon-only button. Wraps `.icon-btn` and `.icon-btn-primary`.
- Input display
Text input. Wraps `.input` (and `.input-group` + `.input-affix` when prefix/suffix are passed).
- Textarea display
Multiline text input. Wraps `.input` applied to a `<textarea>`.
- Select display
Native `<select>` styled to match the kit's `.input` family.
- Checkbox interactive use client
Standard checkbox with the kit's custom check visual. Wraps `.cb`. Pass `indeterminate` for the mixed-state appearance (overrides…
- Radio display
Single radio button. Wraps `.rb`. Use inside `<RadioGroup>` for keyboard + ARIA grouping, or stand-alone when you only have one option.
- Switch display
Toggle switch (checkbox semantics, switch visuals). Wraps `.switch` + `.switch-track`.
- Label display
Form label. Pair with the corresponding `htmlFor` to associate with an input. Wraps `.input-label` (and renders `.input-hint` when `hint`…
- Badge display
Tiny status / count badge. Wraps `.badge` + tone variants.
- Chip interactive use client
Inline status / filter chip. Wraps `.chip` + tone variants. Pass `onDismiss` to render a removable × button.
-
No components match.
Want this as JSON? /api/components.json · per-component: /api/components/{Name}.json