Getting started

Introduction

Blank 3 is a code-first component library for React 19 and Tailwind v4, installed with the shadcn CLI.

Blank is a set of components and blocks you install into your own project with the shadcn CLI. The CLI writes the source into your repo and from then on the files are yours: no runtime package, no version to keep in step, no wrapper to fight when a design needs something the component did not plan for.

Blank 3 is the first code-first release. Earlier versions were a Figma kit with Framer and Webflow libraries; those stay available, and the components here are drawn from the same design language.

Free and Pro

Free is every primitive (buttons, fields, menus, dialogs, tables, charts), the free animations and a few starter blocks. MIT licensed, served from the public @blank registry.

Pro adds the larger pieces: animated marketing components, device mockups, and blocks for landing pages and product screens. A one-time licence gives you a key for the private @blank-pro registry; the same CLI installs both. Pro previews on this site are fully live — only the source is withheld.

What makes it different

It stays compatible. Every component keeps shadcn's exported names, part structure and prop names. A block copied from anywhere in the shadcn ecosystem drops in and renders the way its author meant — including variant="secondary" and variant="outline", which mean the same thing here as upstream.

Primitives stay primitive. Input is an input. Labels, descriptions and errors come from Field; icons and buttons come from InputGroup. There is one way to build a labelled control, and it is the same for every control.

One accent, two roles. primary is the action colour, brand is the identity colour used for focus, selection and checked state. Components pick a role; they never reach into the palette, so a theme is one file.

Built for agents too. Every page has a Copy prompt button, the whole catalog is indexed at /llms.txt, and the registry works with the shadcn MCP server. See AI and MCP.

How it is put together

The file in packages/ui/src is the file the CLI writes into your project — same imports, same lines, no rewriting step in between. This site imports those same files, so what is documented and what ships cannot drift apart.

Next

npx shadcn@latest add @blank/button

Start with Installation to register the registry and add the tokens, or browse the component gallery.