Installation
Three steps: a Next.js app with Tailwind CSS 4, the GetUrUI registry in components.json, and the theme tokens. Then every item is one command away.
Requirements
- React 19 and Next.js 15 or later (Vite and Remix work too — anything shadcn supports).
- Tailwind CSS 4.
- A
components.json. If you don't have one, runnpx shadcn@latest init.
Add the registry
Add the GetUrUI namespace to the registries field of components.json:
1{
2 "registries": {
3 "@geturui": "https://geturui.com/r/{name}.json"
4 }
5}
Install the theme
The theme item writes app/geturui.css with every colour, radius, shadow and easing token, plus the Tailwind @theme mappings that make classes like bg-surface and text-volt-ink work.
Then import it right after Tailwind in your global stylesheet:
1@import "tailwindcss";
2@import "./geturui.css";
Dark is the default theme. Set data-theme="light" on <html> for light — see Theming.
Fonts
GetUrUI uses Bricolage Grotesque for display type, Geist for text and Geist Mono for code. With next/font:
1import { Bricolage_Grotesque, Geist, Geist_Mono } from "next/font/google";
2
3const display = Bricolage_Grotesque({ variable: "--font-bricolage", subsets: ["latin"] });
4const sans = Geist({ variable: "--font-geist", subsets: ["latin"] });
5const mono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });
6
7export default function RootLayout({ children }: { children: React.ReactNode }) {
8 return (
9 <html lang="en" data-theme="dark" className={`${display.variable} ${sans.variable} ${mono.variable}`}>
10 <body>{children}</body>
11 </html>
12 );
13}
Your first component
1import { Button } from "@/components/ui/button";
2
3export default function Page() {
4 return <Button trailing="arrow">Browse components</Button>;
5}
Dependencies (motion, lucide-react) and other GetUrUI items a component imports are installed for you.
Without the CLI
Every docs page has a Manual tab with the dependency command and the full source. Copy the files into the paths shown in their headers. You need cn() in lib/utils.ts:
1import { clsx, type ClassValue } from "clsx";
2import { twMerge } from "tailwind-merge";
3import { pageSeo } from "@/lib/seo";
4
5export function cn(...inputs: ClassValue[]) {
6 return twMerge(clsx(inputs));
7}