UI Components
The 30 shadcn/ui components pre-installed in Next Starter: new-york style on Radix primitives, styled with Tailwind CSS v4 and themed with CSS variables.
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 own the source and edit it like any other file in the project.
Here is what each part does:
- Radix UI primitives handle behavior and accessibility: focus, keyboard navigation, and ARIA roles. Each component imports from the unified
radix-uipackage, for exampleimport { Dialog as DialogPrimitive } from "radix-ui". - Tailwind CSS v4 handles styling. The
cn()helper inlib/utils.tsmerges class names (it combinesclsxandtailwind-merge) so conflicting classes resolve correctly. - CSS variables like
--primaryand--backgroundlive inapp/globals.cssand drive every color. This is why light/dark mode and rebrands work without touching component files. To change the brand color, radius, or fonts, see Customizing the Theme.
Configuration lives in components.json at the project root: style: new-york, baseColor: neutral, cssVariables: true, rsc: true, and icons from lucide.
Included components
These 30 components ship in components/ui/:
| Component | File | Purpose |
|---|---|---|
| Accordion | accordion.tsx | Collapsible content sections |
| Alert | alert.tsx | Inline status messages |
| Alert Dialog | alert-dialog.tsx | Confirmation dialogs |
| Avatar | avatar.tsx | User profile images with fallback |
| Avatar Upload | avatar-upload.tsx | Profile-picture upload with live preview |
| Badge | badge.tsx | Small status labels |
| Breadcrumb | breadcrumb.tsx | Navigation trail |
| Button | button.tsx | Primary interactive element |
| Card | card.tsx | Content container with header/footer |
| Data Table | data-table.tsx | Sortable, searchable table with server-side pagination |
| Dialog | dialog.tsx | Modal overlay |
| Dropdown Menu | dropdown-menu.tsx | Contextual action menus |
| Field | field.tsx | Composable form primitive (used with React Hook Form Controller) |
| Input | input.tsx | Text input field |
| Input OTP | input-otp.tsx | One-time-password code input (used for email OTP / verification) |
| Label | label.tsx | Accessible form labels |
| Navigation Menu | navigation-menu.tsx | Top-level navigation |
| Select | select.tsx | Dropdown selection |
| Separator | separator.tsx | Visual divider |
| Sheet | sheet.tsx | Slide-in panel |
| Sidebar | sidebar.tsx | Full sidebar primitive |
| Skeleton | skeleton.tsx | Loading placeholder |
| Sonner | sonner.tsx | Toast notification wrapper |
| Spinner | spinner.tsx | Loading indicator |
| Switch | switch.tsx | Toggle control |
| Table | table.tsx | Structured data display |
| Textarea | textarea.tsx | Multi-line text input |
| Toggle | toggle.tsx | On/off button |
| Toggle Group | toggle-group.tsx | Group of related toggle buttons |
| Tooltip | tooltip.tsx | Hover hint overlay |
Customizing and adding components
Edit any component directly in components/ui/. You own the source, so change it freely. To restyle one component, adjust its Tailwind classes. To recolor the whole app at once, edit the CSS variables in app/globals.css (see Customizing the Theme).
Add a component that is not here yet with the shadcn CLI:
pnpm dlx shadcn@latest add calendarThis copies the source into components/ui/calendar.tsx and installs any packages it needs. Browse the full catalog at ui.shadcn.com/docs/components.
Dashboard Layout
How the dashboard layout is built: sidebar navigation, header, breadcrumb, mobile menu, and past-due banner, plus adding nav items and gating them to admins.
Forms
How Next Starter builds forms: Zod 4 schemas for validation, typed Server Actions, React Hook Form with Field primitives, and Turnstile on the contact form.