# Nuxt UI v3

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

## Docs

- [Nuxt UI v3](https://ui3.nuxt.dev/getting-started): A comprehensive, Nuxt-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications.
- [Installation](https://ui3.nuxt.dev/getting-started/installation/nuxt): Learn how to install and configure Nuxt UI in your Nuxt application.
- [Installation](https://ui3.nuxt.dev/getting-started/installation/vue): Learn how to install and configure Nuxt UI in your Vue application.
- [Installation](https://ui3.nuxt.dev/getting-started/installation/pro/nuxt): Learn how to install and configure Nuxt UI Pro in your Nuxt application.
- [License](https://ui3.nuxt.dev/getting-started/license): Nuxt UI Pro is free in development, but you need a license to build your app in production.
- [Theme](https://ui3.nuxt.dev/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://ui3.nuxt.dev/getting-started/icons/nuxt): Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
- [Icons](https://ui3.nuxt.dev/getting-started/icons/vue): Nuxt UI integrates with Iconify to access over 200,000+ icons.
- [Fonts](https://ui3.nuxt.dev/getting-started/fonts): Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
- [Color Mode](https://ui3.nuxt.dev/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://ui3.nuxt.dev/getting-started/color-mode/vue): Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.
- [Internationalization (i18n)](https://ui3.nuxt.dev/getting-started/i18n/nuxt): Learn how to internationalize your Nuxt app with multi-directional support (LTR/RTL).
- [Internationalization (i18n)](https://ui3.nuxt.dev/getting-started/i18n/vue): Learn how to internationalize your Vue app with multi-directional support (LTR/RTL).
- [Content](https://ui3.nuxt.dev/getting-started/content): Nuxt UI Pro enhances Nuxt Content with beautiful components and styling.
- [Typography](https://ui3.nuxt.dev/getting-started/typography): Nuxt UI Pro provides beautiful typography components and utilities to style your content.
- [Contribution Guide](https://ui3.nuxt.dev/getting-started/contribution): A comprehensive guide on contributing to Nuxt UI v3, including project structure, development workflow, and best practices.
- [defineShortcuts](https://ui3.nuxt.dev/composables/define-shortcuts): A composable to define keyboard shortcuts in your app.
- [useFormField](https://ui3.nuxt.dev/composables/use-form-field): A composable to integrate custom inputs with the Form component
- [useModal](https://ui3.nuxt.dev/composables/use-modal): A composable to programmatically control a Modal component.
- [useSlideover](https://ui3.nuxt.dev/composables/use-slideover): A composable to programmatically control a Slideover component.
- [useToast](https://ui3.nuxt.dev/composables/use-toast): A composable to display toast notifications in your app.
- [App](https://ui3.nuxt.dev/components/app): Wraps your app to provide global configurations and more.
- [Accordion](https://ui3.nuxt.dev/components/accordion): A stacked set of collapsible panels.
- [Alert](https://ui3.nuxt.dev/components/alert): A callout to draw user's attention.
- [Avatar](https://ui3.nuxt.dev/components/avatar): An img element with fallback and Nuxt Image support.
- [AvatarGroup](https://ui3.nuxt.dev/components/avatar-group): Stack multiple avatars in a group.
- [Badge](https://ui3.nuxt.dev/components/badge): A short text to represent a status or a category.
- [Banner](https://ui3.nuxt.dev/components/banner): Display a banner at the top of your website to inform users about important information.
- [BlogPost](https://ui3.nuxt.dev/components/blog-post): A customizable article to display in a blog page.
- [BlogPosts](https://ui3.nuxt.dev/components/blog-posts): Display a list of blog posts in a responsive grid layout.
- [Breadcrumb](https://ui3.nuxt.dev/components/breadcrumb): A hierarchy of links to navigate through a website.
- [Button](https://ui3.nuxt.dev/components/button): A button element that can act as a link or trigger an action.
- [ButtonGroup](https://ui3.nuxt.dev/components/button-group): Group multiple button-like elements together.
- [Calendar](https://ui3.nuxt.dev/components/calendar): A calendar component for selecting single dates, multiple dates or date ranges.
- [Card](https://ui3.nuxt.dev/components/card): Display content in a card with a header, body and footer.
- [Carousel](https://ui3.nuxt.dev/components/carousel): A carousel with motion and swipe built using Embla.
- [Checkbox](https://ui3.nuxt.dev/components/checkbox): An input element to toggle between checked and unchecked states.
- [Chip](https://ui3.nuxt.dev/components/chip): An indicator of a numeric value or a state.
- [Collapsible](https://ui3.nuxt.dev/components/collapsible): A collapsible element to toggle visibility of its content.
- [ColorModeAvatar](https://ui3.nuxt.dev/components/color-mode-avatar): An Avatar with a different source for light and dark mode.
- [ColorModeButton](https://ui3.nuxt.dev/components/color-mode-button): A Button to switch between light and dark mode.
- [ColorModeImage](https://ui3.nuxt.dev/components/color-mode-image): An image element with a different source for light and dark mode.
- [ColorModeSelect](https://ui3.nuxt.dev/components/color-mode-select): A Select to switch between system, dark & light mode.
- [ColorModeSwitch](https://ui3.nuxt.dev/components/color-mode-switch): A switch to toggle between light and dark mode.
- [ColorPicker](https://ui3.nuxt.dev/components/color-picker): A component to select a color.
- [CommandPalette](https://ui3.nuxt.dev/components/command-palette): A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.
- [Container](https://ui3.nuxt.dev/components/container): A container lets you center and constrain the width of your content.
- [ContentNavigation](https://ui3.nuxt.dev/components/content-navigation): An accordion-style navigation component for organizing page links.
- [ContentSearch](https://ui3.nuxt.dev/components/content-search): A ready to use CommandPalette to add to your documentation.
- [ContentSearchButton](https://ui3.nuxt.dev/components/content-search-button): A pre-styled Button to open the ContentSearch modal.
- [ContentSurround](https://ui3.nuxt.dev/components/content-surround): A pair of prev and next links to navigate between pages.
- [ContentToc](https://ui3.nuxt.dev/components/content-toc): A sticky Table of Contents with automatic active anchor link highlighting.
- [ContextMenu](https://ui3.nuxt.dev/components/context-menu): A menu to display actions when right-clicking on an element.
- [Drawer](https://ui3.nuxt.dev/components/drawer): A drawer that smoothly slides in & out of the screen.
- [DropdownMenu](https://ui3.nuxt.dev/components/dropdown-menu): A menu to display actions when clicking on an element.
- [Error](https://ui3.nuxt.dev/components/error): A pre-built error component with NuxtError support.
- [Footer](https://ui3.nuxt.dev/components/footer): A responsive footer component.
- [FooterColumns](https://ui3.nuxt.dev/components/footer-columns): A list of links as columns to display in your Footer.
- [Form](https://ui3.nuxt.dev/components/form): A form component with built-in validation and submission handling.
- [FormField](https://ui3.nuxt.dev/components/form-field): A wrapper for form elements that provides validation and error handling.
- [Header](https://ui3.nuxt.dev/components/header): A responsive header component.
- [Icon](https://ui3.nuxt.dev/components/icon): A component to display any icon from Iconify.
- [Input](https://ui3.nuxt.dev/components/input): An input element to enter text.
- [InputMenu](https://ui3.nuxt.dev/components/input-menu): An autocomplete input with real-time suggestions.
- [InputNumber](https://ui3.nuxt.dev/components/input-number): Input numerical values with a customizable range.
- [Keyboard Key](https://ui3.nuxt.dev/components/kbd): A kbd element to display a keyboard key.
- [Link](https://ui3.nuxt.dev/components/link): A wrapper around <NuxtLink> with extra props.
- [LocaleSelect](https://ui3.nuxt.dev/components/locale-select): A Select to switch between locales.
- [Main](https://ui3.nuxt.dev/components/main): A main element that fills the available viewport height.
- [Modal](https://ui3.nuxt.dev/components/modal): A dialog window that can be used to display a message or request user input.
- [NavigationMenu](https://ui3.nuxt.dev/components/navigation-menu): A list of links that can be displayed horizontally or vertically.
- [Page](https://ui3.nuxt.dev/components/page): A grid layout for your pages with left and right columns.
- [PageAccordion](https://ui3.nuxt.dev/components/page-accordion): A pre-styled Accordion to display in your pages.
- [PageAnchors](https://ui3.nuxt.dev/components/page-anchors): A list of anchors to be displayed in the page.
- [PageAside](https://ui3.nuxt.dev/components/page-aside): A sticky aside to display your page navigation.
- [PageBody](https://ui3.nuxt.dev/components/page-body): The main content of your page.
- [PageCard](https://ui3.nuxt.dev/components/page-card): A pre-styled card component that displays a title, description and optional link.
- [PageColumns](https://ui3.nuxt.dev/components/page-columns): A responsive multi-column layout system for organizing content side-by-side.
- [PageCTA](https://ui3.nuxt.dev/components/page-cta): A call to action section to display in your pages.
- [PageFeature](https://ui3.nuxt.dev/components/page-feature): A component to showcase key features of your application.
- [PageGrid](https://ui3.nuxt.dev/components/page-grid): A responsive grid system for displaying content in a flexible layout.
- [PageHeader](https://ui3.nuxt.dev/components/page-header): A responsive header for your pages.
- [PageHero](https://ui3.nuxt.dev/components/page-hero): A responsive hero for your pages.
- [PageLinks](https://ui3.nuxt.dev/components/page-links): A list of links to be displayed in the page.
- [PageList](https://ui3.nuxt.dev/components/page-list): A vertical list layout for displaying content in a stacked format.
- [PageLogos](https://ui3.nuxt.dev/components/page-logos): A list of logos or images to display on your pages.
- [PageMarquee](https://ui3.nuxt.dev/components/page-marquee): A component to create infinite scrolling content.
- [PageSection](https://ui3.nuxt.dev/components/page-section): A responsive section for your pages.
- [Pagination](https://ui3.nuxt.dev/components/pagination): A list of buttons or links to navigate through pages.
- [PinInput](https://ui3.nuxt.dev/components/pin-input): An input element to enter a pin.
- [Popover](https://ui3.nuxt.dev/components/popover): A non-modal dialog that floats around a trigger element.
- [PricingPlan](https://ui3.nuxt.dev/components/pricing-plan): A customizable pricing plan to display in a pricing page.
- [PricingPlans](https://ui3.nuxt.dev/components/pricing-plans): Display a list of pricing plans in a responsive grid layout.
- [Progress](https://ui3.nuxt.dev/components/progress): An indicator showing the progress of a task.
- [RadioGroup](https://ui3.nuxt.dev/components/radio-group): A set of radio buttons to select a single option from a list.
- [Select](https://ui3.nuxt.dev/components/select): A select element to choose from a list of options.
- [SelectMenu](https://ui3.nuxt.dev/components/select-menu): An advanced searchable select element.
- [Separator](https://ui3.nuxt.dev/components/separator): Separates content horizontally or vertically.
- [Skeleton](https://ui3.nuxt.dev/components/skeleton): A placeholder to show while content is loading.
- [Slideover](https://ui3.nuxt.dev/components/slideover): A dialog that slides in from any side of the screen.
- [Slider](https://ui3.nuxt.dev/components/slider): An input to select a numeric value within a range.
- [Stepper](https://ui3.nuxt.dev/components/stepper): A set of steps that are used to indicate progress through a multi-step process.
- [Switch](https://ui3.nuxt.dev/components/switch): A control that toggles between two states.
- [Table](https://ui3.nuxt.dev/components/table): A responsive table element to display data in rows and columns.
- [Tabs](https://ui3.nuxt.dev/components/tabs): A set of tab panels that are displayed one at a time.
- [Textarea](https://ui3.nuxt.dev/components/textarea): A textarea element to input multi-line text.
- [Toast](https://ui3.nuxt.dev/components/toast): A succinct message to provide information or feedback to the user.
- [Tooltip](https://ui3.nuxt.dev/components/tooltip): A popup that reveals information when hovering over an element.
- [User](https://ui3.nuxt.dev/components/user): Display user information with name, description and avatar.

## Notes

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