# Nuxt UI

> A comprehensive, Nuxt-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications.

## Getting Started

- [Introduction](https://ui.nuxt.com/raw/docs/getting-started.md): Nuxt UI is a comprehensive UI library for Vue and Nuxt applications, offering a collection of fully styled and accessible components.
- [Installation](https://ui.nuxt.com/raw/docs/getting-started/installation/nuxt.md): Learn how to install and configure Nuxt UI in your Nuxt application.
- [Installation](https://ui.nuxt.com/raw/docs/getting-started/installation/vue.md): Learn how to install and configure Nuxt UI in your Vue application, compatible with both plain Vite and Inertia.
- [Migration to v4](https://ui.nuxt.com/raw/docs/getting-started/migration/v4.md): A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.
- [Migration to v3](https://ui.nuxt.com/raw/docs/getting-started/migration/v3.md): A comprehensive guide to migrate your application from Nuxt UI v2 to Nuxt UI v3.
- [Contribution](https://ui.nuxt.com/raw/docs/getting-started/contribution.md): A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.
- [Design System](https://ui.nuxt.com/raw/docs/getting-started/theme/design-system.md): Nuxt UI's design system uses Tailwind CSS for simple theming and easy customization.
- [CSS Variables](https://ui.nuxt.com/raw/docs/getting-started/theme/css-variables.md): Nuxt UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.
- [Customize components](https://ui.nuxt.com/raw/docs/getting-started/theme/components.md): Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.
- [Icons](https://ui.nuxt.com/raw/docs/getting-started/integrations/icons/nuxt.md): Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
- [Icons](https://ui.nuxt.com/raw/docs/getting-started/integrations/icons/vue.md): Nuxt UI integrates with Iconify to access over 200,000+ icons.
- [Fonts](https://ui.nuxt.com/raw/docs/getting-started/integrations/fonts.md): Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
- [Color Mode](https://ui.nuxt.com/raw/docs/getting-started/integrations/color-mode/nuxt.md): Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.
- [Color Mode](https://ui.nuxt.com/raw/docs/getting-started/integrations/color-mode/vue.md): Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.
- [Internationalization (i18n)](https://ui.nuxt.com/raw/docs/getting-started/integrations/i18n/nuxt.md): Nuxt UI supports 50+ locales and multi-directional (LTR/RTL) internationalization.
- [Internationalization (i18n)](https://ui.nuxt.com/raw/docs/getting-started/integrations/i18n/vue.md): Nuxt UI supports 50+ locales and multi-directional (LTR/RTL) internationalization.
- [Content](https://ui.nuxt.com/raw/docs/getting-started/integrations/content.md): Nuxt UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.
- [MCP Server](https://ui.nuxt.com/raw/docs/getting-started/ai/mcp.md): Use Nuxt UI components in your AI assistants with Model Context Protocol support.
- [LLMs.txt](https://ui.nuxt.com/raw/docs/getting-started/ai/llms-txt.md): How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Nuxt UI components, theming, and best practices.

## Components

- [Accordion](https://ui.nuxt.com/raw/docs/components/accordion.md): A stacked set of collapsible panels.
- [Alert](https://ui.nuxt.com/raw/docs/components/alert.md): A callout to draw user's attention.
- [App](https://ui.nuxt.com/raw/docs/components/app.md): Wraps your app to provide global configurations and more.
- [AuthForm](https://ui.nuxt.com/raw/docs/components/auth-form.md): A customizable Form to create login, register or password reset forms.
- [Avatar](https://ui.nuxt.com/raw/docs/components/avatar.md): An img element with fallback and Nuxt Image support.
- [AvatarGroup](https://ui.nuxt.com/raw/docs/components/avatar-group.md): Stack multiple avatars in a group.
- [Badge](https://ui.nuxt.com/raw/docs/components/badge.md): A short text to represent a status or a category.
- [Banner](https://ui.nuxt.com/raw/docs/components/banner.md): Display a banner at the top of your website to inform users about important information.
- [BlogPost](https://ui.nuxt.com/raw/docs/components/blog-post.md): A customizable article to display in a blog page.
- [BlogPosts](https://ui.nuxt.com/raw/docs/components/blog-posts.md): Display a list of blog posts in a responsive grid layout.
- [Breadcrumb](https://ui.nuxt.com/raw/docs/components/breadcrumb.md): A hierarchy of links to navigate through a website.
- [Button](https://ui.nuxt.com/raw/docs/components/button.md): A button element that can act as a link or trigger an action.
- [Calendar](https://ui.nuxt.com/raw/docs/components/calendar.md): A calendar component for selecting single dates, multiple dates or date ranges.
- [Card](https://ui.nuxt.com/raw/docs/components/card.md): Display content in a card with a header, body and footer.
- [Carousel](https://ui.nuxt.com/raw/docs/components/carousel.md): A carousel with motion and swipe built using Embla.
- [ChangelogVersion](https://ui.nuxt.com/raw/docs/components/changelog-version.md): A customizable article to display in a changelog.
- [ChangelogVersions](https://ui.nuxt.com/raw/docs/components/changelog-versions.md): Display a list of changelog versions in a timeline.
- [ChatMessage](https://ui.nuxt.com/raw/docs/components/chat-message.md): Display a chat message with icon, avatar, and actions.
- [ChatMessages](https://ui.nuxt.com/raw/docs/components/chat-messages.md): Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.
- [ChatPalette](https://ui.nuxt.com/raw/docs/components/chat-palette.md): A chat palette to create a chatbot interface inside an overlay.
- [ChatPrompt](https://ui.nuxt.com/raw/docs/components/chat-prompt.md): An enhanced Textarea for submitting prompts in AI chat interfaces.
- [ChatPromptSubmit](https://ui.nuxt.com/raw/docs/components/chat-prompt-submit.md): A Button for submitting chat prompts with automatic status handling.
- [Checkbox](https://ui.nuxt.com/raw/docs/components/checkbox.md): An input element to toggle between checked and unchecked states.
- [CheckboxGroup](https://ui.nuxt.com/raw/docs/components/checkbox-group.md): A set of checklist buttons to select multiple option from a list.
- [Chip](https://ui.nuxt.com/raw/docs/components/chip.md): An indicator of a numeric value or a state.
- [Collapsible](https://ui.nuxt.com/raw/docs/components/collapsible.md): A collapsible element to toggle visibility of its content.
- [ColorModeAvatar](https://ui.nuxt.com/raw/docs/components/color-mode-avatar.md): An Avatar with a different source for light and dark mode.
- [ColorModeButton](https://ui.nuxt.com/raw/docs/components/color-mode-button.md): A Button to switch between light and dark mode.
- [ColorModeImage](https://ui.nuxt.com/raw/docs/components/color-mode-image.md): An image element with a different source for light and dark mode.
- [ColorModeSelect](https://ui.nuxt.com/raw/docs/components/color-mode-select.md): A Select to switch between system, dark & light mode.
- [ColorModeSwitch](https://ui.nuxt.com/raw/docs/components/color-mode-switch.md): A switch to toggle between light and dark mode.
- [ColorPicker](https://ui.nuxt.com/raw/docs/components/color-picker.md): A component to select a color.
- [CommandPalette](https://ui.nuxt.com/raw/docs/components/command-palette.md): A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.
- [Container](https://ui.nuxt.com/raw/docs/components/container.md): A container lets you center and constrain the width of your content.
- [ContentNavigation](https://ui.nuxt.com/raw/docs/components/content-navigation.md): An accordion-style navigation component for organizing page links.
- [ContentSearch](https://ui.nuxt.com/raw/docs/components/content-search.md): A ready to use CommandPalette to add to your documentation.
- [ContentSearchButton](https://ui.nuxt.com/raw/docs/components/content-search-button.md): A pre-styled Button to open the ContentSearch modal.
- [ContentSurround](https://ui.nuxt.com/raw/docs/components/content-surround.md): A pair of prev and next links to navigate between pages.
- [ContentToc](https://ui.nuxt.com/raw/docs/components/content-toc.md): A sticky Table of Contents with automatic active anchor link highlighting.
- [ContextMenu](https://ui.nuxt.com/raw/docs/components/context-menu.md): A menu to display actions when right-clicking on an element.
- [DashboardGroup](https://ui.nuxt.com/raw/docs/components/dashboard-group.md): A fixed layout component that provides context for dashboard components with sidebar state management and persistence.
- [DashboardNavbar](https://ui.nuxt.com/raw/docs/components/dashboard-navbar.md): A responsive navbar to display in a dashboard.
- [DashboardPanel](https://ui.nuxt.com/raw/docs/components/dashboard-panel.md): A resizable panel to display in a dashboard.
- [DashboardResizeHandle](https://ui.nuxt.com/raw/docs/components/dashboard-resize-handle.md): A handle to resize a sidebar or panel.
- [DashboardSearch](https://ui.nuxt.com/raw/docs/components/dashboard-search.md): A ready to use CommandPalette to add to your dashboard.
- [DashboardSearchButton](https://ui.nuxt.com/raw/docs/components/dashboard-search-button.md): A pre-styled Button to open the DashboardSearch modal.
- [DashboardSidebar](https://ui.nuxt.com/raw/docs/components/dashboard-sidebar.md): A resizable and collapsible sidebar to display in a dashboard.
- [DashboardSidebarCollapse](https://ui.nuxt.com/raw/docs/components/dashboard-sidebar-collapse.md): A Button to collapse the sidebar on desktop.
- [DashboardSidebarToggle](https://ui.nuxt.com/raw/docs/components/dashboard-sidebar-toggle.md): A Button to toggle the sidebar on mobile.
- [DashboardToolbar](https://ui.nuxt.com/raw/docs/components/dashboard-toolbar.md): A toolbar to display under the navbar in a dashboard.
- [Drawer](https://ui.nuxt.com/raw/docs/components/drawer.md): A drawer that smoothly slides in & out of the screen.
- [DropdownMenu](https://ui.nuxt.com/raw/docs/components/dropdown-menu.md): A menu to display actions when clicking on an element.
- [Empty](https://ui.nuxt.com/raw/docs/components/empty.md): A component to display an empty state.
- [Error](https://ui.nuxt.com/raw/docs/components/error.md): A pre-built error component with NuxtError support.
- [FieldGroup](https://ui.nuxt.com/raw/docs/components/field-group.md): Group multiple button-like elements together.
- [FileUpload](https://ui.nuxt.com/raw/docs/components/file-upload.md): An input element to upload files.
- [Footer](https://ui.nuxt.com/raw/docs/components/footer.md): A responsive footer component.
- [FooterColumns](https://ui.nuxt.com/raw/docs/components/footer-columns.md): A list of links as columns to display in your Footer.
- [Form](https://ui.nuxt.com/raw/docs/components/form.md): A form component with built-in validation and submission handling.
- [FormField](https://ui.nuxt.com/raw/docs/components/form-field.md): A wrapper for form elements that provides validation and error handling.
- [Header](https://ui.nuxt.com/raw/docs/components/header.md): A responsive header component.
- [Icon](https://ui.nuxt.com/raw/docs/components/icon.md): A component to display any icon from Iconify or another component.
- [Input](https://ui.nuxt.com/raw/docs/components/input.md): An input element to enter text.
- [InputMenu](https://ui.nuxt.com/raw/docs/components/input-menu.md): An autocomplete input with real-time suggestions.
- [InputNumber](https://ui.nuxt.com/raw/docs/components/input-number.md): An input for numerical values with a customizable range.
- [InputTags](https://ui.nuxt.com/raw/docs/components/input-tags.md): An input element that displays interactive tags.
- [Kbd](https://ui.nuxt.com/raw/docs/components/kbd.md): A kbd element to display a keyboard key.
- [Link](https://ui.nuxt.com/raw/docs/components/link.md): A wrapper around <NuxtLink> with extra props.
- [LocaleSelect](https://ui.nuxt.com/raw/docs/components/locale-select.md): A Select to switch between locales.
- [Main](https://ui.nuxt.com/raw/docs/components/main.md): A main element that fills the available viewport height.
- [Marquee](https://ui.nuxt.com/raw/docs/components/marquee.md): A component to create infinite scrolling content.
- [Modal](https://ui.nuxt.com/raw/docs/components/modal.md): A dialog window that can be used to display a message or request user input.
- [NavigationMenu](https://ui.nuxt.com/raw/docs/components/navigation-menu.md): A list of links that can be displayed horizontally or vertically.
- [Page](https://ui.nuxt.com/raw/docs/components/page.md): A grid layout for your pages with left and right columns.
- [PageAnchors](https://ui.nuxt.com/raw/docs/components/page-anchors.md): A list of anchors to be displayed in the page.
- [PageAside](https://ui.nuxt.com/raw/docs/components/page-aside.md): A sticky aside to display your page navigation.
- [PageBody](https://ui.nuxt.com/raw/docs/components/page-body.md): The main content of your page.
- [PageCard](https://ui.nuxt.com/raw/docs/components/page-card.md): A pre-styled card component that displays a title, description and optional link.
- [PageColumns](https://ui.nuxt.com/raw/docs/components/page-columns.md): A responsive multi-column layout system for organizing content side-by-side.
- [PageCTA](https://ui.nuxt.com/raw/docs/components/page-cta.md): A call to action section to display in your pages.
- [PageFeature](https://ui.nuxt.com/raw/docs/components/page-feature.md): A component to showcase key features of your application.
- [PageGrid](https://ui.nuxt.com/raw/docs/components/page-grid.md): A responsive grid system for displaying content in a flexible layout.
- [PageHeader](https://ui.nuxt.com/raw/docs/components/page-header.md): A responsive header for your pages.
- [PageHero](https://ui.nuxt.com/raw/docs/components/page-hero.md): A responsive hero for your pages.
- [PageLinks](https://ui.nuxt.com/raw/docs/components/page-links.md): A list of links to be displayed in the page.
- [PageList](https://ui.nuxt.com/raw/docs/components/page-list.md): A vertical list layout for displaying content in a stacked format.
- [PageLogos](https://ui.nuxt.com/raw/docs/components/page-logos.md): A list of logos or images to display on your pages.
- [PageSection](https://ui.nuxt.com/raw/docs/components/page-section.md): A responsive section for your pages.
- [Pagination](https://ui.nuxt.com/raw/docs/components/pagination.md): A list of buttons or links to navigate through pages.
- [PinInput](https://ui.nuxt.com/raw/docs/components/pin-input.md): An input element to enter a pin.
- [Popover](https://ui.nuxt.com/raw/docs/components/popover.md): A non-modal dialog that floats around a trigger element.
- [PricingPlan](https://ui.nuxt.com/raw/docs/components/pricing-plan.md): A customizable pricing plan to display in a pricing page.
- [PricingPlans](https://ui.nuxt.com/raw/docs/components/pricing-plans.md): Display a list of pricing plans in a responsive grid layout.
- [PricingTable](https://ui.nuxt.com/raw/docs/components/pricing-table.md): A responsive pricing table component that displays tiered pricing plans with feature comparisons.
- [Progress](https://ui.nuxt.com/raw/docs/components/progress.md): An indicator showing the progress of a task.
- [RadioGroup](https://ui.nuxt.com/raw/docs/components/radio-group.md): A set of radio buttons to select a single option from a list.
- [Select](https://ui.nuxt.com/raw/docs/components/select.md): A select element to choose from a list of options.
- [SelectMenu](https://ui.nuxt.com/raw/docs/components/select-menu.md): An advanced searchable select element.
- [Separator](https://ui.nuxt.com/raw/docs/components/separator.md): Separates content horizontally or vertically.
- [Skeleton](https://ui.nuxt.com/raw/docs/components/skeleton.md): A placeholder to show while content is loading.
- [Slideover](https://ui.nuxt.com/raw/docs/components/slideover.md): A dialog that slides in from any side of the screen.
- [Slider](https://ui.nuxt.com/raw/docs/components/slider.md): An input to select a numeric value within a range.
- [Stepper](https://ui.nuxt.com/raw/docs/components/stepper.md): A set of steps that are used to indicate progress through a multi-step process.
- [Switch](https://ui.nuxt.com/raw/docs/components/switch.md): A control that toggles between two states.
- [Table](https://ui.nuxt.com/raw/docs/components/table.md): A responsive table element to display data in rows and columns.
- [Tabs](https://ui.nuxt.com/raw/docs/components/tabs.md): A set of tab panels that are displayed one at a time.
- [Textarea](https://ui.nuxt.com/raw/docs/components/textarea.md): A textarea element to input multi-line text.
- [Timeline](https://ui.nuxt.com/raw/docs/components/timeline.md): A component that displays a sequence of events with dates, titles, icons or avatars.
- [Toast](https://ui.nuxt.com/raw/docs/components/toast.md): A succinct message to provide information or feedback to the user.
- [Tooltip](https://ui.nuxt.com/raw/docs/components/tooltip.md): A popup that reveals information when hovering over an element.
- [Tree](https://ui.nuxt.com/raw/docs/components/tree.md): A tree view component to display and interact with hierarchical data structures.
- [User](https://ui.nuxt.com/raw/docs/components/user.md): Display user information with name, description and avatar.

## Composables

- [defineShortcuts](https://ui.nuxt.com/raw/docs/composables/define-shortcuts.md): A composable to define keyboard shortcuts in your app.
- [useFormField](https://ui.nuxt.com/raw/docs/composables/use-form-field.md): A composable to integrate custom inputs with the Form component
- [useOverlay](https://ui.nuxt.com/raw/docs/composables/use-overlay.md): A composable to programmatically control overlays.
- [useToast](https://ui.nuxt.com/raw/docs/composables/use-toast.md): A composable to display toast notifications in your app.

## Documentation Sets

- [Nuxt UI Full Documentation](https://ui.nuxt.com/llms-full.txt): This is the full documentation for Nuxt UI. It includes all the Markdown files written with the MDC syntax.

## Notes

- The documentation excludes Nuxt UI v2 content.
- The content is automatically generated from the same source as the official documentation.