What components and templates does Nuxt UI provide?

Updated

Nuxt UI ships 125+ accessible, TypeScript-typed components built on Reka UI and Tailwind CSS, plus a templates section that shows those components assembled into full page layouts. If you want to know whether it covers the interface elements you need before adopting it, the component count and the template previews on ui.nuxt.com are the two things to check first.

Components: 125+ accessible, typed building blocks

The library describes itself as "accessible, typed components built on Reka UI and Tailwind CSS." That combination matters for two reasons:

  • Reka UI foundation — accessibility behavior (focus management, keyboard interaction, ARIA wiring) comes from the underlying primitive layer rather than being hand-rolled per component.
  • TypeScript typing — props and slots are typed, so your editor can surface component APIs as you write.

The site presents components and templates as two separate entry points, so you can browse individual components independently of the page-level examples.

What the component set covers

The homepage demos show the library spanning both simple inputs and composed widgets. Examples visible in the page evidence include:

Category Examples shown
Form inputs Email field with helper text, amount input, 6-digit verification code entry
Selection controls Notification preference toggles (transaction, security, marketing)
Data display Recent transactions list, total revenue stat, monthly goal progress
Navigation / structure Dashboard, Inbox, Projects, Calendar, Settings sidebar
Overlays & feedback Notifications panel, bug report form, invite dialog
Date handling A full month calendar grid (July 2026)
Keyboard affordances Shortcut hints (Search K, Quick actions J, New file N, Save S, Toggle sidebar B)

This spread suggests the set is aimed at application UI — dashboards, settings, forms, and data views — rather than only marketing pages.

Templates: the same theme across different layouts

The templates section exists to answer a different question than the component list: not "does this widget exist?" but "what does a whole screen look like when these widgets are combined?"

The page's framing is "Same theme, every layout" — meaning the templates are variations on one visual system rather than unrelated designs. The demo screens on the homepage illustrate the range of layouts covered:

  • A banking / finance dashboard — account linking, payout setup, transfer funds form with from/to accounts, estimated arrival, and a $0.00 transaction fee line.
  • A transactions and revenue view — recent activity list (Stripe payout, Blue Bottle Coffee, Whole Foods Market, Netflix), total revenue with a percentage change, and a monthly goal at 75%.
  • A notifications preferences screen — grouped toggles with descriptions under each option.
  • A team invitation flow — add members with Editor/Viewer roles, plus a shareable invite link.
  • A bug report form — title, severity selector, component field, reproduction steps, file attachment.
  • A savings and investment goals view — retirement and real estate targets with percentage achieved, plus a projected finish date.
  • A calendar — a full month grid with event dates.

Because these are built from the same component set, a template is a starting layout rather than a separate dependency.

Setup context you'll see alongside the components

The homepage's getting-started snippet shows the styling entry point:

/* main.css */
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-sans: 'Public Sans', sans-serif;
}

Alongside app.config.ts as the configuration file. The library states that icons, fonts, color mode, i18n, and typography are "already wired in," which is why the setup is short — those concerns are handled by the library rather than assembled by you.

How to decide whether the coverage fits

  1. Check the component list against your screen inventory. If your app is mostly forms, tables, dialogs, and navigation, the categories above suggest good coverage. If you need something highly specialized, verify it exists before committing.
  2. Browse templates by layout type, not by name. Since they share one theme, pick the layout closest to your target screen and adapt it.
  3. Confirm the Vue/Nuxt fit. The library is described as being for "Nuxt and any Vue app," so a plain Vue project is in scope — but check the installation path for your specific setup rather than assuming the Nuxt instructions transfer unchanged.

The practical takeaway: 125+ components give you the element-level coverage, and the templates show whether the assembled result matches the kind of application you're building.