Base UI (Angular)

August 23, 2026 · View on GitHub

Community hub. Star this repository, open issues, and follow the changelog. Component source is not stored here — install with npx base-ui-cli add button from base-ui.net.

Base UI (Angular) — Angular + Tailwind Component Library

Base UI (Angular) — base-ui.net — is a CLI-first Angular + Tailwind CSS component library: 208 components and blocks (119 free, 89 Pro), 390 icons, and 17 full page layouts — standalone, zoneless, signal-based and SSR-safe, delivered shadcn-style: npx base-ui-cli add copies the source into your project and it's yours. Not MUI Base UI (React).

📚 Documentation & live previews: base-ui.net
📝 Changelog: base-ui.net/changelog · CHANGELOG.md · Issues
♿ Accessibility (ACR): base-ui.net/accessibility · npm run test:a11y
🖥️ SSR-safe: the docs site prerenders every catalog route, enforced by a blocking CI job · how we verify it
🤖 AI agents (MCP): base-ui.net/getting-started#ai-agents-mcp · base-ui-mcp · why copy-in UI works better with LLMs
🎨 Figma Design System: Figma Community File
✨ See what you can build for free: Live Admin Dashboard Demo (Source code: base-ui-free-dashboard)

🚀 Quick Start (Free Tier)

The free tier is production-ready with no account or license: all primitives (buttons, cards, dialogs, hover cards, menubars, inputs, currency fields, selects, tabs, toasts, tooltips, and more) plus all 19 form blocks (login, signup, checkout, billing, wizard, …).

1. Initialize your project

npx base-ui-cli init

This writes base-ui.json, creates base-ui.css (CDK overlay styles, keyframes, autofill fixes) imported from your global stylesheet, and downloads the icon sprites into your assets folder. Use --yes to accept defaults non-interactively.

2. Configure Tailwind CSS

Base UI works with standard Tailwind CSS 4 — no custom theme file required.

Install Tailwind CSS 4 and PostCSS (installation guide).
Create src/tailwind.css, register it in angular.json before global SCSS, and point @source at your templates:

@import "tailwindcss";

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

Components use standard Tailwind spacing (e.g. p-4) and standard colors (blue-500 for color="primary").

Optional — custom brand color: override Tailwind's blue scale in :root:

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

Use the demo app's theme customizer to export a full 50–950 scale. Brand, radius, background, font, and density persist in the demo (localStorage) and can be shared with ?theme=violet&radius=0.75&bg=zinc&font=inter&density=compact.

3. Add components

npx base-ui-cli add button card dialog

Component dependencies are resolved recursively, and missing npm packages are installed with your package manager automatically. Run npx base-ui-cli list to see everything that's available.

Later, npx base-ui-cli diff shows what's changed upstream for components you've already installed, and npx base-ui-cli update pulls those changes in — automatically for files you haven't touched, interactively (keep / take upstream / save side-by-side) for anything you've customized that also changed upstream. See base-ui-cli for details.

4. Import in your Angular app

All components are standalone — import them from your local components folder:

// app.component.ts (standalone)
import { CardComponent } from './components/card/card.component';
import { BaseButtonDirective } from './components/button/button.directive';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CardComponent, BaseButtonDirective],
  template: `...`,
})
export class AppComponent {}

💎 Base UI Pro

Pro components are the pre-built blocks — blog and article cards, ecommerce blocks, media and social widgets, 15 full page layouts — plus advanced widgets (data table, date pickers, command palette, mega menu, file upload, multi-select, rich text editor, crop image, product gallery, tree, mention input, splitter).

After purchasing a license at base-ui.net, set your license key once and add pro components with the same CLI:

export BASE_UI_LICENSE_KEY=your-license-key
npx base-ui-cli add layout-dashboard blog-card-gradient-hero

The key is validated server-side by the pro registry on every fetch. In CI, set BASE_UI_LICENSE_KEY as a secret.

🛍️ Templates

Templates are complete, production-grade applications built on Pro — every route wired up, shipped as source you own. Each bundle includes a Base UI Pro license.

