sh4dcnv2 · atlas
← libraries

@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.

41 components react shadcn-cli

Install this registry

shadcn (npm) npx shadcn@latest add https://isometric.buildlab.in/r/registry.json
pnpm pnpm dlx shadcn@latest add https://isometric.buildlab.in/r/registry.json
bun bunx shadcn@latest add https://isometric.buildlab.in/r/registry.json
fetch registry curl -s https://isometric.buildlab.in/r/registry.json

Components

41 total
Isometric Engine 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 ui

A small slab for status and counts.

npx shadcn@latest add https://isometric.buildlab.in/r/iso-badge.json
Iso Progress 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 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 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
Everything item

Every Isometric figure and primitive in one install.

npx shadcn@latest add https://isometric.buildlab.in/r/all.json