# Components

> Auto-generated from Nuxt UI docs. Run `npx tsx skills/nuxt-ui/scripts/generate-components.ts` to update.

> **For headless primitives (API, accessibility):** see `reka-ui` skill

## Data

| Component                               | Description                                                                          |
| --------------------------------------- | ------------------------------------------------------------------------------------ |
| [Accordion](components/accordion.md)    | A stacked set of collapsible panels.                                                 |
| [Carousel](components/carousel.md)      | A carousel with motion and swipe built using Embla.                                  |
| [Empty](components/empty.md)            | A component to display an empty state. (v4.1+)                                       |
| [Marquee](components/marquee.md)        | A component to create infinite scrolling content.                                    |
| [ScrollArea](components/scroll-area.md) | A flexible scroll container with virtualization support. (v4.3+)                     |
| [Table](components/table.md)            | A responsive table element to display data in rows and columns.                      |
| [Timeline](components/timeline.md)      | A component that displays a sequence of events with dates, titles, icons or avatars. |
| [Tree](components/tree.md)              | A tree view component to display and interact with hierarchical data structures.     |
| [User](components/user.md)              | Display user information with name, description and avatar.                          |

## Element

| Component                                 | Description                                                                              |
| ----------------------------------------- | ---------------------------------------------------------------------------------------- |
| [Alert](components/alert.md)              | A callout to draw user's attention.                                                      |
| [Avatar](components/avatar.md)            | An img element with fallback and Nuxt Image support.                                     |
| [AvatarGroup](components/avatar-group.md) | Stack multiple avatars in a group.                                                       |
| [Badge](components/badge.md)              | A short text to represent a status or a category.                                        |
| [Banner](components/banner.md)            | Display a banner at the top of your website to inform users about important information. |
| [Button](components/button.md)            | A button element that can act as a link or trigger an action.                            |
| [Calendar](components/calendar.md)        | A calendar component for selecting single dates, multiple dates or date ranges.          |
| [Card](components/card.md)                | Display content in a card with a header, body and footer.                                |
| [Chip](components/chip.md)                | An indicator of a numeric value or a state.                                              |
| [Collapsible](components/collapsible.md)  | A collapsible element to toggle visibility of its content.                               |
| [FieldGroup](components/field-group.md)   | Group multiple button-like elements together.                                            |
| [Icon](components/icon.md)                | A component to display any icon from Iconify or another component.                       |
| [Kbd](components/kbd.md)                  | A kbd element to display a keyboard key.                                                 |
| [Progress](components/progress.md)        | An indicator showing the progress of a task.                                             |
| [Separator](components/separator.md)      | Separates content horizontally or vertically.                                            |
| [Skeleton](components/skeleton.md)        | A placeholder to show while content is loading.                                          |

## Form

| Component                                     | Description                                                              |
| --------------------------------------------- | ------------------------------------------------------------------------ |
| [Checkbox](components/checkbox.md)            | An input element to toggle between checked and unchecked states.         |
| [CheckboxGroup](components/checkbox-group.md) | A set of checklist buttons to select multiple option from a list.        |
| [ColorPicker](components/color-picker.md)     | A component to select a color.                                           |
| [FileUpload](components/file-upload.md)       | An input element to upload files.                                        |
| [Form](components/form.md)                    | A form component with built-in validation and submission handling.       |
| [FormField](components/form-field.md)         | A wrapper for form elements that provides validation and error handling. |
| [Input](components/input.md)                  | An input element to enter text.                                          |
| [InputDate](components/input-date.md)         | An input component for date selection. (v4.2+)                           |
| [InputMenu](components/input-menu.md)         | An autocomplete input with real-time suggestions.                        |
| [InputNumber](components/input-number.md)     | An input for numerical values with a customizable range.                 |
| [InputTags](components/input-tags.md)         | An input element that displays interactive tags.                         |
| [InputTime](components/input-time.md)         | An input for selecting a time. (v4.2+)                                   |
| [PinInput](components/pin-input.md)           | An input element to enter a pin.                                         |
| [RadioGroup](components/radio-group.md)       | A set of radio buttons to select a single option from a list.            |
| [Select](components/select.md)                | A select element to choose from a list of options.                       |
| [SelectMenu](components/select-menu.md)       | An advanced searchable select element.                                   |
| [Slider](components/slider.md)                | An input to select a numeric value within a range.                       |
| [Switch](components/switch.md)                | A control that toggles between two states.                               |
| [Textarea](components/textarea.md)            | A textarea element to input multi-line text.                             |

## Layout

