Isometric

Overview

Isometric is a React library of isometric line figures and UI primitives by Abhishek Mallick. The drawings respond to the pointer and keyboard, objects can be taken apart (slide the panel off a PC, ring a church bell, haul a pulley), and buttons, cards and tabs stand on a drawn depth that they sink into when pressed. Everything installs as source with the shadcn CLI and is themed by existing tokens.

The project is at v0.2 and the registry lists 41 items, including an isometric engine, around two dozen figures, a block kit with game-style HUD pieces and 11 UI primitives built on Radix. A playground puts every object on one interactive town map, which also installs as a single component. It is MIT licensed.

Features

• Line figures: Skyline, rack, laptop, PC case, cylinders, parcel, nodes, cube, church, reactor, pulley, tree and more.
• Interactive parts: Figures answer clicks and the keyboard, and each reads out what it is doing.
• Block kit: Blocks, chest, torch, hotbar, inventory, hearts meter, XP bar and a buildable world.
• Depth UI primitives: Iso button, card, switch, tabs, slider, toggle group, kbd, badge, progress, input and grid.
• Accessibility: UI primitives are built on Radix, so keyboards and screen readers work as expected.
• Data-driven figures: Figures such as bars and steps follow their controls and data.
• Install everything: @isometric/all adds the full set at once, and SVGs can be downloaded.

Tech stack

• React
• Tailwind CSS
• Radix UI
• SVG

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @isometric/component-name