Base UI (Angular)

Frequently asked questions

Canonical answers for Base UI (Angular) at base-ui.net — the CLI-first Angular + Tailwind component library. Same wording as the homepage, pricing page, and llms.txt.

Identity

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

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.

Angular teams that want Tailwind-native, signal-first, zoneless-ready components they can modify, without a runtime dependency on a vendor package.

Pricing and licensing

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

A one-time Pro license is $99. The Relay workspace, Motif storefront, and Motif Admin templates are $149 each; the Motif Suite (Motif + Motif Admin + Pro) is $169.

No. Pro is a one-time license per application; no recurring fees. Lifetime updates are included — re-run npx base-ui-cli update to pull newer versions.

Yes — free-tier components are production-ready with no account or license.

Server-side at download time only. Copied component source contains no license checks, telemetry, or phone-home code.

Technical

Node 22+, a modern standalone Angular app (Angular 22+), and Tailwind CSS v4. Works with standard Tailwind — no custom theme required.

npx base-ui-cli init once per project, then npx base-ui-cli add <name>. Omit the name in a terminal to pick from the catalog (filter, then type to select). --yes and CI need explicit names. Components land in src/app/components/<name>/ by default and are yours.

Run npx base-ui-cli doctor. It checks base-ui.json, the Angular workspace, @angular/cdk, Tailwind v4 @source paths, the base-ui.css import, icon sprites, and the components directory — read-only, nothing is written.

npx base-ui-cli diff shows upstream changes per file. update applies them: untouched files always take upstream; files you edited while upstream stayed the same are skipped unless you pass --overwrite-local; files both sides changed are conflicts — prompt (Merge first), --yes to skip, --force to take upstream, or --merge for a 3-way merge using .base-ui/snapshots. Tracked via base-ui-lock.json.

Yes. The docs site prerenders every catalog route to static HTML, and a blocking CI job fails the build if any route stops rendering.

Yes — class-based dark mode on <html>, components pair light/dark classes (bg-white dark:bg-slate-800).

Open Theme Studio at https://base-ui.net/theme/ or the docs customizer, pick a preset or hue, then copy the Tailwind v4 @theme block into src/tailwind.css. color="primary" keeps using blue-* tokens.

Components are keyboard-navigable with ARIA and focus states. Overlay keyboard specs cover combobox, menus, dialogs, and data-table; CI runs axe-core on those overlays when open. An Accessibility Conformance Report is published at /accessibility/.

28 form controls implement ControlValueAccessor, including mention-input, file-upload, and password-input. The same hosts bind Angular 22 [formField]. See /cookbooks/signal-forms/.

Yes. Free table (npx base-ui-cli add table) styles native thead, tbody, tfoot, and caption. Pro data-table adds server paging, sorting, selection, resize, and cell templates via ng-template baseTableCell. See /base-elements/table/ and /base-elements/data-table/.

Yes. Project ng-template baseTableCell="columnKey" into base-data-table for badges or row actions. Combobox and custom-select take ng-template baseComboboxOption and baseSelectOption. Default cells still interpolate row[column.key]. See /base-elements/data-table/ and /cookbooks/invoice-table/.

Yes. Call provideBaseUiI18n() in app.config.ts to override chrome strings (empty states, paginator, dialog close). Per-instance inputs like emptyMessage still win. Layout marketing copy is not in this dictionary. See /getting-started/#i18n.

Call provideBaseUI({ iconPath: 'assets/icons.svg', filledIconPath: 'assets/icons-filled.svg' }) in app.config.ts. Per-instance [path] and [filledPath] on base-icon still win. defaultSize applies only when [size] and w-*/h-* classes are omitted. Install: npx base-ui-cli add config (also pulled in by icon).

Yes. data-table, custom-select, and dialog ship ComponentHarness classes copied with the component. Load with TestbedHarnessEnvironment.loader(fixture). Dialogs need documentRootLoader because the overlay is appended to body. See /getting-started/#testing.