| Component                            | Description                                                          |
| ------------------------------------ | -------------------------------------------------------------------- |
| [App](components/app.md)             | Wraps your app to provide global configurations and more.            |
| [Container](components/container.md) | A container lets you center and constrain the width of your content. |
| [Error](components/error.md)         | A pre-built error component with NuxtError support.                  |
| [Footer](components/footer.md)       | A responsive footer component.                                       |
| [Header](components/header.md)       | A responsive header component.                                       |
| [Main](components/main.md)           | A main element that fills the available viewport height.             |

## Navigation

| Component                                       | Description                                                                              |
| ----------------------------------------------- | ---------------------------------------------------------------------------------------- |
| [Breadcrumb](components/breadcrumb.md)          | A hierarchy of links to navigate through a website.                                      |
| [CommandPalette](components/command-palette.md) | A command palette with full-text search powered by Fuse.js for efficient fuzzy matching. |
| [FooterColumns](components/footer-columns.md)   | A list of links as columns to display in your Footer.                                    |
| [Link](components/link.md)                      | A wrapper around <NuxtLink> with extra props.                                            |
| [NavigationMenu](components/navigation-menu.md) | A list of links that can be displayed horizontally or vertically.                        |
| [Pagination](components/pagination.md)          | A list of buttons or links to navigate through pages.                                    |
| [Stepper](components/stepper.md)                | A set of steps that are used to indicate progress through a multi-step process.          |
| [Tabs](components/tabs.md)                      | A set of tab panels that are displayed one at a time.                                    |

## Other

