UI Components

The UI layer

Next Starter uses shadcn/ui in the new-york style. shadcn/ui is not an npm dependency. The components are copied straight into components/ui/, so you edit them like any other file in the project and no package update will overwrite what you change.

Radix UI primitives handle behavior and accessibility, meaning focus, keyboard navigation, and ARIA roles. The components built on Radix import from the single radix-ui package, for example import { Dialog as DialogPrimitive } from "radix-ui". Two bring their own behavior library instead: input-otp wraps the input-otp package and sonner wraps sonner. Plenty of files don't need any of it. input.tsx, card.tsx, textarea.tsx and skeleton.tsx are among the ones that are just styled elements with no primitive underneath.

Tailwind CSS v4 handles styling. The cn() helper in lib/utils.ts merges class names (it combines clsx and tailwind-merge) so conflicting classes resolve correctly. Theme colors come from CSS variables like --primary and --background in app/globals.css, which is why light/dark mode and rebrands work without touching component files.

Configuration lives in components.json at the project root: style: new-york, baseColor: neutral, cssVariables: true, rsc: true, and icons from lucide.

Included components

Thirty components ship in components/ui/:

accordion alert alert-dialog avatar avatar-upload badge breadcrumb button card data-table dialog dropdown-menu field input input-otp label navigation-menu select separator sheet sidebar skeleton sonner spinner switch table textarea toggle toggle-group tooltip

There's one more file in the folder, data-table-features.ts, which isn't a component. It holds the TanStack Table feature registration that data-table imports.

Most are the stock shadcn components under their usual names. A handful aren't obvious. field is the base component every form in the app builds on (see Forms). input-otp backs the email verification code entry, avatar-upload is a profile-picture picker with live preview, and sonner is the toast wrapper. data-table is project code rather than a registry component, more on that below.

Where this drifts from stock shadcn

A few files changed after they were installed. Worth knowing before you run diff against the registry and wonder what happened.

button.tsx carries two additions on top of the stock set: a charcoal variant (near-black in light mode, near-white in dark) and an xl size that grows again above the sm breakpoint. The default variant is a diagonal gradient rather than a flat fill.

avatar.tsx hashes the fallback text and picks one of five gradients from it, so a given set of initials always gets the same colors. card.tsx uses a rounded-card radius (a 20px --radius-card token) and CardTitle accepts size="lg". The accordion chevron is lucide's ArrowDownIcon.

sidebar.tsx paints its menu hover state with a --sidebar-hover token, which the registry version doesn't have. alert.tsx adds a success variant alongside the stock default and destructive.

data-table.tsx isn't from the registry at all. It's project code around TanStack Table v9's useTable, and the only feature it registers is rowPaginationFeature, through the tableFeatures() call in data-table-features.ts, with manualPagination: true. So the table renders the rows you hand it and nothing more. Paging and search fire callbacks for the server to answer, and clicking a column header does not sort. Client-side sorting means adding rowSortingFeature and sortedRowModel: createSortedRowModel() to that tableFeatures() call, plus header.column.getToggleSortingHandler() on the header cells, and you add all of it yourself.

The theme defines a handful of color tokens shadcn doesn't ship, charcoal, success, warning, link and border-strong among them. The full set is the @theme inline block at the top of app/globals.css. Both the dashboard and the marketing pages use these, so keep them if you swap the palette.

Customizing and adding components

Restyle one component by editing its Tailwind classes in components/ui/. To recolor the whole app at once, edit the CSS variables in app/globals.css (see Customizing the Theme). The two exceptions are the avatar fallback gradients in avatar.tsx, which use fixed Tailwind palette classes, and the demo plan card, which hard-codes its colors.

Pull in a component that isn't here yet with the shadcn CLI:

pnpm dlx shadcn@latest add calendar

This copies the source into components/ui/calendar.tsx and installs any packages it needs. Browse the full catalog at ui.shadcn.com/docs/components.