What $99 actually buys: a complete tour of Base UI Pro

Base UI's free tier is deliberately generous — every primitive, all 19 form blocks, all 390 icons, the whole service and directive layer. You can ship a production dashboard without paying anything, and plenty of people do.

Pro is for a different problem. It's not "the good buttons." It's the screens and widgets that take a week each to build properly, and that you'd otherwise build from scratch every project.

Here's the complete inventory, and an honest read on when it's worth it.

17 full page layouts

Not sections — entire working screens, with state, interaction, and responsive behavior already handled:

npx base-ui-cli add layout-dashboard

One command, and the dashboard lands in your project as editable Angular files with its dependencies resolved.

52 content and marketing blocks

16 blog cards — centered hero, collage, compact, floating panel, gradient hero, horizontal feature, image top, inline image, mini grid, newsletter, overlay featured, overlay marketing, quote, split image, stats, video.

4 article cards — editorial, full reader, hero gallery, hero tags.

6 ecommerce blocks — hero banner, split banner, dual promo, lifestyle grid, product detail, product tabs.

10 media widgets — album player, album carousel, playlist, top singles, three audio player variants, video hero, video post, related videos.

16 social widgets — feed post, text post, chat, inbox, activity, article comments, profile cover, profile centered, follow suggestions, trending topics, platform stats, settings menu, image caption, image overlay, upload dropzone, calendar.

These are the pieces you'd otherwise rebuild for every content or marketing site — always slightly differently, never quite as polished as the design mock.

16 advanced widgets

This is where the real engineering hours are:

• data-table — column config, sorting, pagination, striped/bordered/hoverable variants, loading and empty states, row-click and sort-change outputs
• datepicker and date-range-picker — linked calendars, range selection, reactive forms integration
• command-palette — ⌘K search with keyboard navigation
• mega-menu — multi-column navigation with positioning and focus management
• multi-select — multi-value selection with search
• select-tree — hierarchical selection
• tree — expandable tree view
• rich-text-editor — formatting toolbar, selection handling
• file-upload — drag and drop, previews, progress
• crop-image — interactive crop and zoom
• product-gallery — thumbnail gallery with zoom
• mention-input — @-mention autocomplete
• splitter — resizable panes
• pick-list — dual listbox transfer
• knob — circular dial input

Every one of these implements the boring parts — keyboard navigation, focus management, ControlValueAccessor where it applies — that make the difference between a widget that demos well and one that survives a real user.

The economics

A date range picker with two linked calendars, keyboard navigation, and proper forms integration is three to five days of work to build well. A kanban board with drag and drop is a week. An inbox layout is a week.

Base UI Pro is $99, once. Not per seat per year. Not a subscription that lapses and takes your access with it.

The license covers one developer, unlimited end products, and lifetime updates. If it saves you a single day, it's paid for itself several times over — and the realistic figure is considerably more than a day.

What you're not signing up for

Worth being explicit, because this category has a reputation:

No subscription. One payment. Updates keep coming.

No lock-in. Pro components install exactly like free ones — the source is copied into your project, and it's yours. If you stopped using Base UI tomorrow, the code you already installed keeps working, because it's just Angular components in your repo.

No runtime license check. Your license key authenticates the registry fetch when you install a component. It is not phoning home from your production app. There's no key in your bundle and nothing to expire in your users' browsers.

No separate theme. Pro components use the same standard Tailwind colors and spacing as the free ones. The brand color override you set up on day one applies to everything.

How buying works

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

Set the key once. Pro components install with the same command as free ones. In CI, set it as a secret.

And upgrades work the same as the free tier — npx base-ui-cli diff shows what changed upstream, npx base-ui-cli update merges it in, with an interactive three-way merge for anything you've customized.

Try the free tier first

Genuinely — start free. Build your shell, your forms, your primitives. There's a complete admin dashboard built entirely on the free tier, live and open source:

• Demo: base-ui-free-dashboard-demo.pages.dev/app/dashboard
• Source: github.com/lussos/base-ui-free-dashboard

Buy Pro at the moment a specific layout or widget would save you a week. That's the honest trigger, and it's a much better reason than a feature comparison table.

---

See every Pro component at base-ui.net →

Also available: a Figma design system file matching the component library.