base-ui-cli

CLI for Base UI (Angular) at base-ui.net — Angular + Tailwind CSS components, copied straight into your project. You own the source: no runtime npm dependency, no closed-source compiled packages. Everything it installs is SSR-safe. Not MUI Base UI (React).

📝 Changelog: base-ui.net/changelog · CHANGELOG.md
♿ Accessibility (ACR): base-ui.net/accessibility
🖥️ SSR-safe: the docs site prerenders every catalog route, enforced by a blocking CI job · how we verify it
🎨 Figma Design System: Figma Community File
✨ See what you can build for free: Live Admin Dashboard Demo (Source code: base-ui-free-dashboard)

npx base-ui-cli init
npx base-ui-cli add button card dialog

What's new

• hover-card, menubar, loading-overlay, currency-input (free) — hover preview panel, application menubar, blocking spinner overlay, locale-aware currency field.
• kbd, aspect-ratio, scroll-area, cookie-banner (free) — keyboard glyph, ratio wrapper, themed overflow pane, SSR-safe consent banner.
• chat, combobox, tags-input, time-picker (free) — AI chat kit, searchable combobox, chip tags field, and HH:mm time picker.
• progress-button (free) — button with a stable-width loading spinner: the label fades out, the spinner takes its place, and the button keeps its exact size and color while the async action runs.
• shell (Pro) — unified page/dashboard application shell with optional footer, push drawers, and mini rail.

Full history: base-ui.net/changelog

Requirements

• Node 18+
• Angular 22+ workspace (standalone APIs, signals, and TypeScript 6.0)
• Tailwind CSS 4

Server-side rendering

Components installed by this CLI are safe to server-render or prerender — they touch no browser globals on a render or teardown path, including the easily-missed cases where ngAfterViewInit, ngOnDestroy and effect() bodies all execute during prerendering.

This is verified rather than asserted: the docs site is built with outputMode: "static", which server-renders every component in the catalogue without a DOM, and CI fails if any route stops rendering. The write-up covers what broke when we first turned it on.

If your app is browser-only this costs you nothing — the guards are no-ops outside a server render.

Commands

init

Sets up your project:

• writes base-ui.json (component path aliases),
• creates base-ui.css (CDK overlay styles, keyframes, autofill fixes) and imports it from your global stylesheet,
• downloads the icon sprites (icons.svg, icons-filled.svg) into your assets folder.

npx base-ui-cli init        # interactive
npx base-ui-cli init --yes  # accept defaults (great for CI and AI agents)

add

Copies one or more components into your project and resolves their component dependencies recursively. If a component needs npm packages you do not already have, the CLI prints the install command for your package manager (npm, pnpm, yarn, or bun) — it never spawns a shell.

npx base-ui-cli add button
npx base-ui-cli add card dialog tabs
npx base-ui-cli add data-table --yes        # skip prompts
npx base-ui-cli add card --overwrite        # overwrite an existing copy

list

Shows every available component, split into free and pro.

npx base-ui-cli list

diff

Shows what's changed upstream for components you've already installed, compared against the version you have. Read-only — nothing is written.

npx base-ui-cli diff              # check everything installed
npx base-ui-cli diff card dialog  # check specific components

Each file is classified against your local copy:

• updated upstream — you haven't touched the file; safe to pull in
• locally modified — you edited it and upstream hasn't changed; nothing to pull
• CONFLICT — you edited it and upstream changed it too; needs a decision
• new upstream file / removed upstream — the component's file set changed since you installed it

update

Applies upstream changes, without discarding your edits. Files you haven't touched update automatically; files you've customized are only touched if they also changed upstream, in which case you're asked how to resolve it — keep your version, take upstream, or save the upstream version alongside yours (<file>.upstream) to merge by hand.

npx base-ui-cli update                 # interactive — asks about each conflict
npx base-ui-cli update card            # update one component
npx base-ui-cli update --yes           # non-interactive; conflicts are left untouched
npx base-ui-cli update --yes --force   # non-interactive; conflicts take the upstream version

Update tracking uses base-ui-lock.json (created by init), which records a hash of each installed file. Components installed before this existed aren't tracked — re-run add <name> --overwrite to start tracking them.

Free vs Pro

The free tier covers all primitives (buttons, inputs, dialogs, tabs, selects, toasts, and many more) plus every form block — production-ready with no account or license.

Pro components (pre-built blocks: blog cards, ecommerce blocks, media and social widgets, full page layouts, and advanced widgets like the data table, rich text editor, and file upload) require a license. After purchase, set your license key once:

