1# Components
2 
3Quick-reference index of all 125+ components. For full API docs (props, slots, events, examples), use the MCP `get_component` or `get_component_metadata` tools.
4 
5## Layout
6 
7| Component | Purpose |
8|---|---|
9| `UApp` | **Required** root wrapper — toasts, tooltips, overlays, i18n |
10| `UHeader` | Responsive header with mobile menu |
11| `UFooter` | Footer with left/right/top/bottom slots |
12| `UFooterColumns` | Multi-column footer with link groups |
13| `UMain` | Main content area |
14| `UContainer` | Centered max-width container |
15| `ULink` | Enhanced link — NuxtLink/RouterLink with active states |
16 
17## Element
18 
19| Component | Purpose |
20|---|---|
21| `UButton` | Buttons — links, actions, icons, loading states |
22| `UBadge` | Labels, tags, status indicators |
23| `UAvatar` | User photos, initials, icons |
24| `UAvatarGroup` | Stacked avatars with `max` limit |
25| `UIcon` | Iconify icons (`i-{collection}-{name}`) |
26| `UCard` | Bordered container with header/body/footer |
27| `UAlert` | Inline messages — info, warning, error, success |
28| `UBanner` | App-wide sticky announcement bar |
29| `UChip` | Notification dot overlay on children |
30| `UKbd` | Keyboard key display |
31| `USeparator` | Divider line with optional label |
32| `USkeleton` | Loading placeholder |
33| `UProgress` | Progress bar |
34| `UToast` | Toast notification (shown via `useToast`) |
35| `UCalendar` | Date calendar (single, range, multiple) |
36| `UCollapsible` | Animated expand/collapse |
37| `UFieldGroup` | Group form inputs horizontally |
38| `UMarquee` | Scrolling content ticker |
39| `UCarousel` | Image/content carousel with autoplay |
40| `UEmpty` | Empty state placeholder with icon, title, actions |
41| `UError` | Error display with retry action |
42| `UScrollArea` | Scrollable area with custom scrollbar |
43| `UTimeline` | Timeline display for events and activity |
44| `UUser` | User display — avatar + name + description |
45| `UTheme` | Theme provider — scoped color overrides for children |
46 
47## Form
48 
49| Component | Purpose |
50|---|---|
51| `UAuthForm` | Pre-built auth form with social providers |
52| `UInput` | Text input — text, email, password, search |
53| `UTextarea` | Multi-line text with autoresize |
54| `USelect` | Native-like dropdown for small lists |
55| `USelectMenu` | Rich searchable dropdown, multi-select, groups |
56| `UInputMenu` | Autocomplete / combobox |
57| `UInputNumber` | Numeric input with +/- controls |
58| `UInputDate` | Date picker with calendar |
59| `UInputTime` | Time picker (12/24h) |
60| `UInputTags` | Tag/chip input |
61| `UPinInput` | Verification code input |
62| `UCheckbox` | Single boolean checkbox |
63| `UCheckboxGroup` | Multiple checkboxes |
64| `URadioGroup` | Radio button group |
65| `USwitch` | Toggle switch |
66| `USlider` | Range slider |
67| `UColorPicker` | Color picker (hex/rgb/hsl) |
68| `UFileUpload` | File upload (button or drop area) |
69| `UForm` | Validation wrapper with Standard Schema |
70| `UFormField` | Field wrapper with label, hint, errors |
71 
72## Overlay
73 
74| Component | Purpose |
75|---|---|
76| `UModal` | Centered dialog — confirmations, forms |
77| `USlideover` | Side panel — details, editing |
78| `UDrawer` | Bottom sheet — mobile actions |
79| `UPopover` | Contextual popup attached to trigger |
80| `UTooltip` | Hover/focus hint (non-interactive) |
81| `UContextMenu` | Right-click menu |
82| `UCommandPalette` | Search + keyboard navigation (Cmd+K) |
83 
84## Navigation
85 
86| Component | Purpose |
87|---|---|
88| `USidebar` | Standalone sidebar with header/body/footer |
89| `UNavigationMenu` | Primary nav — horizontal or vertical |
90| `UTabs` | Tab switcher within a page |
91| `UBreadcrumb` | Location hierarchy |
92| `UDropdownMenu` | Action menu on a trigger |
93| `UPagination` | Page navigation |
94| `UStepper` | Multi-step wizard |
95| `UAccordion` | Collapsible sections |
96 
97## Data
98 
99| Component | Purpose |
100|---|---|
101| `UTable` | Data table (TanStack Table) with sorting, selection, pinning |
102| `UTree` | Hierarchical tree view |
103 
104## Dashboard
105 
106| Component | Purpose |
107|---|---|
108| `UDashboardGroup` | Root dashboard wrapper |
109| `UDashboardSidebar` | Resizable, collapsible sidebar |
110| `UDashboardPanel` | Content panel with header/body/footer |
111| `UDashboardNavbar` | Panel header bar |
112| `UDashboardToolbar` | Filter/action bar below navbar |
113| `UDashboardResizeHandle` | Resize handle between panels |
114| `UDashboardSidebarToggle` | Mobile sidebar toggle button |
115| `UDashboardSearchButton` | Search button for sidebar |
116| `UDashboardSearch` | Dashboard-level search overlay |
117| `UDashboardSidebarCollapse` | Collapse button for sidebar |
118 
119## Page (marketing)
120 
121| Component | Purpose |
122|---|---|
123| `UPage` | Multi-column layout with left/right sidebars |
124| `UPageHero` | Hero section — title, description, links, media |
125| `UPageSection` | Content section with features grid |
126| `UPageCTA` | Call to action block |
127| `UPageHeader` | Page title and description |
128| `UPageBody` | Main content area |
129| `UPageGrid` | Card grid layout |
130| `UPageColumns` | Multi-column layout |
131| `UPageCard` | Content card for grids |
132| `UPageFeature` | Feature item |
133| `UPageLogos` | Logo cloud |
134| `UPageAside` | Sticky sidebar wrapper |
135| `UPageAnchors` | Simple anchor links |
136| `UPageLinks` | Related resource links |
137| `UPageList` | List layout for page items |
138 
139## Blog & Changelog
140 
141| Component | Purpose |
142|---|---|
143| `UBlogPosts` | Blog post grid |
144| `UBlogPost` | Individual post card |
145| `UChangelogVersions` | Changelog list |
146| `UChangelogVersion` | Individual changelog entry |
147 
148## Pricing
149 
150| Component | Purpose |
151|---|---|
152| `UPricingPlans` | Pricing plan cards |
153| `UPricingPlan` | Individual pricing plan card |
154| `UPricingTable` | Feature comparison table |
155 
156## Prose — Base Typography
157 
158Standard Markdown elements auto-resolved by Comark/Content/MDC. No `::` prefix needed — they map directly from markdown syntax (`# Heading` → `ProseH1`, `**bold**` → `ProseStrong`, etc.). Themed via `appConfig.ui.prose.<name>`.
159 
160| Component | Renders | Notable |
161|---|---|---|
162| `H1` `H2` `H3` `H4` | Headings | H1–H3 get anchor links + TOC entries |
163| `P` | Paragraph | |
164| `A` | Link | External links get target/rel handling |
165| `Strong` | Bold | |
166| `Em` | Italic | |
167| `Blockquote` | Blockquote | |
168| `Hr` | Horizontal rule | |
169| `Ul` `Ol` `Li` | Lists | Supports nesting and mixed lists |
170| `Table` `Thead` `Tbody` `Tr` `Th` `Td` | Tables | |
171| `Img` | Image | Zoom on click (`:zoom="false"` to disable), `@nuxt/image` support |
172| `Pre` | Code block | Copy button, filename + icon, line highlighting (`{2,4-6}`), diff |
173| `Code` | Inline code | `color` and `lang` props |
174 
175## Prose — Feature Components
176 
177Nuxt UI-specific Prose components. In markdown files they are used **without the `Prose` prefix** (e.g. `::callout`, `::steps`). In Vue they are referenced as `ProseCallout`, `ProseSteps`, etc. Comark resolves them automatically when `@nuxt/ui` is installed.
178 
179Nuxt UI also registers shorthand aliases for `Callout`: `::note`, `::tip`, `::warning`, `::caution` (preset `color` + `icon`).
180 
181| Component | Purpose |
182|---|---|
183| `Callout` | Highlighted note/warning/tip (`color`, `icon`, `to`) |
184| `Badge` | Inline badge/tag |
185| `Kbd` | Keyboard key |
186| `Icon` | Inline Iconify icon |
187| `Prompt` | Terminal prompt block |
188| `Card` `CardGroup` | Content card and card grid |
189| `Steps` | Numbered step list (`level` prop sets heading depth) |
190| `Tabs` `TabsItem` | Tabbed content (`sync` for localStorage, `hash` for scroll-on-change) |
191| `Accordion` `AccordionItem` | Collapsible accordion sections |
192| `Collapsible` | Single collapsible section |
193| `Field` `FieldGroup` | Form field display |
194| `CodeGroup` | Tabbed code blocks |
195| `CodeCollapse` | Collapsible code block |
196| `CodeIcon` | File-type icon in code headers |
197| `CodePreview` | Code + live rendered preview side by side |
198| `CodeTree` | File tree display |
199| `Script` | Script injection |
200 
201## Content (Nuxt Content)
202 
203| Component | Purpose |
204|---|---|
205| `UContentNavigation` | Sidebar navigation from content |
206| `UContentToc` | Table of contents |
207| `UContentSurround` | Prev/next navigation |
208| `UContentSearch` | Search command palette |
209| `UContentSearchButton` | Trigger for content search |
210 
211## Chat (AI)
212 
213| Component | Purpose |
214|---|---|
215| `UChatMessages` | Scrollable message list |
216| `UChatMessage` | Individual message bubble |
217| `UChatReasoning` | Collapsible AI reasoning block |
218| `UChatTool` | Tool invocation status |
219| `UChatShimmer` | Streaming text animation |
220| `UChatPrompt` | Enhanced textarea for prompts |
221| `UChatPromptSubmit` | Submit button with status |
222| `UChatPalette` | Chat layout for overlays |
223 
224## Editor
225 
226| Component | Purpose |
227|---|---|
228| `UEditor` | Rich text editor (JSON/HTML/Markdown) |
229| `UEditorToolbar` | Toolbar (fixed/bubble/floating) |
230| `UEditorDragHandle` | Block drag-and-drop |
231| `UEditorSuggestionMenu` | Slash command menu |
232| `UEditorMentionMenu` | @ mention menu |
233| `UEditorEmojiMenu` | Emoji picker |
234 
235## Color Mode
236 
237| Component | Purpose |
238|---|---|
239| `UColorModeButton` | Toggle button (light/dark) |
240| `UColorModeSwitch` | Toggle switch (light/dark) |
241| `UColorModeSelect` | Dropdown (light/dark/system) |
242| `UColorModeAvatar` | Avatar that changes with color mode |
243| `UColorModeImage` | Image that changes with color mode |
244