Yes. Toast is free: inject ToastService and call success, error, or show. Multiple toasts stack like a deck; hover or focus expands the stack; swipe dismisses; hover pauses auto-dismiss. prefers-reduced-motion falls back to a static list. Install with npx base-ui-cli add toast. Do not place base-toast-container in templates.

390 icons, shipped as SVG sprites, available in line and filled variants.

Standalone components, signals, new control flow, zoneless-ready; no zone.js dependency. Native inputs and CVA controls bind Angular 22 signal forms via [formField].

Yes. Bind httpResource.value() to base-data-table (serverSide), combobox (filterMode none), or virtual-scroll. Cookbook: /cookbooks/http-resource/.

Yes. Copy-in components have no vendor UI runtime package, so @defer splits only the widget you wrap. Use base-skeleton as the placeholder. Cookbook: /cookbooks/defer/.

Yes. Dialog boxes set view-transition-name: base-dialog. Wrap DialogService.open() in document.startViewTransition(), or add withViewTransitions() to the router. Cookbook: /cookbooks/view-transitions/.

Comparison

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.

Material is an npm component library with Google's Material Design look. Base UI (Angular) copies Tailwind-styled source into your repo — edit the markup directly, no ::ng-deep overrides, no theme API to fight.

PrimeNG is a comprehensive npm library. Base UI (Angular) is copy-in: you own every file, and the CLI tracks upstream updates. Choose Base UI when design control, Tailwind, and auditable source matter.

NG-ZORRO is Ant Design as an npm library. Base UI (Angular) copies Tailwind-styled source into your repo. Pick NG-ZORRO for the Ant Design language at enterprise scale; pick Base UI when you want to edit Tailwind markup and own every file.

Taiga UI is a modern Apache-2 npm kit with strong accessibility and CSS-variable theming. Base UI (Angular) is copy-in Tailwind. Pick Taiga for a full OSS npm library; pick Base UI when Tailwind-native ownership, CLI diff/update, and MCP installs matter.

Spartan is a shadcn port: Helm styles are copied in; Brain primitives stay on npm as @spartan-ng/brain. Base UI (Angular) copies behavior and Tailwind markup into your repo — there is no runtime UI package. Choose Spartan for headless Brain + shadcn visuals; choose Base UI for full copy-in source, CLI updates, and Pro blocks.

Tailwind UI is a React/Vue/HTML markup kit; Flowbite ships HTML plus community ports. Base UI (Angular) components are native Angular — signals, form integration, SSR, real TypeScript behavior — installed as source you own, not markup snippets to paste.

Component source you install is fully open on your disk; the library is commercially licensed (free tier + one-time Pro). The CLI's free tier requires no account.

Adoption

npx base-ui-cli init → configure Tailwind v4 → npx base-ui-cli add card (or add with no name to pick from the catalog) → done in minutes. Cookbooks and StackBlitz starters at /cookbooks/ and /getting-started/.

The docs site is the live catalog: each component page shows a rendered preview, Preview/Code examples, and often a knob playground with Open in StackBlitz. The free dashboard starter is at github.com/lussos/base-ui-free-dashboard; Motif demos run at commerce-template.base-ui.net and dashboard-template.base-ui.net.

Yes. npx -y base-ui-ng-mcp is stdio for Cursor, Claude (Code/Desktop), Kimi, VS Code, Windsurf, and other local hosts. ChatGPT and Gemini chat apps use Streamable HTTP: npx -y base-ui-ng-mcp --http --read-only (catalog tools) or local --http without --read-only so add/init/update can see the project. Pro add uses BASE_UI_LICENSE_KEY on the MCP process. Editors that skip MCP can copy the Cursor rule and snippet pack from https://base-ui.net/getting-started/#editor-rules.

Near zero. Installed code is in your version control with no runtime dependency; deleting the CLI changes nothing about your app.

Yes — a free Figma Community file with the component kit at https://www.figma.com/community/file/1662825988518656661.

Yes — Relay (team workspace), Motif (storefront), Motif Admin (operations dashboard), and the free open-source dashboard starter (base-ui-free-dashboard). Each paid template includes a Base UI Pro license.

GitHub issues at https://github.com/Base-ui-ng/base-ui.