Every block you need. On brand.
A living reference for the MagicBlocks web & product surface. Twenty-six chapters across five buckets — Foundations, Building Blocks, Marketing, Operator, Embed — every component with copy-ready HTML and CSS. Designed so a human or an AI agent can reach for any piece and ship something that looks — and feels — like us.
How to use this
Every component on every page has a live render, an HTML snippet, and a CSS snippet — with one-click copy on each. All CSS is scoped and leans on the shared design tokens in _shared.css, so snippets paste cleanly into any page that imports those tokens. Light and dark variants work via a single data-theme attribute on <body>.
Complex components have an "anatomy" diagram that names each part — useful when briefing designers, engineers, or AI agents who need to produce brand-consistent variations.
_shared.css (--ink, --accent, --warm-3, etc.) — you can either include _shared.css, or inline the variables you need. The brand palette and type system are the source of truth; don't introduce new colours or fonts.
Foundations
Design tokens and typography — the foundational primitives every other component depends on.
Foundations
Colour tokens, spacing scale, radii, shadows, motion, borders, opacity, z-index. The atomic layer every other component depends on.
Foundations →Typography
Full type scale (web + app), heading hierarchy, body, lead, eyebrow, caption, quotes, code, numeric tabular, link states, editorial italic.
Foundations →Icons
The kit’s icon family — roughly forty monoline glyphs across three sub-families: CRM nav icons (<BookIcon>, <PersonIcon>, <ChartLineIcon>, …), file-type icons (<FileTypeIcon> + seven base glyphs), and a misc grab-bag (task-type, source-control, utility). All 18×18 by default, all themable via currentColor.
Building Blocks
The primitive controls, forms, surfaces, navigation, data display, and feedback overlays that compose into product UI.
Buttons & Controls
Primary, secondary, ghost, destructive, icon, loading, disabled. Button groups, segmented controls, pills, chips, tags, badges.
Building Blocks →Forms & Inputs
Text, textarea, select, checkbox, radio, toggle, search, file upload, combobox, date. Field states, inline validation, form layouts.
Building Blocks →Cards & Surfaces
Basic, stat, testimonial, feature, pricing, media, dashboard tile, KPI tile, callout, banner — across elevation levels.
Building Blocks →Navigation
Top nav, sticky nav, sidebar, breadcrumbs, pagination, tabs, stepper, footer, anchor menu, skip-to-content, command-k bar.
Building Blocks →Data Display
Tables, lists, data lists, stat grids, charts, timelines, trees, empty states, skeleton loaders, progress, score & SLA rings, sparklines, avatar stacks.
Building Blocks →Feedback & Overlays
Alerts, toasts, inline messages, modals, drawers, popovers, tooltips, progress, spinners, confirmations, snackbars, bulk-action bar.
Marketing
Hero blocks, page templates, narrative systems, presentation devices, and strategic narrative pieces — for brand.magicblocks.ai and customer-facing pages.
Content Blocks
Hero, feature row, CTA block, logo wall, testimonial, FAQ, pricing grid, comparison table, stat row, team grid, pull quote.
Marketing →Page templates
Full-page compositions ready to ship: pricing, sign-in, 404, conversation preview, dashboard shell, settings, onboarding, and empty-state pages. Drop whole onto production.
Marketing →Narrative systems
Branded system diagrams and wireframe abstractions for the marketing site — decay curves, scoreboards, race timelines, the engine, handoff + profile cards, integration hub, HAPPA arc, Guardian shield, journey maps, infra map, ecosystem rings, ROI calculator, brand timeline, hero bloom canvas, plus mini-atoms. All in code, all animated, all themed.
Marketing →Media & presentation
Video player, carousel, device frames (browser, laptop, phone), and the deck device — a laptop-framed slide switcher with keyboard + dot nav. All vanilla HTML/CSS/JS, Cloudflare-Pages-ready, zero dependencies.
Marketing →Platform & narrative
Five components that carry the strategic narrative — feature clusters, contrast pairs, comparison tables, cluster maps, counter rails. Used to build /platform and /why-magicblocks.
Operator
App shell, CRM pipeline, AI surfaces — the moves that make the operator-facing product feel like a product.
App Shell System
Detail-page 3-column shell, command palette (⌘K), density-mode demo, and five charming CRM empty states. The structural moves that hold the product together.
Operator →CRM pipeline patterns
Kanban with draggable cards, pipeline stage bar, activity timeline (six row types), inbox rows you dispatch with one keystroke, onboarding checklist, MRR composition chart. The six big CRM moves.
Operator →AI surfaces & celebration
The Sage AI drawer with tool-calls + proposal cards, the compose drawer with AI assist, AI & KB suggestion cards, and the confetti win moment. Every place Sage shows up.
Operator →Agent builder — the configuration surface
The operator-facing surface used to configure an agent. Six components (<QueryBuilder>, <ConditionRow>, <FieldMapper>, <TestConnectionButton>, <VersionSwitcher>, <StructuredDocEditor>) compose the configuration vocabulary — declarative rules, source-to-target mapping, connection probes, version switching, and the sectioned document editor.
Conversation — the transcript
The operator-facing chat surface. Six components (<ChatMessage>, <ChatTranscript>, <ChatComposer>, <MessageTraceButton>, <SummaryBanner>, <LiveChatTester>) compose the end-to-end transcript — bubble, viewer, composer, trace-back, TL;DR banner, and the live agent sandbox.
Explainability — the robot head
The vertical timeline of what an AI agent is actually doing — tool-calls, agent messages, citations, decisions, errors. Two components (<TraceTimeline> + <TraceEventCard>) compose into the operator-facing “show me the thinking” surface.
Designer toolkit — the brand controls
The operator-side surface for branding the chat widget before deploying it. Five components (<ColorField>, <ColorSwatchPicker>, <WidgetStyleSection>, <WidgetStyleEditor>, <WidgetEmbedSnippet>) compose the “brand my widget” workflow — colour fields, preset palette, collapsible style sections, the split-pane editor with live preview, and the copy-ready embed snippet. The widget itself lives in chapter 17.
Billing
The operator-side surface for plans, usage, invoices, and payment methods. Six components for everything billing-related.
Operator →Workspace & Settings
The operator-side surface for team administration — members, pending invites, and the audit log. Six components compose the workspace-admin workflow.
Operator →Integrations
The operator-side surface for third-party integrations and webhook plumbing. Five components compose the integrations workflow.
Embed
The chat widget — the end-user-facing surface that embeds on the customer's own site, fully rebrandable.
The killer chat widget
The full end-user-facing chat widget — launcher, proactive bubble, expanded shell, themed messages, customisable composer, button variants, feedback chips, disclaimers, style editor, embed snippet. Fully rebrandable via a single WidgetTheme config.
Embed extras
Three components reserved for the embed-side roadmap — ChannelSandbox previews the widget across multiple channels, VoicePlayer carries audio playback for voice agents, and WidgetPersonaSwitcher lets visitors swap between named personas mid-conversation. Pages are the structured doc-side reservation; demos become live when the components ship.