# 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 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. |