| Component                                                            | Description                                                                                                            | Version |
| -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------- |
| [AuthForm](components/auth-form.md)                                  | A customizable Form to create login, register or password reset forms.                                                 |         |
| [BlogPost](components/blog-post.md)                                  | A customizable article to display in a blog page.                                                                      |         |
| [BlogPosts](components/blog-posts.md)                                | Display a list of blog posts in a responsive grid layout.                                                              |         |
| [ChangelogVersion](components/changelog-version.md)                  | A customizable article to display in a changelog.                                                                      |         |
| [ChangelogVersions](components/changelog-versions.md)                | Display a list of changelog versions in a timeline.                                                                    |         |
| [ChatMessage](components/chat-message.md)                            | Display a chat message with icon, avatar, and actions.                                                                 |         |
| [ChatMessages](components/chat-messages.md)                          | Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.                                       |         |
| [ChatPalette](components/chat-palette.md)                            | A chat palette to create a chatbot interface inside an overlay.                                                        |         |
| [ChatPrompt](components/chat-prompt.md)                              | An enhanced Textarea for submitting prompts in AI chat interfaces.                                                     |         |
| [ChatPromptSubmit](components/chat-prompt-submit.md)                 | A Button for submitting chat prompts with automatic status handling.                                                   |         |
| [ColorModeAvatar](components/color-mode-avatar.md)                   | An Avatar with a different source for light and dark mode.                                                             |         |
| [ColorModeButton](components/color-mode-button.md)                   | A Button to switch between light and dark mode.                                                                        |         |
| [ColorModeImage](components/color-mode-image.md)                     | An image element with a different source for light and dark mode.                                                      |         |
| [ColorModeSelect](components/color-mode-select.md)                   | A Select to switch between system, dark & light mode.                                                                  |         |
| [ColorModeSwitch](components/color-mode-switch.md)                   | A switch to toggle between light and dark mode.                                                                        |         |
| [ContentNavigation](components/content-navigation.md)                | An accordion-style navigation component for organizing page links.                                                     |         |
| [ContentSearch](components/content-search.md)                        | A ready to use CommandPalette to add to your documentation.                                                            |         |
| [ContentSearchButton](components/content-search-button.md)           | A pre-styled Button to open the ContentSearch modal.                                                                   |         |
| [ContentSurround](components/content-surround.md)                    | A pair of prev and next links to navigate between pages.                                                               |         |
| [ContentToc](components/content-toc.md)                              | A sticky Table of Contents with automatic active anchor link highlighting.                                             |         |
| [DashboardGroup](components/dashboard-group.md)                      | A fixed layout component that provides context for dashboard components with sidebar state management and persistence. |         |
| [DashboardNavbar](components/dashboard-navbar.md)                    | A responsive navbar to display in a dashboard.                                                                         |         |
| [DashboardPanel](components/dashboard-panel.md)                      | A resizable panel to display in a dashboard.                                                                           |         |
| [DashboardResizeHandle](components/dashboard-resize-handle.md)       | A handle to resize a sidebar or panel.                                                                                 |         |
| [DashboardSearch](components/dashboard-search.md)                    | A ready to use CommandPalette to add to your dashboard.                                                                |         |
| [DashboardSearchButton](components/dashboard-search-button.md)       | A pre-styled Button to open the DashboardSearch modal.                                                                 |         |
| [DashboardSidebar](components/dashboard-sidebar.md)                  | A resizable and collapsible sidebar to display in a dashboard.                                                         |         |
| [DashboardSidebarCollapse](components/dashboard-sidebar-collapse.md) | A Button to collapse the sidebar on desktop.                                                                           |         |
| [DashboardSidebarToggle](components/dashboard-sidebar-toggle.md)     | A Button to toggle the sidebar on mobile.                                                                              |         |
| [DashboardToolbar](components/dashboard-toolbar.md)                  | A toolbar to display under the navbar in a dashboard.                                                                  |         |
| [Editor](components/editor.md)                                       | A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types. (v4.3+)          | v4.3+   |
| [EditorDragHandle](components/editor-drag-handle.md)                 | A draggable handle for reordering and selecting blocks in the editor. (v4.3+)                                          | v4.3+   |
| [EditorEmojiMenu](components/editor-emoji-menu.md)                   | An emoji picker menu that displays emoji suggestions when typing the : character in the editor. (v4.3+)                | v4.3+   |
| [EditorMentionMenu](components/editor-mention-menu.md)               | A mention menu that displays user suggestions when typing the @ character in the editor. (v4.3+)                       | v4.3+   |
| [EditorSuggestionMenu](components/editor-suggestion-menu.md)         | A command menu that displays formatting and action suggestions when typing the / character in the editor. (v4.3+)      | v4.3+   |
| [EditorToolbar](components/editor-toolbar.md)                        | A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu. (v4.3+)            | v4.3+   |
| [LocaleSelect](components/locale-select.md)                          | A Select to switch between locales.                                                                                    |         |
| [Page](components/page.md)                                           | A grid layout for your pages with left and right columns.                                                              |         |
| [PageAnchors](components/page-anchors.md)                            | A list of anchors to be displayed in the page.                                                                         |         |
| [PageAside](components/page-aside.md)                                | A sticky aside to display your page navigation.                                                                        |         |
| [PageBody](components/page-body.md)                                  | The main content of your page.                                                                                         |         |
| [PageCard](components/page-card.md)                                  | A pre-styled card component that displays a title, description and optional link.                                      |         |
| [PageColumns](components/page-columns.md)                            | A responsive multi-column layout system for organizing content side-by-side.                                           |         |
| [PageCta](components/page-cta.md)                                    | A call to action section to display in your pages.                                                                     |         |
| [PageFeature](components/page-feature.md)                            | A component to showcase key features of your application.                                                              |         |
| [PageGrid](components/page-grid.md)                                  | A responsive grid system for displaying content in a flexible layout.                                                  |         |
| [PageHeader](components/page-header.md)                              | A responsive header for your pages.                                                                                    |         |
| [PageHero](components/page-hero.md)                                  | A responsive hero for your pages.                                                                                      |         |
| [PageLinks](components/page-links.md)                                | A list of links to be displayed in the page.                                                                           |         |
| [PageList](components/page-list.md)                                  | A vertical list layout for displaying content in a stacked format.                                                     |         |
| [PageLogos](components/page-logos.md)                                | A list of logos or images to display on your pages.                                                                    |         |
| [PageSection](components/page-section.md)                            | A responsive section for your pages.                                                                                   |         |
| [PricingPlan](components/pricing-plan.md)                            | A customizable pricing plan to display in a pricing page.                                                              |         |
| [PricingPlans](components/pricing-plans.md)                          | Display a list of pricing plans in a responsive grid layout.                                                           |         |
| [PricingTable](components/pricing-table.md)                          | A responsive pricing table component that displays tiered pricing plans with feature comparisons.                      |         |

## Overlay

| Component                                   | Description                                                                  |
| ------------------------------------------- | ---------------------------------------------------------------------------- |
| [ContextMenu](components/context-menu.md)   | A menu to display actions when right-clicking on an element.                 |
| [Drawer](components/drawer.md)              | A drawer that smoothly slides in & out of the screen.                        |
| [DropdownMenu](components/dropdown-menu.md) | A menu to display actions when clicking on an element.                       |
| [Modal](components/modal.md)                | A dialog window that can be used to display a message or request user input. |
| [Popover](components/popover.md)            | A non-modal dialog that floats around a trigger element.                     |
| [Slideover](components/slideover.md)        | A dialog that slides in from any side of the screen.                         |
| [Toast](components/toast.md)                | A succinct message to provide information or feedback to the user.           |
| [Tooltip](components/tooltip.md)            | A popup that reveals information when hovering over an element.              |
