Bring Minecraft's
interface into React.
Pixel-accurate GUI components distributed the shadcn way: copy the source, inject data, verify under two SSR frameworks. GUI nine-slices are redrawn; item and status icons come from vanilla Minecraft 26.3 assets.
$npx shadcn add @tennantite/buttonv0.1.0: copy component source with one command; npm install is documented on the installation page.
Source you can own
Every component is its own directory. Change whatever line you need.
Token-driven
Colors, type, spacing and shadows live in @theme. Override variables to reskin.
SSR ready
Verified with Next.js App Router and TanStack Start; no browser APIs during render.
Pixel-accurate
Sampled from vanilla GUI coordinates: 1 GUI px = 2 CSS px, nine-slice textures stay crisp.
L1 · Primitives
Start with one import
Primitives depend only on Base UI and tokens. They read no game state and hide no global styles; copying one component does not drag in the whole framework.
import { Button, Panel } from "@tennantite/ui";
export function Start() {
return (
<Panel className="p-12">
<Button variant="success">Start game</Button>
</Panel>
);
}L3 · Blocks
Full screens, ready to copy
24 container screens, 9 mod machine screens and 3 menu screens. Every Block runs as-is, or you can take it apart and compose the pieces yourself.
Copy. Paste. Make it yours.
Start with installation, or open a complete container screen first. Every texture, icon and font can be replaced.
$npx shadcn add @tennantite/button