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

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

## Getting Started

- [Introduction](https://ui.nuxt.com/getting-started): Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
- [Installation](https://ui.nuxt.com/getting-started/installation/nuxt): Learn how to install and configure Nuxt UI in your Nuxt application.
- [Installation](https://ui.nuxt.com/getting-started/installation/vue): Learn how to install and configure Nuxt UI in your Vue application.
- [Installation](https://ui.nuxt.com/getting-started/installation/pro/nuxt): Learn how to install and configure Nuxt UI Pro in your Nuxt application.
- [Installation](https://ui.nuxt.com/getting-started/installation/pro/vue): Learn how to install and configure Nuxt UI Pro in your Vue application.
- [Migration](https://ui.nuxt.com/getting-started/migration): A comprehensive guide to migrate your application from Nuxt UI v2 to Nuxt UI v3.
- [License](https://ui.nuxt.com/getting-started/license): Nuxt UI Pro is free in development, but you need a license to build your app in production.
- [Theme](https://ui.nuxt.com/getting-started/theme): Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.
- [Icons](https://ui.nuxt.com/getting-started/icons/nuxt): Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
- [Icons](https://ui.nuxt.com/getting-started/icons/vue): Nuxt UI integrates with Iconify to access over 200,000+ icons.
- [Fonts](https://ui.nuxt.com/getting-started/fonts): Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
- [Color Mode](https://ui.nuxt.com/getting-started/color-mode/nuxt): Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.
- [Color Mode](https://ui.nuxt.com/getting-started/color-mode/vue): Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.
- [Internationalization (i18n)](https://ui.nuxt.com/getting-started/i18n/nuxt): Learn how to internationalize your Nuxt app with multi-directional support (LTR/RTL).
- [Internationalization (i18n)](https://ui.nuxt.com/getting-started/i18n/vue): Learn how to internationalize your Vue app with multi-directional support (LTR/RTL).
- [Content](https://ui.nuxt.com/getting-started/content): Nuxt UI Pro enhances Nuxt Content with beautiful components and styling.
- [Typography](https://ui.nuxt.com/getting-started/typography): Nuxt UI Pro provides beautiful typography components and utilities to style your content.
- [Contribution Guide](https://ui.nuxt.com/getting-started/contribution): A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.

## Components

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

## Composables

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

## Notes

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