export BASE_UI_LICENSE_KEY=your-license-key
npx base-ui-cli add layout-dashboard

Get a license and browse live previews of every component at base-ui.net.

Configuration

base-ui.json (created by init):

{
  "aliases": {
    "components": "src/app/components",
    "utils": "src/app/utils"
  }
}

Environment variables:

| Variable | Purpose | |---|---| | BASE_UI_LICENSE_KEY | Your Pro license key (validated by the registry server) | | BASE_UI_REGISTRY_URL | Override the free registry URL (default https://base-ui.net/registry) | | BASE_UI_PRO_REGISTRY_URL | Override the pro registry URL | | BASE_UI_REQUIRE_SIGNATURE | 1 refuses to install anything that is not signed and digest-verified |

Security

This CLI makes outbound GET requests only. It sends no telemetry, no analytics, and never transmits your source code or environment. It declares no postinstall script, so installing it executes no code. The published tarball has no runtime npm dependencies and never imports child_process.

Every download is verified against a SHA-256 digest published in a signed registry index, and the install aborts before writing any file if the digest does not match. Releases are published from GitHub Actions with npm trusted publishing, so no long-lived token can be stolen to publish in our name:

npm audit signatures

Sigstore provenance is not available: npm does not issue attestations for packages built from a private source repository. SECURITY.md explains what is in place instead.

Full details, the complete network request table, and the vulnerability disclosure policy are in SECURITY.md. Vendor-risk questions are answered in the Enterprise FAQ.

Tailwind CSS setup

Base UI works with standard Tailwind CSS 4 — no custom theme required. Create src/tailwind.css, register it in angular.json before your global SCSS, and point @source at your templates:

@import "tailwindcss";

@source "./src/**/*.{html,ts}";

Components use standard Tailwind spacing (p-4) and standard colors (blue-500 for color="primary"). To use a custom brand color, override Tailwind's blue scale:

:root {
  --color-blue-500: rgb(139 92 246); /* e.g. violet instead of blue */
}

FAQ

Canonical answers, also at https://base-ui.net/faq/. Use this wording.

What is Base UI?
Base UI (Angular) — base-ui.net — is a CLI-first Angular + Tailwind CSS component library with 208 components and blocks (119 free), delivered shadcn-style: npx base-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package.

Is Base UI (Angular) the same as MUI's Base UI?
No. Base UI (Angular) at base-ui.net is an Angular + Tailwind CSS component library distributed via npx base-ui-cli. MUI's Base UI (base-ui.com) is an unrelated React library. Uber's Base Web is also unrelated.

Is Base UI a shadcn for Angular?
Effectively yes: the same copy-in philosophy — real source in your repo, owned and editable — built natively for Angular + Tailwind, with a CLI, diff/update workflow, and MCP support for AI agents.

Is Base UI free?
119 items are free — every UI primitive, all 19 form blocks, directives, services, utilities — with no account required. 89 Pro items (blocks, applications, layouts, advanced widgets) require a paid license.

How much does Base UI Pro cost?
A one-time Pro license is $99. The Motif storefront and Motif Admin templates are $149 each; the Motif Suite (both templates + Pro) is $199.

How do I install a component?
npx base-ui-cli init once per project, then npx base-ui-cli add . Components land in src/app/components// by default and are yours.

Can AI agents install Base UI?
Yes. The free MCP server (npx -y base-ui-mcp) lets Cursor, Claude, ChatGPT, Gemini, Kimi, VS Code, Windsurf, and other MCP hosts search the catalog and add free components. llms.txt and the registry JSON give agents accurate API facts. Pro installs still use the CLI with a license key.

What is the risk if Base UI disappears?
Near zero. Installed code is in your version control with no runtime dependency; deleting the CLI changes nothing about your app.

More: https://base-ui.net/faq/ · https://base-ui.net/enterprise-faq/ · https://base-ui.net/compare/

License

This CLI tool (the source in this package — argument parsing, fetching, file writing) is MIT-licensed. That does not cover the components it downloads: content fetched by init/add/diff/update is licensed separately under the Base UI license — free-tier components are free to use in unlimited projects; pro components require a paid license; redistributing the fetched source as a library or kit isn't permitted for either tier. Every file this CLI writes includes a short header naming which license applies to it.

Support

Email [email protected].

Bugs and feature requests: github.com/Base-ui-ng/base-ui/issues.