General

CLI

writes UI Blocks straight into your project. The files land in your repository as ordinary source code: edit them, rename them, delete what you do not need. Nothing is loaded from a package at runtime, so a block never changes under you.

When you need it

You want	Use
Components such as Button, Data Grid or Sidebar	npm: . No CLI needed.
A whole screen: sign-in, billing, a dashboard page	The CLI:
A complete app to start from	Templates

Components stay in the package so you get fixes with every update. Blocks are starting points you are meant to change, so they become your code.

Quick start

Run these once in your project root:

bash

npx @wunderui/cli init
npx @wunderui/cli login WUI-XXXX-XXXX-XXXX
npx @wunderui/cli add auth/sign-in

writes , checks your license key and stores it, and writes every screen of the sign-in block into .

Commands

Command	What it does
	Writes wunderui.json: where blocks land and which import alias points there.
	Checks your license key and stores it in ~/.wunderui/config.json.
	Lists every block by category. Add --screens to see the screens inside each block.
	Writes a block's source into your project. The id is category/block, for example data/kanban.

works without a key; the previews are public on UI Blocks. needs a WunderUI Pro license.

Options for add

Option	Effect
	Writes one screen instead of the whole block.
	Writes somewhere other than the folder in wunderui.json.
	Replaces files that already exist. By default they are skipped, so your edits are safe.
	Prints what would be written, without writing anything.
	Uses this license key instead of the stored one.

bash

npx @wunderui/cli add auth/sign-in --screen 02-centered-card --dry-run

wunderui.json

json

{
  "componentsDir": "components/wunderui",
  "alias": "@/components/wunderui",
  "registry": "https://wunderui.com"
}

Blocks import a few shared helpers. The CLI rewrites those imports to your as it writes, so the alias must point at . If your maps to , set to and keep the alias as .

License key and CI

The CLI looks for a key in this order:

Source	Use it for
	A one-off command
	CI and shared machines. Store it as a secret.
	Your own machine, written by login

Keep the key private

Do not commit the key or paste it into a README. In CI, read it from the secret store as .

After adding a block

A block uses the component package and two small dependencies. The CLI prints the exact list; usually it is:

bash

npm install @wunderui/react lucide-react cn

and the stylesheet from Installation, if your project does not have it yet. Then import the screen like any other component in your app.

The CLI itself is MIT-licensed. The blocks it writes are covered by the WunderUI Pro license.