# Nuxt Ui

> A stacked set of collapsible panels.

## Pages

- [Accordion](accordion.md): A stacked set of collapsible panels.
- [Alert](alert.md): A callout to draw user's attention.
- [App](app.md): Wraps your app to provide global configurations and more.
- [AuthForm](auth-form.md): A customizable Form to create login, register or password reset forms.
- [AvatarGroup](avatar-group.md): Stack multiple avatars in a group.
- [Avatar](avatar.md): An img element with fallback and Nuxt Image support.
- [Badge](badge.md): A short text to represent a status or a category.
- [Banner](banner.md): Display a banner at the top of your website to inform users about important information.
- [BlogPost](blog-post.md): A customizable article to display in a blog page.
- [BlogPosts](blog-posts.md): Display a list of blog posts in a responsive grid layout.
- [Breadcrumb](breadcrumb.md): A hierarchy of links to navigate through a website.
- [Button](button.md): A button element that can act as a link or trigger an action.
- [Calendar](calendar.md): A calendar component for selecting single dates, multiple dates or date ranges.
- [Card](card.md): Display content in a card with a header, body and footer.
- [Carousel](carousel.md): A carousel with motion and swipe built using Embla.
- [ChangelogVersion](changelog-version.md): A customizable article to display in a changelog.
- [ChangelogVersions](changelog-versions.md): Display a list of changelog versions in a timeline.
- [ChatMessage](chat-message.md): Display a chat message with icon, avatar, and actions.
- [ChatMessages](chat-messages.md): Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.
- [ChatPalette](chat-palette.md): A chat palette to create a chatbot interface inside an overlay.
- [ChatPromptSubmit](chat-prompt-submit.md): A Button for submitting chat prompts with automatic status handling.
- [ChatPrompt](chat-prompt.md): An enhanced Textarea for submitting prompts in AI chat interfaces.
- [CheckboxGroup](checkbox-group.md): A set of checklist buttons to select multiple option from a list.
- [Checkbox](checkbox.md): An input element to toggle between checked and unchecked states.
- [Chip](chip.md): An indicator of a numeric value or a state.
- [Collapsible](collapsible.md): A collapsible element to toggle visibility of its content.
- [ColorModeAvatar](color-mode-avatar.md): An Avatar with a different source for light and dark mode.
- [ColorModeButton](color-mode-button.md): A Button to switch between light and dark mode.
- [ColorModeImage](color-mode-image.md): An image element with a different source for light and dark mode.
- [ColorModeSelect](color-mode-select.md): A Select to switch between system, dark & light mode.
- [ColorModeSwitch](color-mode-switch.md): A switch to toggle between light and dark mode.
- [ColorPicker](color-picker.md): A component to select a color.
- [CommandPalette](command-palette.md): A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.
- [Customize components](components.md): Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable sty...
- [Container](container.md): A container lets you center and constrain the width of your content.
- [ContentNavigation](content-navigation.md): An accordion-style navigation component for organizing page links.
- [ContentSearchButton](content-search-button.md): A pre-styled Button to open the ContentSearch modal.
- [ContentSearch](content-search.md): A ready to use CommandPalette to add to your documentation.
- [ContentSurround](content-surround.md): A pair of prev and next links to navigate between pages.
- [ContentToc](content-toc.md): A sticky Table of Contents with automatic active anchor link highlighting.
- [Content](content.md): Nuxt UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.
- [ContextMenu](context-menu.md): A menu to display actions when right-clicking on an element.
- [Contribution](contribution.md): A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.
- [CSS Variables](css-variables.md): Nuxt UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.
- [DashboardGroup](dashboard-group.md): A fixed layout component that provides context for dashboard components with sidebar state management and persistence.
- [DashboardNavbar](dashboard-navbar.md): A responsive navbar to display in a dashboard.
- [DashboardPanel](dashboard-panel.md): A resizable panel to display in a dashboard.
- [DashboardResizeHandle](dashboard-resize-handle.md): A handle to resize a sidebar or panel.
- [DashboardSearchButton](dashboard-search-button.md): A pre-styled Button to open the DashboardSearch modal.
- [DashboardSearch](dashboard-search.md): A ready to use CommandPalette to add to your dashboard.
- [DashboardSidebarCollapse](dashboard-sidebar-collapse.md): A Button to collapse the sidebar on desktop.
- [DashboardSidebarToggle](dashboard-sidebar-toggle.md): A Button to toggle the sidebar on mobile.
- [DashboardSidebar](dashboard-sidebar.md): A resizable and collapsible sidebar to display in a dashboard.
- [DashboardToolbar](dashboard-toolbar.md): A toolbar to display under the navbar in a dashboard.
- [defineLocale](define-locale.md): A utility to create a custom locale for your app.
- [defineShortcuts](define-shortcuts.md): A composable to define keyboard shortcuts in your app.
- [Design System](design-system.md): Nuxt UI's design system uses Tailwind CSS for simple theming and easy customization.
- [Drawer](drawer.md): A drawer that smoothly slides in & out of the screen.
- [DropdownMenu](dropdown-menu.md): A menu to display actions when clicking on an element.
- [EditorDragHandle](editor-drag-handle.md): A draggable handle for reordering and selecting blocks in the editor.
- [EditorEmojiMenu](editor-emoji-menu.md): An emoji picker menu that displays emoji suggestions when typing the : character in the editor.
- [EditorMentionMenu](editor-mention-menu.md): A mention menu that displays user suggestions when typing the @ character in the editor.
- [EditorSuggestionMenu](editor-suggestion-menu.md): A command menu that displays formatting and action suggestions when typing the / character in the editor.
- [EditorToolbar](editor-toolbar.md): A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.
- [Editor](editor.md): A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.
- [Empty](empty.md): A component to display an empty state.
- [Error](error.md): A pre-built error component with NuxtError support.
- [extendLocale](extend-locale.md): A utility to extend an existing locale with custom translations.
- [extractShortcuts](extract-shortcuts.md): A utility to extract keyboard shortcuts from menu items.
- [FieldGroup](field-group.md): Group multiple button-like elements together.
- [FileUpload](file-upload.md): An input element to upload files.
- [Fonts](fonts.md): Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
- [FooterColumns](footer-columns.md): A list of links as columns to display in your Footer.
- [Footer](footer.md): A responsive footer component.
- [FormField](form-field.md): A wrapper for form elements that provides validation and error handling.
- [Form](form.md): A form component with built-in validation and submission handling.
- [Introduction](getting-started.md): Nuxt UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, Tailwind CSS component...
- [Header](header.md): A responsive header component.
- [Icon](icon.md): A component to display any icon from Iconify or another component.
- [InputDate](input-date.md): An input component for date selection.
- [InputMenu](input-menu.md): An autocomplete input with real-time suggestions.
- [InputNumber](input-number.md): An input for numerical values with a customizable range.
- [InputTags](input-tags.md): An input element that displays interactive tags.
- [InputTime](input-time.md): An input for selecting a time.
- [Input](input.md): An input element to enter text.
- [Kbd](kbd.md): A kbd element to display a keyboard key.
- [Link](link.md): A wrapper around with extra props.
- [LLMs.txt](llms-txt.md): How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Nuxt UI components, them...
- [LocaleSelect](locale-select.md): A Select to switch between locales.
- [Main](main.md): A main element that fills the available viewport height.
- [Marquee](marquee.md): A component to create infinite scrolling content.
- [MCP Server](mcp.md): Use Nuxt UI components in your AI assistants with Model Context Protocol support.
- [Modal](modal.md): A dialog window that can be used to display a message or request user input.
- [NavigationMenu](navigation-menu.md): A list of links that can be displayed horizontally or vertically.
- [Installation](nuxt.md): Learn how to install and configure Nuxt UI in your Nuxt application.
- [PageAnchors](page-anchors.md): A list of anchors to be displayed in the page.
- [PageAside](page-aside.md): A sticky aside to display your page navigation.
- [PageBody](page-body.md): The main content of your page.
- [PageCard](page-card.md): A pre-styled card component that displays a title, description and optional link.
- [PageColumns](page-columns.md): A responsive multi-column layout system for organizing content side-by-side.
- [PageCTA](page-cta.md): A call to action section to display in your pages.
- [PageFeature](page-feature.md): A component to showcase key features of your application.
- [PageGrid](page-grid.md): A responsive grid system for displaying content in a flexible layout.
- [PageHeader](page-header.md): A responsive header for your pages.
- [PageHero](page-hero.md): A responsive hero for your pages.
- [PageLinks](page-links.md): A list of links to be displayed in the page.
- [PageList](page-list.md): A vertical list layout for displaying content in a stacked format.
- [PageLogos](page-logos.md): A list of logos or images to display on your pages.
- [PageSection](page-section.md): A responsive section for your pages.
- [Page](page.md): A grid layout for your pages with left and right columns.
- [Pagination](pagination.md): A list of buttons or links to navigate through pages.
- [PinInput](pin-input.md): An input element to enter a pin.
- [Popover](popover.md): A non-modal dialog that floats around a trigger element.
- [PricingPlan](pricing-plan.md): A customizable pricing plan to display in a pricing page.
- [PricingPlans](pricing-plans.md): Display a list of pricing plans in a responsive grid layout.
- [PricingTable](pricing-table.md): A responsive pricing table component that displays tiered pricing plans with feature comparisons.
- [Progress](progress.md): An indicator showing the progress of a task.
- [RadioGroup](radio-group.md): A set of radio buttons to select a single option from a list.
- [ScrollArea](scroll-area.md): A flexible scroll container with virtualization support.
- [SelectMenu](select-menu.md): An advanced searchable select element.
- [Select](select.md): A select element to choose from a list of options.
- [Separator](separator.md): Separates content horizontally or vertically.
- [Skeleton](skeleton.md): A placeholder to show while content is loading.
- [Slideover](slideover.md): A dialog that slides in from any side of the screen.
- [Slider](slider.md): An input to select a numeric value within a range.
- [SSR](ssr.md): Nuxt UI has first-party support for Vue SSR. This guide will help you have it fully enabled.
- [Stepper](stepper.md): A set of steps that are used to indicate progress through a multi-step process.
- [Switch](switch.md): A control that toggles between two states.
- [Table](table.md): A responsive table element to display data in rows and columns.
- [Tabs](tabs.md): A set of tab panels that are displayed one at a time.
- [Textarea](textarea.md): A textarea element to input multi-line text.
- [Timeline](timeline.md): A component that displays a sequence of events with dates, titles, icons or avatars.
- [Toast](toast.md): A succinct message to provide information or feedback to the user.
- [Tooltip](tooltip.md): A popup that reveals information when hovering over an element.
- [Tree](tree.md): A tree view component to display and interact with hierarchical data structures.
- [useFormField](use-form-field.md): A composable to integrate custom inputs with the Form component
- [useOverlay](use-overlay.md): A composable to programmatically control overlays.
- [useToast](use-toast.md): A composable to display toast notifications in your app.
- [User](user.md): Display user information with name, description and avatar.
- [Migration to v3](v3.md): A comprehensive guide to migrate your application from Nuxt UI v2 to Nuxt UI v3.
- [Migration to v4](v4.md): A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.
- [Installation](vue.md): Learn how to install and configure Nuxt UI in your Vue application, compatible with both plain Vite and Inertia.