CLI

Copy component source into your project with `npx advui add`.

The CLI copies component source into your project so you can change anything. Dependencies between components (a Dialog needs IconButton, which needs Button…) are resolved automatically.

init

npx advui init
  • Detects Next.js, Expo, React Native or Vite and your package manager.
  • Writes advui.json (target folder, registry) and a tamagui.config.ts.
  • Installs the theme, icons, utils and Tamagui packages, and prints framework setup notes.

add

npx advui add button dialog
npx advui add --all
npx advui add select --overwrite

Files keep their relative layout (ui/components/button/Button.tsx), so internal imports work without rewriting. Existing files are never overwritten unless you pass --overwrite. advui.json records the version of each component you add and a hash of each file, so diff and update can tell your changes from upstream’s.

diff

npx advui diff
npx advui diff button

Compares your copies with the registry and says, for each file, whether it is unchanged, changed locally, changed upstream or changed in both. Then it prints a unified diff of upstream against your copy. Without names, it covers every component in advui.json.

update

npx advui update
npx advui update dialog --overwrite
  • Files only upstream changed are replaced; files only you changed are kept.
  • Files both sides changed get a three-way merge against the version you added, which the registry keeps.
  • Components that an updated one now needs are added, and new npm dependencies installed.

When your changes and upstream’s touch the same lines, update leaves that component as it is, lists the files and exits with code 1. Merge them by hand, or pass --overwrite to replace them with upstream’s.

Added with an older CLI?Components added by advui 0.14 or earlier are not recorded in advui.json. Name them (npx advui diff button) to compare them; update records them once they match upstream.

list

npx advui list

How the registry works

Every component has a metadata file. pnpm registry:build reads it, embeds the source files with a sha256 hash of each, and derives npm and component dependencies from import statements. The JSON is published at /r/index.json and /r/button.json. Each release also stays at /r/<version>/button.json, so update can merge against the version you added.

registry/button.json (excerpt)
{
  "name": "button",
  "type": "registry:component",
  "version": "0.14.0",
  "dependencies": ["@advui/icons"],
  "registryDependencies": ["spinner"],
  "files": [{ "path": "components/button/Button.tsx", "sha256": "…", "content": "…" }]
}
Edit this page on GitHub