Getting started
zeroUI is a dark-only component library with a strong game-UI look. It installs the shadcn way: the code lands in your project, yours to change.
Before you start
A project already set up for shadcn (components.json) on Tailwind CSS v4 and React 19. zeroUI is built on Base UI, not Radix; the components bring it with them. It is tested on Next.js.
1. Add the namespace
Once per project, tell shadcn where @zeroui items come from:
pnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.json2. Add components
pnpm dlx shadcn@latest add @zeroui/button @zeroui/input @zeroui/selectThe first component also brings the foundation: the tokens, the motion and the slab are written into your stylesheet, cn and the motion timings land in lib/zero/, and Montserrat is loaded in your layout. Components land in components/zero/.
3. Go dark (optional)
zeroUI has no light theme. If the rest of your project uses shadcn's variables, this points them at zeroUI's colours, in light mode and dark alike, so the whole page matches:
pnpm dlx shadcn@latest add @zeroui/theme4. The true italic
zeroUI's labels are heavy italics. shadcn loads Montserrat upright only, so the italic is drawn by the browser until you ask for the real one where your layout loads the font:
const montserrat = Montserrat({ subsets: ["latin"], variable: "--font-montserrat", style: ["normal", "italic"],});The look, in short
Everything is drawn from a slab: a flat block cut on one slant (14°) and wearing a thick ink outline. Corners are cut, never rounded; things are lifted by outline, never by shadow. One fluorescent lime marks what is active, one yellow frame marks what has focus.
Motion is a small set of named timings shared by every component: a fast press and a springing release, a slide for the tab slab, a reveal and a quicker dismiss for popups. It all stands still when the system asks for reduced motion.
Start with the Button.