brand.magicblocks.ai · chapters

The visual library

26 chapters. 383 demos. Every section in the kit, grouped into three buckets — General (foundations, atoms, molecules), Website (marketing narrative, content blocks, hero scenes), App (shell, pipeline, AI). Click any section to jump straight to its demo.

26 Chapters
383 Demo sections
3 Buckets

General

18 chapters · 238 sections

Foundations and atoms — the small things every other chapter is built from. Tokens, type, buttons, inputs, cards, navigation, data display, feedback, overlays.

01
Foundations
open →

On-brand HTML + CSS examples, copy-ready.
02
Typography
open →

On-brand HTML + CSS examples, copy-ready.
03
icons
open →

The kit's icon family — forty-plus monoline glyphs across three sub-families. CRM icons, file-type icons with a smart dispatcher, and miscellaneous task-type / source-control / utility glyphs. All themable via currentColor.
04
Buttons & controls
open →

On-brand HTML + CSS examples, copy-ready.
05
Forms & inputs
open →

On-brand HTML + CSS examples, copy-ready.
06
Cards & surfaces
open →

On-brand HTML + CSS examples, copy-ready.
07
Navigation
open →

On-brand HTML + CSS examples, copy-ready.
08
Data display
open →

On-brand HTML + CSS examples, copy-ready.
17
App AI
open →

Sage drawer, compose drawer, AI suggestion card, KB suggestion card, confetti win moment, score card, narration log, evidence quote, paste-and-recheck area.
18
agent builder
open →

The operator-facing surface used to configure an agent — declarative query / condition rules, source-to-target field mapping, connection test affordances, version switching, and the structured document editor. Six components compose the configuration vocabulary.
19
conversation
open →

The operator-facing chat surface — message bubble, transcript shell, composer, per-message trace button, summary banner, and the live agent-tester. Six components compose the transcript end-to-end.
20
explainability
open →

The AI reasoning flow — a vertical timeline of tool-calls, agent messages, citations, decisions, and errors. Two components compose the operator-facing ‘show me the thinking’ surface.
21
designer toolkit
open →

The designer-side toolkit operators use to brand the chat widget before deploying. Five components — color field, swatch picker, style section, style editor, embed snippet — compose the kit's brand-my-widget workflow.
22
billing
open →

The operator-side surface for plans, usage, invoices, and payment methods. Six components — plan tier cards, usage meters, invoice rows, payment method displays, the billing history table, and a drop-in page wrapper.
23
workspace
open →

The operator-side surface for team administration — members, pending invites, and the audit log. Six components compose the workspace-admin workflow: role badges, member rows, invite rows, audit-log entries, a team page header, and a drop-in members page wrapper.
24
integrations
open →

The operator-side surface for third-party integrations and webhook plumbing. Five components compose the integrations workflow: integration cards, a filterable grid, a webhook delivery console, OAuth-callback banners, and a drop-in integrations page wrapper.
25
widget
open →

The full end-user-facing chat widget — launcher, proactive bubble, expanded shell, messages, composer, buttons, feedback, disclaimers, branding marker, and brand-theme presets.
26
embed extras
open →

Three components for embed-side surfaces — ChannelSandbox (multi-channel widget preview), VoicePlayer (audio playback chrome for voice agents), and WidgetPersonaSwitcher (in-conversation persona selection). All three ship as live demos with their React snippets.

Website

5 chapters · 102 sections

The big marketing surfaces — hero scenes, narrative-systems visualisations, content blocks, page templates, platform-narrative comparisons. This is where chapter 11 lives.

09
Feedback & overlays
open →

On-brand HTML + CSS examples, copy-ready.
10
Content blocks
open →

On-brand HTML + CSS examples, copy-ready.
11
Patterns & specials
open →

Full-page layouts for auth, dashboards, conversations, settings, onboarding, and 404s.
12
Narrative systems
open →

Decay curves, scoreboards, race timelines, engine diagrams, handoff cards, integration hubs, HAPPA arcs, Guardian shields, and the Cost-of-Inaction calculator — every branded system visual the marketing site needs.
16
App pipeline
open →

Kanban, pipeline bar, activity timeline, inbox row, onboarding checklist, MRR chart.

App

3 chapters · 43 sections

Product UI — the shell, the pipeline view, the AI workspace. Densest chapters; most stateful components.

13
Media & presentation
open →

Video player, carousel, device frames (browser / laptop / phone), and the presentation deck device — all vanilla HTML/CSS/JS, Cloudflare-Pages-ready.
14
Platform narrative
open →

Feature cluster, contrast pair, feature table, cluster map, counter rail — the strategic-narrative components for /platform and /why-magicblocks.
15
App shell
open →

Detail-page 3-column shell, command palette, density mode, empty states.

Chapter HTMLs serve as Markdown via Cloudflare's auto-transform — append .md to any URL above for the AI-agent view.