Skip to content

Navigation & menus

Combobox, Command palette (⌘K), Navigation menu, Menubar, Stepper.

stable
Source: src/components/ui/

Rendered example — light + dark

Light

Command palette

Navigation menu

Menubar

Stepper

  1. Account
  2. 2Profile
  3. 3Review

Dark

Command palette

Navigation menu

Menubar

Stepper

  1. Account
  2. 2Profile
  3. 3Review

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source file src/components/ui/ for the full API. 

import { Combobox } from '@/components/ui/combobox';
import { CommandPalette } from '@/components/ui/command-palette';

const frameworks = [
  { value: 'astro', label: 'Astro' },
  { value: 'next', label: 'Next.js' },
];

export function Nav() {
  return (
    <div className="space-y-4">
      <Combobox items={frameworks} placeholder="Pick a framework…" />
      {/* Opens on ⌘K */}
      <CommandPalette items={frameworks} />
    </div>
  );
}

Props API

ButtonProps
Prop Type Default Description
asChild opt boolean false —
CalloutProps
Prop Type Default Description
title string — —
variant opt 'default' | 'success' | 'warning' | 'error' 'default' —
icon opt React.ReactNode — Optional icon node (e.g. a Lucide icon element) shown beside the title.
DataTableProps
Prop Type Default Description
columns ColumnDef<TData, TValue>[] — —
data TData[] — —
initialColumnVisibility opt VisibilityState {} Initial column visibility — column id to visible boolean.
initialGlobalFilter opt string '' Initial global filter string.
height opt string | number '500px' Height of the scroll container in CSS units. Defaults to '500px'.
estimateRowSize opt number 40 Estimated row height in px for virtualization. Defaults to 40.
syncToUrl opt boolean | { key: string } false Sync filter/sort/visibility/sizing to URLSearchParams so views are shareable and survive page refresh. Pass `{ key: 'myTable' }` to namespace URL params when multiple DataTables share a page. Defaults to false (no URL syncing).
DividerProps
Prop Type Default Description
children opt React.ReactNode — Optional centered text label rendered between two rules.
MetricProps
Prop Type Default Description
value string | number — —
label opt string — —
delta opt { value: number; /** Semantic trend direction. Controls col… — —
ProgressBarProps
Prop Type Default Description
value number — Completion percentage, clamped to [0, 100].
label opt string — Accessible name for screen readers.
TrackerProps
Prop Type Default Description
data TrackerBlock[] — —