Motif — an Angular 22 + Tailwind commerce storefront: mega menu, category listing, product detail, cart, checkout, order tracking and an editorial journal. $149 including Pro. Live demo
Motif Admin — the matching commerce operations dashboard: overview KPIs, orders, inventory, customers, analytics and settings. $149 including Pro. Live demo
Motif Suite — both templates + one Pro license for $199 (save $99 vs buying separately).

📦 What's included

Category	Free	Pro
UI primitives	50+ (buttons, inputs, dialogs, hover cards, menubars, currency, kbd, tabs, calendar, toasts, …)	data table, date pickers, command palette, mega menu, file upload, multi-select, rich text editor, crop image, product gallery, tree, mention input, splitter
Form blocks	all 19 (login, signup, checkout, billing, wizard, …)	—
Blocks & widgets	—	blog/article cards, ecommerce blocks, media + social widgets
Page layouts	—	15 (dashboard, kanban, inbox, docs, admin table, …)
Directives, services, utils	all	—
Icons	390 SVG sprite icons	—
Templates	—	Motif storefront + Motif Admin dashboard ($149 each, or Motif Suite $199)

📋 Requirements

Node.js 22+
Angular 22+
Tailwind CSS 4.x

Server-side rendering

Components are safe to server-render or prerender. Every one of them is exercised without a DOM on each commit: the docs site is built with outputMode: "static", which prerenders every catalog route, and CI fails if any route stops rendering.

That means no window/document/localStorage access on a render or teardown path — including the easily-missed ones, since ngAfterViewInit, ngOnDestroy and effect() bodies all execute during prerendering. The full write-up covers what broke when we turned it on.

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

🤖 AI / LLM Reference

For AI agents and LLM-assisted development:

MCP server — base-ui-mcp: tools list_components, search_components, get_component, add_components (free tier, no license). Works with Cursor, Claude (Code/Desktop), ChatGPT, Gemini, Kimi (Kimi Code CLI), VS Code / GitHub Copilot, Windsurf, and other MCP hosts. Run npx -y base-ui-mcp (stdio). Setup: Getting started — AI agents (MCP). The CLI remains the canonical installer; MCP wraps it.
Component catalog — docs/ai/components.md: selectors, inputs, outputs, and descriptions in one file. Published at base-ui.net/docs/ai/components.md and inlined in llms-full.txt.
Cookbooks — base-ui.net/cookbooks: assembled screens (settings form, dialog + CVA, invoice table, AI chat, Angular signal forms).
Non-interactive CLI — npx base-ui-cli init --yes and add --yes for agent use. Agent index: llms.txt.

🔐 Security & vendor risk

SECURITY.md — disclosure policy, every network request the CLI makes, and the supply-chain controls (tokenless releases, signed registry index, per-item digest verification, no install hooks) — including what is not covered.
Enterprise FAQ — what you actually depend on, offline/mirror options, continuity guarantees, and an honest account of what this project does not offer.

Verify a release yourself:

npm audit signatures                     # npm registry signature for base-ui-cli
BASE_UI_REQUIRE_SIGNATURE=1 npx base-ui-cli add button   # refuse unverified payloads

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

See LICENSE.md. In short: free-tier components are free to use in unlimited projects; pro components require a paid license (one developer, unlimited end products, lifetime updates); redistributing components as a library/kit is not permitted for either tier. Every component file the CLI installs carries a header naming its license.

Two guarantees worth calling out, because they are the usual objections to a commercial component library:

Perpetual use (§5) — every version delivered to you stays usable forever, with no registry, CLI, or vendor dependency at build or run time. Each release also attaches an offline Pro source archive.
Termination does not reach shipped code (§7) — a licensing dispute can stop future downloads, but never revokes your right to keep shipping products that already include the components.

The CLI tool itself (base-ui-cli) is separately MIT-licensed — that covers only the tool's own code, not the components it fetches.

🆘 Support

Email support@base-ui.net. Bugs and features: GitHub Issues. How to contribute (issues and discussions only): CONTRIBUTING.md.