brand.magicblocks.ai · components

The machine layer

How agents and apps consume the kit — three npm packages, a JSON API, and an agent guide. 334 typed React components in @magicblocksai/ui; every component links back to its Library page for the visual reference.

3 npm packages
334 Components
27 Chapter groups
10 Live demos

install · 3 packages

npm install

Three workspace packages on GitHub Packages. Pin one or all three depending on which surfaces your app touches. For the full setup walkthrough — auth token, .npmrc, CSS imports, Tailwind bridges — see brand.magicblocks.ai/install.

@magicblocksai/css

vanilla

The brand stylesheet — every CSS variable + every component class, ready to drop into any HTML, Astro, 11ty, or Hugo project.

npm install @magicblocksai/css

@magicblocksai/ui

react

Typed React components — Tailwind preset, dark mode, reduced-motion-aware, keyboard-nav primitives baked in.

npm install @magicblocksai/ui

@magicblocksai/brand

data

Pure data — colours, type, spacing, asset URLs, voice rules. Same JSON shape as the API, ready for codegen + agent tooling.

npm install @magicblocksai/brand

contract · 5 endpoints

JSON API

Every Library surface mirrors a structured endpoint. Hit any URL below for raw JSON. Every chapter HTML also serves as Markdown — append .md.

catalogue · 334 components

Component catalogue

Every component @magicblocksai/ui exports. Filter by interactivity, search by name, follow each row to its Library demo for the visual reference.

334 shown

Want this as JSON? /api/components.json · per-component: /api/components/{Name}.json