Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Reference for Nuxt UI v4 (125+ components built on Reka UI + Tailwind CSS v4) including forms, overlays, and theming.
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
references/components.md
1# Components2> Auto-generated from Nuxt UI docs. Run `npx tsx skills/nuxt-ui/scripts/generate-components.ts` to update.4> **For headless primitives (API, accessibility):** see `reka-ui` skill6## Data8| Component | Description |10| --------------------------------------- | ------------------------------------------------------------------------------------ |11| [Accordion](components/accordion.md) | A stacked set of collapsible panels. |12| [Carousel](components/carousel.md) | A carousel with motion and swipe built using Embla. |13| [Empty](components/empty.md) | A component to display an empty state. (v4.1+) |14| [Marquee](components/marquee.md) | A component to create infinite scrolling content. |15| [ScrollArea](components/scroll-area.md) | A flexible scroll container with virtualization support. (v4.3+) |16| [Table](components/table.md) | A responsive table element to display data in rows and columns. |17| [Timeline](components/timeline.md) | A component that displays a sequence of events with dates, titles, icons or avatars. |18| [Tree](components/tree.md) | A tree view component to display and interact with hierarchical data structures. |19| [User](components/user.md) | Display user information with name, description and avatar. |20## Element22| Component | Description |24| ----------------------------------------- | ---------------------------------------------------------------------------------------- |25| [Alert](components/alert.md) | A callout to draw user's attention. |26| [Avatar](components/avatar.md) | An img element with fallback and Nuxt Image support. |27| [AvatarGroup](components/avatar-group.md) | Stack multiple avatars in a group. |28| [Badge](components/badge.md) | A short text to represent a status or a category. |29| [Banner](components/banner.md) | Display a banner at the top of your website to inform users about important information. |30| [Button](components/button.md) | A button element that can act as a link or trigger an action. |31| [Calendar](components/calendar.md) | A calendar component for selecting single dates, multiple dates or date ranges. |32| [Card](components/card.md) | Display content in a card with a header, body and footer. |33| [Chip](components/chip.md) | An indicator of a numeric value or a state. |34| [Collapsible](components/collapsible.md) | A collapsible element to toggle visibility of its content. |35| [FieldGroup](components/field-group.md) | Group multiple button-like elements together. |36| [Icon](components/icon.md) | A component to display any icon from Iconify or another component. |37| [Kbd](components/kbd.md) | A kbd element to display a keyboard key. |38| [Progress](components/progress.md) | An indicator showing the progress of a task. |39| [Separator](components/separator.md) | Separates content horizontally or vertically. |40| [Skeleton](components/skeleton.md) | A placeholder to show while content is loading. |41## Form43| Component | Description |45| --------------------------------------------- | ------------------------------------------------------------------------ |46| [Checkbox](components/checkbox.md) | An input element to toggle between checked and unchecked states. |47| [CheckboxGroup](components/checkbox-group.md) | A set of checklist buttons to select multiple option from a list. |48| [ColorPicker](components/color-picker.md) | A component to select a color. |49| [FileUpload](components/file-upload.md) | An input element to upload files. |50| [Form](components/form.md) | A form component with built-in validation and submission handling. |51| [FormField](components/form-field.md) | A wrapper for form elements that provides validation and error handling. |52| [Input](components/input.md) | An input element to enter text. |53| [InputDate](components/input-date.md) | An input component for date selection. (v4.2+) |54| [InputMenu](components/input-menu.md) | An autocomplete input with real-time suggestions. |55| [InputNumber](components/input-number.md) | An input for numerical values with a customizable range. |56| [InputTags](components/input-tags.md) | An input element that displays interactive tags. |57| [InputTime](components/input-time.md) | An input for selecting a time. (v4.2+) |58| [PinInput](components/pin-input.md) | An input element to enter a pin. |59| [RadioGroup](components/radio-group.md) | A set of radio buttons to select a single option from a list. |60| [Select](components/select.md) | A select element to choose from a list of options. |61| [SelectMenu](components/select-menu.md) | An advanced searchable select element. |62| [Slider](components/slider.md) | An input to select a numeric value within a range. |63| [Switch](components/switch.md) | A control that toggles between two states. |64| [Textarea](components/textarea.md) | A textarea element to input multi-line text. |65## Layout67| Component | Description |69| ------------------------------------ | -------------------------------------------------------------------- |70| [App](components/app.md) | Wraps your app to provide global configurations and more. |71| [Container](components/container.md) | A container lets you center and constrain the width of your content. |72| [Error](components/error.md) | A pre-built error component with NuxtError support. |73| [Footer](components/footer.md) | A responsive footer component. |74| [Header](components/header.md) | A responsive header component. |75| [Main](components/main.md) | A main element that fills the available viewport height. |76## Navigation78| Component | Description |80| ----------------------------------------------- | ---------------------------------------------------------------------------------------- |81| [Breadcrumb](components/breadcrumb.md) | A hierarchy of links to navigate through a website. |82| [CommandPalette](components/command-palette.md) | A command palette with full-text search powered by Fuse.js for efficient fuzzy matching. |83| [FooterColumns](components/footer-columns.md) | A list of links as columns to display in your Footer. |84| [Link](components/link.md) | A wrapper around <NuxtLink> with extra props. |85| [NavigationMenu](components/navigation-menu.md) | A list of links that can be displayed horizontally or vertically. |86| [Pagination](components/pagination.md) | A list of buttons or links to navigate through pages. |87| [Stepper](components/stepper.md) | A set of steps that are used to indicate progress through a multi-step process. |88| [Tabs](components/tabs.md) | A set of tab panels that are displayed one at a time. |89## Other91| Component | Description | Version |93| -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------- |94| [AuthForm](components/auth-form.md) | A customizable Form to create login, register or password reset forms. | |95| [BlogPost](components/blog-post.md) | A customizable article to display in a blog page. | |96| [BlogPosts](components/blog-posts.md) | Display a list of blog posts in a responsive grid layout. | |97| [ChangelogVersion](components/changelog-version.md) | A customizable article to display in a changelog. | |98| [ChangelogVersions](components/changelog-versions.md) | Display a list of changelog versions in a timeline. | |99| [ChatMessage](components/chat-message.md) | Display a chat message with icon, avatar, and actions. | |100| [ChatMessages](components/chat-messages.md) | Display a list of chat messages, designed to work seamlessly with Vercel AI SDK. | |101| [ChatPalette](components/chat-palette.md) | A chat palette to create a chatbot interface inside an overlay. | |102| [ChatPrompt](components/chat-prompt.md) | An enhanced Textarea for submitting prompts in AI chat interfaces. | |103| [ChatPromptSubmit](components/chat-prompt-submit.md) | A Button for submitting chat prompts with automatic status handling. | |104| [ColorModeAvatar](components/color-mode-avatar.md) | An Avatar with a different source for light and dark mode. | |105| [ColorModeButton](components/color-mode-button.md) | A Button to switch between light and dark mode. | |106| [ColorModeImage](components/color-mode-image.md) | An image element with a different source for light and dark mode. | |107| [ColorModeSelect](components/color-mode-select.md) | A Select to switch between system, dark & light mode. | |108| [ColorModeSwitch](components/color-mode-switch.md) | A switch to toggle between light and dark mode. | |109| [ContentNavigation](components/content-navigation.md) | An accordion-style navigation component for organizing page links. | |110| [ContentSearch](components/content-search.md) | A ready to use CommandPalette to add to your documentation. | |111| [ContentSearchButton](components/content-search-button.md) | A pre-styled Button to open the ContentSearch modal. | |112| [ContentSurround](components/content-surround.md) | A pair of prev and next links to navigate between pages. | |113| [ContentToc](components/content-toc.md) | A sticky Table of Contents with automatic active anchor link highlighting. | |114| [DashboardGroup](components/dashboard-group.md) | A fixed layout component that provides context for dashboard components with sidebar state management and persistence. | |115| [DashboardNavbar](components/dashboard-navbar.md) | A responsive navbar to display in a dashboard. | |116| [DashboardPanel](components/dashboard-panel.md) | A resizable panel to display in a dashboard. | |117| [DashboardResizeHandle](components/dashboard-resize-handle.md) | A handle to resize a sidebar or panel. | |118| [DashboardSearch](components/dashboard-search.md) | A ready to use CommandPalette to add to your dashboard. | |119| [DashboardSearchButton](components/dashboard-search-button.md) | A pre-styled Button to open the DashboardSearch modal. | |120| [DashboardSidebar](components/dashboard-sidebar.md) | A resizable and collapsible sidebar to display in a dashboard. | |121| [DashboardSidebarCollapse](components/dashboard-sidebar-collapse.md) | A Button to collapse the sidebar on desktop. | |122| [DashboardSidebarToggle](components/dashboard-sidebar-toggle.md) | A Button to toggle the sidebar on mobile. | |123| [DashboardToolbar](components/dashboard-toolbar.md) | A toolbar to display under the navbar in a dashboard. | |124| [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+ |125| [EditorDragHandle](components/editor-drag-handle.md) | A draggable handle for reordering and selecting blocks in the editor. (v4.3+) | v4.3+ |126| [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+ |127| [EditorMentionMenu](components/editor-mention-menu.md) | A mention menu that displays user suggestions when typing the @ character in the editor. (v4.3+) | v4.3+ |128| [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+ |129| [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+ |130| [LocaleSelect](components/locale-select.md) | A Select to switch between locales. | |131| [Page](components/page.md) | A grid layout for your pages with left and right columns. | |132| [PageAnchors](components/page-anchors.md) | A list of anchors to be displayed in the page. | |133| [PageAside](components/page-aside.md) | A sticky aside to display your page navigation. | |134| [PageBody](components/page-body.md) | The main content of your page. | |135| [PageCard](components/page-card.md) | A pre-styled card component that displays a title, description and optional link. | |136| [PageColumns](components/page-columns.md) | A responsive multi-column layout system for organizing content side-by-side. | |137| [PageCta](components/page-cta.md) | A call to action section to display in your pages. | |138| [PageFeature](components/page-feature.md) | A component to showcase key features of your application. | |139| [PageGrid](components/page-grid.md) | A responsive grid system for displaying content in a flexible layout. | |140| [PageHeader](components/page-header.md) | A responsive header for your pages. | |141| [PageHero](components/page-hero.md) | A responsive hero for your pages. | |142| [PageLinks](components/page-links.md) | A list of links to be displayed in the page. | |143| [PageList](components/page-list.md) | A vertical list layout for displaying content in a stacked format. | |144| [PageLogos](components/page-logos.md) | A list of logos or images to display on your pages. | |145| [PageSection](components/page-section.md) | A responsive section for your pages. | |146| [PricingPlan](components/pricing-plan.md) | A customizable pricing plan to display in a pricing page. | |147| [PricingPlans](components/pricing-plans.md) | Display a list of pricing plans in a responsive grid layout. | |148| [PricingTable](components/pricing-table.md) | A responsive pricing table component that displays tiered pricing plans with feature comparisons. | |149## Overlay151| Component | Description |153| ------------------------------------------- | ---------------------------------------------------------------------------- |154| [ContextMenu](components/context-menu.md) | A menu to display actions when right-clicking on an element. |155| [Drawer](components/drawer.md) | A drawer that smoothly slides in & out of the screen. |156| [DropdownMenu](components/dropdown-menu.md) | A menu to display actions when clicking on an element. |157| [Modal](components/modal.md) | A dialog window that can be used to display a message or request user input. |158| [Popover](components/popover.md) | A non-modal dialog that floats around a trigger element. |159| [Slideover](components/slideover.md) | A dialog that slides in from any side of the screen. |160| [Toast](components/toast.md) | A succinct message to provide information or feedback to the user. |161| [Tooltip](components/tooltip.md) | A popup that reveals information when hovering over an element. |162