angulartailwindcsscookbooksdata-tablesignal-formsstackblitz

You don't need another button. You need the screen.

Base UI (Angular) at base-ui.net shipped cookbooks, Angular 22 signal forms, Open in StackBlitz, and a Pro data table with selection, resize, and server paging. Here's what is free, what is Pro, and what you can try this weekend.

9 min read Base UI team

Component libraries are very good at selling you a button. They are less good at the Tuesday afternoon where you need a settings form, an invoice table that talks to an API, or a chat page that can stream a reply.

That stitching work is where weeks go. Base UI (Angular) at base-ui.net aimed the latest work there: five cookbooks that assemble real screens, a data table that can page on the server, Angular 22 signal forms on the same inputs you already use, and Open in StackBlitz so you can try a snippet without installing anything.

Angular’s signal forms guide is the API the signal-forms cookbook follows (form(), [formField], schema validation). StackBlitz is the in-browser playground behind Open in StackBlitz on the docs site. Colorlib’s March 2026 Angular UI roundup cites 17% of professional developers using Angular (Colorlib). The copy-in model is also what shadcn/ui calls “AI-Ready”: “Open Code for LLMs to read, understand, and improve.”

The distribution model is unchanged. npx base-ui-cli add still copies source into your repo. There is still no Base UI package in node_modules. Free is still the primitives and every form block. Pro is still the screens and the heavy widgets.

What changed is how fast you can go from "I have a card" to "I have a page."

Try it without installing

Playgrounds on the docs site — and Getting started — have Open in StackBlitz. You get a runnable Angular snippet with the component already copied in. Useful when you want to see a combobox or a table before you commit a CLI install to a real app.

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

That is still the whole free-tier on-ramp. Tailwind CSS 4, no custom theme file, color="primary" maps to blue-*.

Five cookbooks (the shareable part)

Cookbooks are assembled screens, not another catalog of primitives. Each one is a page you can open, copy, and strip for parts:

Cookbook What it proves Tier mix
Account settings form Input groups, combobox, tags, toggle, save Free
Dialog + form (CVA) DialogService, ngModel on composite controls, typed close result Free
Invoice table Selection, column resize, server page/sort Pro data-table
AI chat page Message list, streaming reply, tool-call row, prompt Mix
Angular signal forms form() + [formField] on Base UI inputs, schema validation, submit() Free

The settings and dialog recipes are the honest free-tier pitch: you already have the controls; the missing piece was a screen that wires them. The invoice recipe is the honest Pro pitch: a data table you would otherwise spend a week on.

Data table v2 (Pro)

base-data-table is no longer a client-only demo grid. It still does sort, page, stripes, borders, loading skeletons, and empty states. It now also does the ops-dashboard jobs:

  • Row selection — checkbox column, [(selected)], rowKey
  • Column resize — drag the header edge; lock a column with resizable: false
  • Server page/sort — set serverSide, pass the current page in data, the full count in totalItems, listen to (pageChange) / (sortChange)
  • Virtualize — window a large data array in a fixed-height viewport
<base-data-table
  selectable
  resizable
  serverSide
  pageable
  sortable
  [columns]="columns"
  [data]="page"
  [totalItems]="total"
  [(selected)]="selectedIds"
  (pageChange)="load($event)"
  (sortChange)="load($event)">
</base-data-table>

Install: npx base-ui-cli add data-table (license key required). Walkthrough: the invoice table cookbook. Live API: Data Table.

Signal forms on the same inputs

Angular 22's form() / [formField] path works on Base UI inputs because those controls are ordinary CVA / native elements — not a parallel forms universe. The signal forms cookbook is the recipe: schema validation and submit() without rewriting your field components.

If your app is still on ngModel or reactive forms, nothing broke. The cookbooks show both styles on purpose.

What is free, what is Pro (the line that does not move)

Free (119 items): every primitive (button, card, dialog, hover card, menubar, input, currency, tabs, toast, …), all 19 form blocks (login, signup, checkout, billing, wizard, …), every directive, service, pipe, and utility, 390 icons. No account. No trial clock.

Pro (89 items, $99 once): pre-composed page layouts (dashboard, kanban, inbox, file manager, …), marketing and content blocks, media and social widgets, the unified base-shell, and the heavy widgets — including data-table, rich text editor, file upload, command palette.

The line is still "did we design an entire screen or a week-long widget for you," not "did we cripple the button." You can ship a production dashboard on free. Plenty of people do. The free-tier dashboard article is the long version; there is a live demo.

Pro is worth it when a layout or the data table would save you a week. Inventory: What $99 actually buys.

Full applications (Motif storefront + Motif Admin) are a separate product on top of Pro — templates.

For coding agents, not just humans

The same catalog is published for agents: llms.txt, llms-full.txt, and docs/ai/components.md. Free-tier MCP (base-ui-mcp) can list, search, and add free components. Setup: Getting started — AI agents.

The CLI remains the installer. MCP wraps it. Pro installs still go through BASE_UI_LICENSE_KEY.

This weekend

  1. Open a cookbook: base-ui.net/cookbooks.
  2. Hit Open in StackBlitz on a playground if you do not want a local project yet.
  3. If you do: npx base-ui-cli init --yes and add three free components.
  4. If the invoice table is the thing you were going to build anyway: that is the Pro buy.

No Base UI runtime in node_modules. The source you add is yours to edit. diff / update still exist for when upstream moves.

npx base-ui-cli init --yes

Frequently asked questions

Same wording as the canonical FAQ.

npx base-ui-cli init → configure Tailwind v4 → npx base-ui-cli add card → done in minutes. Cookbooks and StackBlitz starters at /cookbooks/ and /getting-started/.

Yes — data-table is a Pro component (server paging, sorting, selection). A free composed ops table pattern is shown in the templates.

27 form controls implement ControlValueAccessor, including mention-input and file-upload.

Start with the free tier

All primitives, all 19 form blocks, and 390 icons — no account, no licence key.

Get started