Installation

noiceui is a shadcn-compatible registry. Components are copied into your project as source you own. There is no npm package to install, no version to track, and nothing to upgrade.

Check the prerequisites

You need three things before a component will render correctly.

React + Tailwind v4

Any framework that runs React 19 with Tailwind CSS v4.

A cn() helper

Lives at @/lib/utils and merges conflicting classes.

Design tokens

The CSS variables in globals.css that theme every component.

Add cn() and the tokens

If your project does not have a cn() helper yet, add it. Every shipped component imports it.

// lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
 return twMerge(clsx(inputs));
}

Then copy the token block from src/app/globals.css. It defines the light palette, the .dark overrides, and the Tailwind v4 theme mapping that connects them to utility classes. The theming guide explains what each token controls.

Install a component

Pick a package manager, then run the command. It writes the source straight into components/ui/.

bash

npx shadcn@latest add https://ui.noicess.fun/r/button.json

Use it

Import from @/components/ui. Variants and sizes are typed, so your editor autocompletes them.

tsx

import { Button } from "@/components/ui/button";

export function Page() {
 return (
 <div className="flex gap-2">
 <Button>Get started</Button>
 <Button variant="outline">Documentation</Button>
 </div>
 );
}

Every component page has a live preview, a viewport switcher, the full prop table, and a Source tab with the exact code the CLI installs.

Next steps

Make it yours

Swap the tokens once and every component follows.

Let your agent install

Wire up MCP and describe what you want built.

Registry endpoint: https://ui.noicess.fun/r/{name}.json