Installation

Requirements

• React 19
• Tailwind CSS v4
• The shadcn CLI, version 3 or newer (namespaced registries)

One step

In a project with React and Tailwind v4, one command sets everything up: it writes components.json with the @blank and @blank-pro registries, merges the token sheet into your stylesheet and adds cn() to lib/utils.

npx shadcn@latest init https://useblank.design/r/blank.json

Then add components by name:

npx shadcn@latest add @blank/button @blank/dialog

The sections below do the same by hand, for a project that already has its own components.json.

Register the registry

Add Blank to components.json. The {name} placeholder is filled in by the CLI for each item:

{
"registries": {
  "@blank": "https://useblank.design/r/{name}.json"
}
}

Pro buyers add a second entry for @blank-pro — see Pro access.

Add the tokens

Install the theme once. It brings the palette, the semantic tokens and the radius scale into your global stylesheet:

npx shadcn@latest add @blank/theme

Everything a component references is defined there, so a component never depends on your Tailwind config. To change colours, edit the semantic layer — see Theming.

Add the fonts

Blank is set in Geist and Geist Mono. The token sheet reads them from two variables, --font-geist-sans and --font-geist-mono, so load both with next/font under those names and put the classes on <html>:

import { Geist, Geist_Mono } from "next/font/google"

const sans = Geist({ subsets: ["latin"], variable: "--font-geist-sans" })
const mono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" })

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
  <html lang="en" className={`${sans.variable} ${mono.variable}`}>
    <body className="font-sans antialiased">{children}</body>
  </html>
)
}

Outside Next.js, install the geist package or self-host the files and set the two variables on :root yourself.

Add a component

npx shadcn@latest add @blank/button

The CLI writes components/ui/button.tsx, installs the npm packages that file imports, and pulls in any Blank components it depends on. From that point the file is yours to edit.

You can also install by URL, without touching components.json:

npx shadcn@latest add https://useblank.design/r/button.json

Dark mode

Components switch theme with a dark class on <html>. With Next.js, the usual setup is next-themes:

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>