Installs all 39 components. Without our CLI, run instead.
isometric publishes a shadcn registry at isometric.buildlab.in, with 39 components installable through the shadcn CLI.
Copy a prompt for your agent, copy the install command, or open the docs that ship it.
Isometric Isometric line figures and UI primitives for React.
Website ·
Components ·
Playground ·
Engine ·
llms.txt ·
Changelog ·
Contributing
Isometric is a collection of drawings and controls that stand in three dimensions, drawn in fine lines. The figures are SVG drawings that answer the pointer: a skyline that rises where you point, a laptop whose lid follows you, a bar chart drawn from your data. The interactive objects are made of parts you can operate: slide the panel off a PC, ring a church bell, haul a pulley. The Blocks kit is mineable blocks with game UI to match, and the World puts everything in one town you can explore and build in. The primitives are buttons, cards, tabs and the rest, each standing on a depth drawn in the same lines. You install the source with the shadcn CLI, so every component is yours to edit.
intensity, theme, label, onRead) and reads out what it is doing.onActivate.lib/isometric): orthographic projection, meshes with hidden faces removed and true outlines for curved solids, picking, springs, and one shared animation loop that sleeps offscreen and when nothing moves. No dependencies beyond React..dark. Tune it with --iso-* custom properties.llms.txt and per-component Markdown.| Figures | Primitives | ||
|---|---|---|---|
| Skyline | Towers rise around the pointer | Iso Button | Stands on its depth, sinks when pressed |
| Stack | An app window in four layers | Iso Card | A slab, composed like shadcn's Card |
| Keys | A keyboard that presses back | Iso Switch | A block in a recessed groove |
| Rack | Server units slide out | Iso Tabs | The chosen tile stands up |
| Laptop | The lid follows the pointer | Iso Slider | A cube on a rail, with ticks |
| Bars | A bar chart from your data | Iso Toggle Group | Keys that stay down when on |
| Steps | Progress as a staircase | Iso Kbd | A keycap for shortcuts |
| Files | Sheets rise from a folder | Iso Badge | A small slab for status |
| Cylinders | A database stack that parts | Iso Progress | Blocks that stand up as they fill |
| Parcel | A box that opens as you near | Iso Input | A recessed well |
| Nodes | A pulse routes through a network | Iso Grid | An isometric lattice backdrop |
| Cube | Layers twist and settle |
| Objects | Blocks | ||
|---|---|---|---|
| PC Case | Panel off, memory out, power on | Block | Mine it; it grows back |
| Heart | Beats, and likes with a burst | Chest | The lid lifts, items rise |
| Reactor | Coils charge, pulses fire | Torch | Flickers; snuff and relight |
| Pulley | Haul the rope, 2:1 or 4:1 | Tree | Sways, sheds leaves |
| Church | Doors, bell and lit windows | Hotbar · Inventory · Hearts Meter · XP Bar | Game UI to match |
Isometric needs React 19, Tailwind CSS v4 and a components.json (run npx shadcn@latest init first).
npx shadcn@latest add @isometric/skyline @isometric/iso-button
npx shadcn@latest add @isometric/church @isometric/world
npx shadcn@latest add @isometric/all # everything
If your shadcn CLI does not know the namespace yet, register it in components.json:
{
"registries": {
"@isometric": "https://isometric.buildlab.in/r/{name}.json"
}
}
import { Bars } from "@/components/ui/isometric/bars"
import { IsoButton } from "@/components/ui/isometric/iso-button"
export default function Page() {
return (
<>
Get started
</>
)
}
:root {
--iso-accent: #2450b8; /* what the pointer touches */
--iso-plate: var(--background); /* the fill of every face */
--iso-stroke: 0.9; /* stroke width in CSS px */
--iso-side: var(--muted); /* the side faces of primitives */
}
See the docs for every token.
pnpm install
pnpm dev # generates the registry, then runs the site on :3000
pnpm test # engine and registry tests
pnpm build # name check, registry, static export to out/
pnpm test:e2e # browser smoke tests against out/
pnpm lint # ESLint
pnpm format # Prettier
The registry is generated from registry/index.ts. Components live in registry/isometric/ui/isometric, the engine in registry/isometric/lib/isometric. The engine page's maths is in anatomy/ and its view in components/engine; VISUAL=1 pnpm test:e2e adds screenshot comparisons of it, against baselines made on the same platform.
MIT
The packages and primitives its components pull in, counted across the registry.
Every appearance and removal our crawl has seen in the registry index.
isometric is a component library on 21st.dev by abhishek-mallick with 24 public React components. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.
