---
name: "@isometric"
slug: "isometric"
description: "Isometric line figures and UI primitives for React. SVG drawings that answer the pointer, and buttons, cards and tabs that stand on their own depth."
category: "Forms"
tags: ["blocks", "buttons", "cards", "design-system", "forms", "hooks", "icons", "loaders", "media", "navigation"]
framework: "react"
license: null
author: "Abhishek-Mallick"
website: "https://isometric.buildlab.in"
github: "https://github.com/Abhishek-Mallick/Isometric"
registry: "https://isometric.buildlab.in/r/registry.json"
pro: false
pro_url: null
github_stars: 2
component_count: 41
generated_at: "2026-10-10T06:32:55.998Z"
---

# @isometric

Isometric line figures and UI primitives for React. SVG drawings that answer the pointer, and buttons, cards and tabs that stand on their own depth.

## Links

- Website: https://isometric.buildlab.in
- GitHub: https://github.com/Abhishek-Mallick/Isometric
- Registry JSON: https://isometric.buildlab.in/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/isometric
- This file: https://sh4dcn.vercel.app/md/isometric.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://isometric.buildlab.in/r/registry.json
pnpm dlx shadcn@latest add https://isometric.buildlab.in/r/registry.json
bunx shadcn@latest add https://isometric.buildlab.in/r/registry.json
# clone the source repo
git clone https://github.com/Abhishek-Mallick/Isometric.git
# fetch the raw registry index
curl -s https://isometric.buildlab.in/r/registry.json
```

## Components (41)

| name | type | description | install |
| --- | --- | --- | --- |
| isometric-engine | registry:lib | The engine behind every figure: orthographic projection, meshes with hidden faces removed, picking, springs, one shared animation loop that sleeps offscreen, a… | `npx shadcn@latest add https://isometric.buildlab.in/r/isometric-engine.json` |
| iso-depth | registry:ui | The line-drawn depth every primitive stands on: an offset outline and three diagonals that fade as the face sinks. | `npx shadcn@latest add https://isometric.buildlab.in/r/iso-depth.json` |
| skyline | registry:ui | A city block of towers on a plinth. Towers near the pointer rise, the nearer the higher. | `npx shadcn@latest add https://isometric.buildlab.in/r/skyline.json` |
| stack | registry:ui | An app window taken apart into four layers. Moving across opens the gap; moving down picks a layer. | `npx shadcn@latest add https://isometric.buildlab.in/r/stack.json` |
| keys | registry:ui | A forty-key keyboard. The key under the pointer sinks and its neighbours follow; a click presses it home. | `npx shadcn@latest add https://isometric.buildlab.in/r/keys.json` |
| rack | registry:ui | An open server rack of eight units. The pointer's height pulls the nearest units out and wakes their lights. | `npx shadcn@latest add https://isometric.buildlab.in/r/rack.json` |
| laptop | registry:ui | A thin laptop. The pointer's height sets how far the lid stands open; the screen lights as it opens. | `npx shadcn@latest add https://isometric.buildlab.in/r/laptop.json` |
| bars | registry:ui | An isometric bar chart drawn from your data. The bar under the pointer lifts and reads its value. | `npx shadcn@latest add https://isometric.buildlab.in/r/bars.json` |
| steps | registry:ui | A staircase that reads as progress. A token rests on the current step and hops as the pointer walks it. | `npx shadcn@latest add https://isometric.buildlab.in/r/steps.json` |
| files | registry:ui | An upright folder of five sheets. As the pointer comes near the sheets rise; the nearest rises highest. | `npx shadcn@latest add https://isometric.buildlab.in/r/files.json` |
| cylinders | registry:ui | A database drawn as three stacked disks. The pointer's height parts the stack above the disk it picks. | `npx shadcn@latest add https://isometric.buildlab.in/r/cylinders.json` |
| parcel | registry:ui | A sealed box. Its flaps fold open as the pointer comes near, and a cube rises out. | `npx shadcn@latest add https://isometric.buildlab.in/r/parcel.json` |
| nodes | registry:ui | A network of a hub and eight nodes. A pulse runs the shortest route to the node nearest the pointer. | `npx shadcn@latest add https://isometric.buildlab.in/r/nodes.json` |
| cube | registry:ui | A three by three cube. The pointer's height picks a layer and moving across twists it; it settles on a quarter turn. | `npx shadcn@latest add https://isometric.buildlab.in/r/cube.json` |
| pc-case | registry:ui | A tower you can take apart: slide the glass panel off, lift the memory out, pull the graphics card, and press power to spin every fan. | `npx shadcn@latest add https://isometric.buildlab.in/r/pc-case.json` |
| heart | registry:ui | A heart cut from a slab, beating. Point at it to quicken the pulse; click to like it, and it fills and throws off a burst of cubes. | `npx shadcn@latest add https://isometric.buildlab.in/r/heart.json` |
| pulley | registry:ui | A block and tackle on a frame. Drag the rope's handle down and the load rises by the pull divided by the ratio, with the wheels turning as the rope runs. | `npx shadcn@latest add https://isometric.buildlab.in/r/pulley.json` |
| church | registry:ui | A small stone church: a nave under a tiled roof, buttresses between pointed windows, a rose window over arched doors, and a tower with an open belfry and a spi… | `npx shadcn@latest add https://isometric.buildlab.in/r/church.json` |
| reactor | registry:ui | A ring-core reactor: a glowing core inside ten coils. The coils charge as the pointer comes near and the ring turns; click to fire a pulse. | `npx shadcn@latest add https://isometric.buildlab.in/r/reactor.json` |
| block | registry:ui | One block you can mine, in nine materials. Each click cracks it; the last breaks it into fragments and drops an item, and the block grows back. | `npx shadcn@latest add https://isometric.buildlab.in/r/block.json` |
| chest | registry:ui | A wooden chest with an iron latch. Click to lift the lid on its hinge; what is inside floats up and turns. | `npx shadcn@latest add https://isometric.buildlab.in/r/chest.json` |
| torch | registry:ui | A torch set in a stone block. Its flame flickers and lights a ring around it; click to snuff it out in a curl of smoke, and again to light it. | `npx shadcn@latest add https://isometric.buildlab.in/r/torch.json` |
| tree | registry:ui | A block tree: a log trunk under a crown of leaves. It sways while the pointer is over it; click to shake a few leaves loose. | `npx shadcn@latest add https://isometric.buildlab.in/r/tree.json` |
| block-icon | registry:ui | A block as a small static icon in its material's tint, plus the recessed slot that holds one. Plain SVG, so it renders on the server. | `npx shadcn@latest add https://isometric.buildlab.in/r/block-icon.json` |
| hotbar | registry:ui | A row of nine slots. Click a slot, use the arrow keys, scroll over it, or press 1 to 9 anywhere on the page. | `npx shadcn@latest add https://isometric.buildlab.in/r/hotbar.json` |
| inventory | registry:ui | A grid of slots holding blocks and their counts. Click a slot, or move with the arrow keys. | `npx shadcn@latest add https://isometric.buildlab.in/r/inventory.json` |
| hearts-meter | registry:ui | Health as a row of pixel hearts, with halves. A heart that is lost blinks once. | `npx shadcn@latest add https://isometric.buildlab.in/r/hearts-meter.json` |
| xp-bar | registry:ui | Experience: a segmented bar with the level standing over its middle. | `npx shadcn@latest add https://isometric.buildlab.in/r/xp-bar.json` |
| world | registry:ui | A small isometric town where everything works: the church, a reactor in the square, a pulley yard, a PC, a garden, trees, chests and torches. Pan, zoom, and bu… | `npx shadcn@latest add https://isometric.buildlab.in/r/world.json` |
| iso-button | registry:ui | A button that stands on its own depth and sinks into it when pressed. | `npx shadcn@latest add https://isometric.buildlab.in/r/iso-button.json` |
| iso-card | registry:ui | A slab: a card standing on its own depth, composed like shadcn's Card. | `npx shadcn@latest add https://isometric.buildlab.in/r/iso-card.json` |
| iso-switch | registry:ui | A block that slides along a recessed groove. Built on Radix Switch. | `npx shadcn@latest add https://isometric.buildlab.in/r/iso-switch.json` |
| iso-tabs | registry:ui | A row of tiles: the chosen tile stands up and the rest are pressed flat. Built on Radix Tabs. | `npx shadcn@latest add https://isometric.buildlab.in/r/iso-tabs.json` |
| iso-slider | registry:ui | A rail with a cube riding it, with optional ticks. Built on Radix Slider. | `npx shadcn@latest add https://isometric.buildlab.in/r/iso-slider.json` |
| iso-toggle-group | registry:ui | A row of keys; a key that is on stays pressed down. Built on Radix Toggle Group. | `npx shadcn@latest add https://isometric.buildlab.in/r/iso-toggle-group.json` |
| iso-kbd | registry:ui | A keycap for shortcuts, which can be shown held down. | `npx shadcn@latest add https://isometric.buildlab.in/r/iso-kbd.json` |
| iso-badge | registry:ui | A small slab for status and counts. | `npx shadcn@latest add https://isometric.buildlab.in/r/iso-badge.json` |
| iso-progress | registry:ui | Progress as a row of blocks: filled blocks stand up, empty ones lie flat. | `npx shadcn@latest add https://isometric.buildlab.in/r/iso-progress.json` |
| iso-input | registry:ui | A recessed well: an input whose inner walls read as depth going into the page. | `npx shadcn@latest add https://isometric.buildlab.in/r/iso-input.json` |
| iso-grid | registry:ui | An isometric lattice of fine lines to put behind content, fading toward its edges. | `npx shadcn@latest add https://isometric.buildlab.in/r/iso-grid.json` |
| all | registry:item | Every Isometric figure and primitive in one install. | `npx shadcn@latest add https://isometric.buildlab.in/r/all.json` |

## For AI agents

```text
You are adding components from @isometric to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/isometric.md) for the component list.
2. Fetch the machine-readable index: https://isometric.buildlab.in/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: isometric).
```