246 lines
15 KiB
Markdown
246 lines
15 KiB
Markdown
# Components
|
||
|
||
Quick-reference index of all 125+ components. For full API docs (props, slots, events, examples), use the MCP `get-component` or `get-component-metadata` tools.
|
||
|
||
## Layout
|
||
|
||
| Component | Purpose |
|
||
| ---------------- | ------------------------------------------------------------ |
|
||
| `UApp` | **Required** root wrapper — toasts, tooltips, overlays, i18n |
|
||
| `UHeader` | Responsive header with mobile menu |
|
||
| `UFooter` | Footer with left/right/top/bottom slots |
|
||
| `UFooterColumns` | Multi-column footer with link groups |
|
||
| `UMain` | Main content area |
|
||
| `UContainer` | Centered max-width container |
|
||
| `USplitter` | Resizable panels separated by draggable handles |
|
||
| `ULink` | Enhanced link — NuxtLink/RouterLink with active states |
|
||
|
||
## Element
|
||
|
||
| Component | Purpose |
|
||
| ---------------- | ---------------------------------------------------- |
|
||
| `UButton` | Buttons — links, actions, icons, loading states |
|
||
| `UBadge` | Labels, tags, status indicators |
|
||
| `UAvatar` | User photos, initials, icons |
|
||
| `UAvatarGroup` | Stacked avatars with `max` limit |
|
||
| `UIcon` | Iconify icons (`i-{collection}-{name}`) |
|
||
| `UCard` | Bordered container with header/body/footer |
|
||
| `UAlert` | Inline messages — info, warning, error, success |
|
||
| `UBanner` | App-wide sticky announcement bar |
|
||
| `UChip` | Notification dot overlay on children |
|
||
| `UKbd` | Keyboard key display |
|
||
| `USeparator` | Divider line with optional label |
|
||
| `USkeleton` | Loading placeholder |
|
||
| `UProgress` | Progress bar |
|
||
| `UProgressGroup` | Segmented progress bar with a list of items |
|
||
| `UToast` | Toast notification (shown via `useToast`) |
|
||
| `UCalendar` | Date calendar (single, range, multiple) |
|
||
| `UCollapsible` | Animated expand/collapse |
|
||
| `UFieldGroup` | Group form inputs horizontally |
|
||
| `UMarquee` | Scrolling content ticker |
|
||
| `UCarousel` | Image/content carousel with autoplay |
|
||
| `UEmpty` | Empty state placeholder with icon, title, actions |
|
||
| `UError` | Error display with retry action |
|
||
| `UScrollArea` | Scrollable area with custom scrollbar |
|
||
| `UTimeline` | Timeline display for events and activity |
|
||
| `UUser` | User display — avatar + name + description |
|
||
| `UTheme` | Theme provider — scoped color overrides for children |
|
||
|
||
## Form
|
||
|
||
| Component | Purpose |
|
||
| ---------------- | ---------------------------------------------- |
|
||
| `UAuthForm` | Pre-built auth form with social providers |
|
||
| `UInput` | Text input — text, email, password, search |
|
||
| `UTextarea` | Multi-line text with autoresize |
|
||
| `USelect` | Native-like dropdown for small lists |
|
||
| `USelectMenu` | Rich searchable dropdown, multi-select, groups |
|
||
| `UInputMenu` | Autocomplete / combobox |
|
||
| `UInputNumber` | Numeric input with +/- controls |
|
||
| `UInputDate` | Date picker with calendar |
|
||
| `UInputTime` | Time picker (12/24h) |
|
||
| `UInputTags` | Tag/chip input |
|
||
| `UPinInput` | Verification code input |
|
||
| `UCheckbox` | Single boolean checkbox |
|
||
| `UCheckboxGroup` | Multiple checkboxes |
|
||
| `URadioGroup` | Radio button group |
|
||
| `USwitch` | Toggle switch |
|
||
| `USlider` | Range slider |
|
||
| `UColorPicker` | Color picker (hex/rgb/hsl) |
|
||
| `UFileUpload` | File upload (button or drop area) |
|
||
| `UForm` | Validation wrapper with Standard Schema |
|
||
| `UFormField` | Field wrapper with label, hint, errors |
|
||
|
||
## Overlay
|
||
|
||
| Component | Purpose |
|
||
| ----------------- | -------------------------------------- |
|
||
| `UModal` | Centered dialog — confirmations, forms |
|
||
| `USlideover` | Side panel — details, editing |
|
||
| `UDrawer` | Bottom sheet — mobile actions |
|
||
| `UPopover` | Contextual popup attached to trigger |
|
||
| `UTooltip` | Hover/focus hint (non-interactive) |
|
||
| `UContextMenu` | Right-click menu |
|
||
| `UCommandPalette` | Search + keyboard navigation (Cmd+K) |
|
||
|
||
## Navigation
|
||
|
||
| Component | Purpose |
|
||
| ----------------- | ------------------------------------------ |
|
||
| `USidebar` | Standalone sidebar with header/body/footer |
|
||
| `UNavigationMenu` | Primary nav — horizontal or vertical |
|
||
| `UTabs` | Tab switcher within a page |
|
||
| `UBreadcrumb` | Location hierarchy |
|
||
| `UDropdownMenu` | Action menu on a trigger |
|
||
| `UPagination` | Page navigation |
|
||
| `UStepper` | Multi-step wizard |
|
||
| `UAccordion` | Collapsible sections |
|
||
|
||
## Data
|
||
|
||
| Component | Purpose |
|
||
| --------- | ------------------------------------------------------------ |
|
||
| `UTable` | Data table (TanStack Table) with sorting, selection, pinning |
|
||
| `UTree` | Hierarchical tree view |
|
||
|
||
## Dashboard
|
||
|
||
| Component | Purpose |
|
||
| --------------------------- | ------------------------------------- |
|
||
| `UDashboardGroup` | Root dashboard wrapper |
|
||
| `UDashboardSidebar` | Resizable, collapsible sidebar |
|
||
| `UDashboardPanel` | Content panel with header/body/footer |
|
||
| `UDashboardNavbar` | Panel header bar |
|
||
| `UDashboardToolbar` | Filter/action bar below navbar |
|
||
| `UDashboardResizeHandle` | Resize handle between panels |
|
||
| `UDashboardSidebarToggle` | Mobile sidebar toggle button |
|
||
| `UDashboardSearchButton` | Search button for sidebar |
|
||
| `UDashboardSearch` | Dashboard-level search overlay |
|
||
| `UDashboardSidebarCollapse` | Collapse button for sidebar |
|
||
|
||
## Page (marketing)
|
||
|
||
| Component | Purpose |
|
||
| -------------- | ----------------------------------------------- |
|
||
| `UPage` | Multi-column layout with left/right sidebars |
|
||
| `UPageHero` | Hero section — title, description, links, media |
|
||
| `UPageSection` | Content section with features grid |
|
||
| `UPageCTA` | Call to action block |
|
||
| `UPageHeader` | Page title and description |
|
||
| `UPageBody` | Main content area |
|
||
| `UPageGrid` | Card grid layout |
|
||
| `UPageColumns` | Multi-column layout |
|
||
| `UPageCard` | Content card for grids |
|
||
| `UPageFeature` | Feature item |
|
||
| `UPageLogos` | Logo cloud |
|
||
| `UPageAside` | Sticky sidebar wrapper |
|
||
| `UPageAnchors` | Simple anchor links |
|
||
| `UPageLinks` | Related resource links |
|
||
| `UPageList` | List layout for page items |
|
||
|
||
## Blog & Changelog
|
||
|
||
| Component | Purpose |
|
||
| -------------------- | -------------------------- |
|
||
| `UBlogPosts` | Blog post grid |
|
||
| `UBlogPost` | Individual post card |
|
||
| `UChangelogVersions` | Changelog list |
|
||
| `UChangelogVersion` | Individual changelog entry |
|
||
|
||
## Pricing
|
||
|
||
| Component | Purpose |
|
||
| --------------- | ---------------------------- |
|
||
| `UPricingPlans` | Pricing plan cards |
|
||
| `UPricingPlan` | Individual pricing plan card |
|
||
| `UPricingTable` | Feature comparison table |
|
||
|
||
## Prose — Base Typography
|
||
|
||
Standard 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>`.
|
||
|
||
| Component | Renders | Notable |
|
||
| -------------------------------------- | --------------- | ----------------------------------------------------------------- |
|
||
| `H1` `H2` `H3` `H4` | Headings | H1–H3 get anchor links + TOC entries |
|
||
| `P` | Paragraph | |
|
||
| `A` | Link | External links get target/rel handling |
|
||
| `Strong` | Bold | |
|
||
| `Em` | Italic | |
|
||
| `Blockquote` | Blockquote | |
|
||
| `Hr` | Horizontal rule | |
|
||
| `Ul` `Ol` `Li` | Lists | Supports nesting and mixed lists |
|
||
| `Table` `Thead` `Tbody` `Tr` `Th` `Td` | Tables | |
|
||
| `Img` | Image | Zoom on click (`:zoom="false"` to disable), `@nuxt/image` support |
|
||
| `Pre` | Code block | Copy button, filename + icon, line highlighting (`{2,4-6}`), diff |
|
||
| `Code` | Inline code | `color` and `lang` props |
|
||
|
||
## Prose — Feature Components
|
||
|
||
Nuxt 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.
|
||
|
||
Nuxt UI also registers shorthand aliases for `Callout`: `::note`, `::tip`, `::warning`, `::caution` (preset `color` + `icon`).
|
||
|
||
| Component | Purpose |
|
||
| --------------------------- | --------------------------------------------------------------------- |
|
||
| `Callout` | Highlighted note/warning/tip (`color`, `icon`, `to`) |
|
||
| `Badge` | Inline badge/tag |
|
||
| `Kbd` | Keyboard key |
|
||
| `Icon` | Inline Iconify icon |
|
||
| `Prompt` | Terminal prompt block |
|
||
| `Card` `CardGroup` | Content card and card grid |
|
||
| `Steps` | Numbered step list (`level` prop sets heading depth) |
|
||
| `Tabs` `TabsItem` | Tabbed content (`sync` for localStorage, `hash` for scroll-on-change) |
|
||
| `Accordion` `AccordionItem` | Collapsible accordion sections |
|
||
| `Collapsible` | Single collapsible section |
|
||
| `Field` `FieldGroup` | Form field display |
|
||
| `CodeGroup` | Tabbed code blocks |
|
||
| `CodeCollapse` | Collapsible code block |
|
||
| `CodeIcon` | File-type icon in code headers |
|
||
| `CodePreview` | Code + live rendered preview side by side |
|
||
| `CodeTree` | File tree display |
|
||
| `Script` | Script injection |
|
||
|
||
## Content (Nuxt Content)
|
||
|
||
| Component | Purpose |
|
||
| ---------------------- | ------------------------------- |
|
||
| `UContentNavigation` | Sidebar navigation from content |
|
||
| `UContentToc` | Table of contents |
|
||
| `UContentSurround` | Prev/next navigation |
|
||
| `UContentSearch` | Search command palette |
|
||
| `UContentSearchButton` | Trigger for content search |
|
||
|
||
## Chat (AI)
|
||
|
||
| Component | Purpose |
|
||
| ------------------- | ------------------------------ |
|
||
| `UChatMessages` | Scrollable message list |
|
||
| `UChatMessage` | Individual message bubble |
|
||
| `UChatReasoning` | Collapsible AI reasoning block |
|
||
| `UChatTool` | Tool invocation status |
|
||
| `UChatShimmer` | Streaming text animation |
|
||
| `UChatPrompt` | Enhanced textarea for prompts |
|
||
| `UChatPromptSubmit` | Submit button with status |
|
||
| `UChatPalette` | Chat layout for overlays |
|
||
|
||
## Editor
|
||
|
||
| Component | Purpose |
|
||
| ----------------------- | ------------------------------------- |
|
||
| `UEditor` | Rich text editor (JSON/HTML/Markdown) |
|
||
| `UEditorToolbar` | Toolbar (fixed/bubble/floating) |
|
||
| `UEditorDragHandle` | Block drag-and-drop |
|
||
| `UEditorSuggestionMenu` | Slash command menu |
|
||
| `UEditorMentionMenu` | @ mention menu |
|
||
| `UEditorEmojiMenu` | Emoji picker |
|
||
|
||
## Color Mode
|
||
|
||
| Component | Purpose |
|
||
| ------------------ | ----------------------------------- |
|
||
| `UColorModeButton` | Toggle button (light/dark) |
|
||
| `UColorModeSwitch` | Toggle switch (light/dark) |
|
||
| `UColorModeSelect` | Dropdown (light/dark/system) |
|
||
| `UColorModeAvatar` | Avatar that changes with color mode |
|
||
| `UColorModeImage` | Image that changes with color mode |
|