BlankUI

Getting started

BlankUI copies components into your project, with a doc file next to each one and lint rules that keep agents on track.

npx blankui init
npx blankui add button dialog field

What init does

  • Adds styles/blankui.css (tokens and themes) and imports it after Tailwind.
  • Adds lib/utils.ts with the cn() helper and a components.json.
  • Sets up @blankui/eslint-plugin.
  • Writes a short BlankUI section into AGENTS.md (between <!-- blankui:start --> markers, so your own content is kept) and a CLAUDE.md that points to it.

Requirements

React 19 and Tailwind CSS v4, in a Next.js or Vite project. BlankUI does not support React 18 or Tailwind v3.

With the shadcn CLI

Every component is also a shadcn registry item, so this works too:

npx shadcn add https://blank.vageshwar.dev/r/button.json

For agents

  • llms.txt: an index of every component with a one-line description.
  • llms-full.txt: the rules and every component doc in one file.
  • https://blank.vageshwar.dev/docs/<name>.md: the raw doc for one component.

Components

Layout

Stack, Inline, Grid and Container. Use them for all spacing between elements.

Button

A clickable action. Supports variants, sizes, icon-only buttons, loading state and links.

Checkbox

A checkbox for a yes or no choice, or for picking several items from a list.

Field

Wraps one form control with a label, help text and an error message, and wires up the accessibility attributes.

Input

A single-line text input. Put it inside a Field for the label and errors.

Select

A dropdown for picking one option from a list. Put it inside a Field for the label and errors.

Textarea

A multi-line text input. Put it inside a Field for the label and errors.

Alert Dialog

A confirmation the user must answer, for destructive or important actions. Clicking outside does not close it.

Dialog

A modal window for a focused task, like editing a record. Blocks the page until closed.

Popover

A small floating panel anchored to a button, for extra controls or details. Does not block the page.

Sheet

A panel that slides in from an edge of the screen, for filters, settings, details or mobile navigation.

Tooltip

A short text hint shown on hover and keyboard focus. Includes its own provider.

Toast

A short message that appears for a few seconds after something happens, like "Saved". Built on sonner.

Card

A bordered surface that groups related content, with header, content and footer parts.

Table

A data table for rows of items with the same fields, like invoices or users.

Tabs

Switch between views of related content in the same place, like Account and Billing settings.