@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.
Install this registry
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 curl -s https://isometric.buildlab.in/r/registry.json Components
41 totalThe 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Experience: a segmented bar with the level standing over its middle.
npx shadcn@latest add https://isometric.buildlab.in/r/xp-bar.json 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 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 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 A block that slides along a recessed groove. Built on Radix Switch.
npx shadcn@latest add https://isometric.buildlab.in/r/iso-switch.json 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 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 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 A keycap for shortcuts, which can be shown held down.
npx shadcn@latest add https://isometric.buildlab.in/r/iso-kbd.json A small slab for status and counts.
npx shadcn@latest add https://isometric.buildlab.in/r/iso-badge.json 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 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 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 Every Isometric figure and primitive in one install.
npx shadcn@latest add https://isometric.buildlab.in/r/all.json