# nuxt/ui

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/nuxt-ui).**

6,271 stars · 1,021 forks · Vue · mit

## Links

- GitHub: https://github.com/nuxt/ui
- Homepage: https://ui.nuxt.com
- awesome-repositories: https://awesome-repositories.com/repository/nuxt-ui.md

## Topics

`components` `nuxt` `nuxt-module` `reka-ui` `tailwindcss` `ui` `vue`

## Description

Nuxt UI is a comprehensive Vue component library built for the Nuxt ecosystem, providing over 125 production-ready, WAI-ARIA compliant components for building modern web applications. The library offers a complete design system with Tailwind CSS theming, supporting dark mode, custom color palettes, semantic color aliases, and runtime theme switching through CSS design tokens. It includes built-in internationalization for over 50 languages, server-side rendering compatibility, and a Figma kit that mirrors the code components for design-to-development consistency.

The library distinguishes itself with extensive form handling capabilities, including schema-based validation with Zod or Valibot, nested form support, and configurable validation timing. It provides specialized input components for autocomplete with tag input and on-demand loading, code input with OTP support, numeric input with range constraints, and multi-select with checkbox options. The component set also includes advanced data visualization tools like progress bars with step labels and indeterminate animation, calendar components supporting single, range, multiple, and non-Gregorian date picking with event indicators and constraints, and pricing display components with grid, table, and card layouts.

Beyond core UI components, the library offers chat and messaging components with AI integration capabilities, including streaming responses, reasoning display, and tool-calling via the Model Context Protocol. It provides layout components for headers and footers with customizable slots, changelog timelines with scroll tracking, disclosure components with smooth transitions, and icon rendering from Iconify collections or custom SVGs. The library also includes performance optimizations like local icon serving and list virtualization, along with project scaffolding through pre-built templates for dashboards, SaaS, and landing pages.

The library is distributed under the MIT license and can be used in plain Vue applications via Vite plugins with auto-imports and TypeScript support, with full documentation available for all components and features.

## Tags

### Artificial Intelligence & ML

- [Chat State Managers](https://awesome-repositories.com/f/artificial-intelligence-ml/chat-state-managers.md) — Manages full conversation state on the client, including sending messages and handling streamed parts. ([source](https://ui.nuxt.com/raw/docs/components/chat.md))
- [Streaming Chat Responses](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-chat-clients/streaming-chat-responses.md) — Ships a component that streams AI responses with text, reasoning, and tool calls in real time. ([source](https://ui.nuxt.com/raw/docs/components/chat.md))
- [Tool Call Executions](https://awesome-repositories.com/f/artificial-intelligence-ml/mcp-tool-connectors/tool-call-executions.md) — Enables AI to call external tools via the Model Context Protocol for documentation searches or custom tasks. ([source](https://ui.nuxt.com/raw/docs/components/chat.md))
- [Collapsible Reasoning Displays](https://awesome-repositories.com/f/artificial-intelligence-ml/reasoning-models/reasoning-parsers/reasoning-content-normalizers/collapsible-reasoning-displays.md) — Provides a collapsible block that displays AI reasoning content, auto-opening during streaming. ([source](https://ui.nuxt.com/raw/docs/components/chat-reasoning.md))
- [Collapsible Reasoning Displays](https://awesome-repositories.com/f/artificial-intelligence-ml/reasoning-workflows/reasoning-process-controllers/collapsible-reasoning-displays.md) — Ships a collapsible block that shows the AI's internal reasoning steps for user inspection. ([source](https://ui.nuxt.com/raw/docs/components/chat.md))

### Part of an Awesome List

- [Calendars And Dates](https://awesome-repositories.com/f/awesome-lists/devtools/calendars-and-dates.md) — Ships a calendar component for selecting a single date with locale-aware formatting and keyboard navigation. ([source](https://ui.nuxt.com/raw/docs/components/calendar.md))
- [Form Validation](https://awesome-repositories.com/f/awesome-lists/devtools/form-validation.md) — Validates form data using user-defined functions that return errors keyed to specific form fields. ([source](https://ui.nuxt.com/raw/docs/components/form.md))
- [Nested Form Validation](https://awesome-repositories.com/f/awesome-lists/devtools/forms-and-validation/nested-form-validation.md) — Validates a group of nested forms together so that validating the parent automatically validates all children. ([source](https://ui.nuxt.com/raw/docs/components/form.md))
- [Icon Support](https://awesome-repositories.com/f/awesome-lists/devtools/icon-support.md) — Renders icons from the Iconify collection by name, supporting thousands of open-source icons. ([source](https://ui.nuxt.com/raw/docs/components/icon.md))
- [Dynamic Locale Switching](https://awesome-repositories.com/f/awesome-lists/devtools/internationalization-and-localization/dynamic-locale-switching.md) — Provides a locale selector dropdown that switches the active language across the application. ([source](https://ui.nuxt.com/raw/docs/components/locale-select.md))
- [Prompt Submissions](https://awesome-repositories.com/f/awesome-lists/media/chat/prompt-submissions.md) — Provides a button that submits the current text prompt and manages the chat's submission status automatically. ([source](https://ui.nuxt.com/raw/docs/components/chat-prompt-submit.md))

### User Interface & Experience

- [Accessible UI Components](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-components.md) — Ships over 125 production-ready, WAI-ARIA compliant components built on accessible primitives. ([source](https://ui.nuxt.com/raw/docs/getting-started.md))
- [Tailwind CSS Integration](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-css-integration.md) — Provides a complete design system with Tailwind CSS theming, dark mode, and custom color palettes. ([source](https://ui.nuxt.com/))
- [Date Pickers](https://awesome-repositories.com/f/user-interface-experience/date-pickers.md) — Combines a calendar with a button and popover for selecting a date from a dropdown. ([source](https://ui.nuxt.com/raw/docs/components/calendar.md))
- [Date Range Schedulers](https://awesome-repositories.com/f/user-interface-experience/date-range-schedulers.md) — Combines a calendar with a button, popover, and preset range shortcuts for selecting date intervals. ([source](https://ui.nuxt.com/raw/docs/components/calendar.md))
- [Checkbox Inputs](https://awesome-repositories.com/f/user-interface-experience/form-input-components/checkbox-inputs.md) — Ships a checkbox component with indeterminate state support via v-model binding. ([source](https://ui.nuxt.com/raw/docs/components/checkbox.md))
- [Form State Management](https://awesome-repositories.com/f/user-interface-experience/form-state-management.md) — Controls form submission data transformations and enables explicit nested form handling. ([source](https://ui.nuxt.com/raw/docs/getting-started/migration/v4.md))
- [Navigation Headers](https://awesome-repositories.com/f/user-interface-experience/navigation-headers.md) — Ships a page header component with customizable slots and a collapsible navigation menu. ([source](https://ui.nuxt.com/raw/docs/components/header.md))
- [Color Modes](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/theme-systems/color-modes.md) — Switches between light and dark color modes using built-in components or a composable for custom implementations. ([source](https://ui.nuxt.com/raw/docs/getting-started/integrations/color-mode/nuxt.md))
- [Component Appearance Customizers](https://awesome-repositories.com/f/user-interface-experience/terminal-user-interfaces/visual-styling-presentation/interface-appearance-customization/component-appearance-customizers.md) — Adjusts colors, sizes, and variants through a type-safe design system built on utility-first CSS and variants. ([source](https://ui.nuxt.com/raw/docs/getting-started.md))
- [Autocomplete Inputs](https://awesome-repositories.com/f/user-interface-experience/text-input-widgets/autocomplete-inputs.md) — Provides a text input that displays real-time suggestions from a provided list as the user types. ([source](https://ui.nuxt.com/raw/docs/components/input-menu.md))
- [Theme Switchers](https://awesome-repositories.com/f/user-interface-experience/theme-switchers.md) — Switches between light and dark color schemes using a composable or built-in UI components. ([source](https://ui.nuxt.com/raw/docs/getting-started/integrations/color-mode/vue.md))
- [Auto-Scroll Buttons](https://awesome-repositories.com/f/user-interface-experience/auto-scrolling-viewports/auto-scroll-buttons.md) — Shows a floating button when the user scrolls up, allowing a single click to jump back to the latest messages. ([source](https://ui.nuxt.com/raw/docs/components/chat-messages.md))
- [Chat Message List Renderers](https://awesome-repositories.com/f/user-interface-experience/chat-message-utilities/chat-message-list-renderers.md) — Renders a scrollable list of chat messages with automatic scrolling to the latest message as new ones arrive. ([source](https://ui.nuxt.com/raw/docs/components/chat-messages.md))
- [Chat Message Renderers](https://awesome-repositories.com/f/user-interface-experience/chat-message-utilities/chat-message-renderers.md) — Renders a chat message for a user or assistant role with an icon, avatar, and hover actions. ([source](https://ui.nuxt.com/raw/docs/components/chat-message.md))
- [Checkbox Components](https://awesome-repositories.com/f/user-interface-experience/checkbox-components.md) — Adjusts the checkbox's color, size, variant, icon, and indicator position through configurable props. ([source](https://ui.nuxt.com/raw/docs/components/checkbox.md))
- [Runtime Color Swaps](https://awesome-repositories.com/f/user-interface-experience/color-themes/runtime-color-swaps.md) — Swaps semantic color values dynamically through app configuration without restarting the server. ([source](https://ui.nuxt.com/raw/docs/getting-started/theme/design-system.md))
- [Semantic Color Mappings](https://awesome-repositories.com/f/user-interface-experience/color-themes/semantic-color-mappings.md) — Maps purpose-driven color names like primary, success, or error to any palette color for consistent component theming. ([source](https://ui.nuxt.com/raw/docs/getting-started/theme/design-system.md))
- [Date Range Restrictions](https://awesome-repositories.com/f/user-interface-experience/date-range-schedulers/date-range-restrictions.md) — Ships a calendar component that limits selectable dates to a configurable minimum and maximum window. ([source](https://ui.nuxt.com/raw/docs/components/calendar.md))
- [Date Blacklisting](https://awesome-repositories.com/f/user-interface-experience/date-range-schedulers/date-range-restrictions/date-blacklisting.md) — Ships a calendar component that prevents selection of specific dates, months, or years via a validation function. ([source](https://ui.nuxt.com/raw/docs/components/calendar.md))
- [Figma Component Kits](https://awesome-repositories.com/f/user-interface-experience/design-component-managers/figma-component-kits.md) — Includes a Figma kit that mirrors the code components for design-to-development consistency. ([source](https://ui.nuxt.com/))
- [Theme Token Definitions](https://awesome-repositories.com/f/user-interface-experience/design-token-management/theme-token-definitions.md) — Defines design tokens such as colors, fonts, and breakpoints using the `@theme` directive in CSS. ([source](https://ui.nuxt.com/raw/docs/getting-started/theme/design-system.md))
- [Link Columns](https://awesome-repositories.com/f/user-interface-experience/footers/link-columns.md) — Renders labeled columns of navigable links inside a footer area for site-wide navigation. ([source](https://ui.nuxt.com/raw/docs/components/footer-columns.md))
- [Icon Collections](https://awesome-repositories.com/f/user-interface-experience/icon-collections.md) — Displays icons from the Iconify library by passing collection and name to a dedicated component. ([source](https://ui.nuxt.com/raw/docs/getting-started/integrations/icons/nuxt.md))
- [Local SVG Registrations](https://awesome-repositories.com/f/user-interface-experience/icon-fonts/svg-imports/local-svg-registrations.md) — Registers a folder of local SVG files as a custom Iconify collection for use in components. ([source](https://ui.nuxt.com/raw/docs/getting-started/integrations/icons/nuxt.md))
- [Icon Libraries](https://awesome-repositories.com/f/user-interface-experience/icon-libraries.md) — Displays icons from the Iconify collection using a name prop, supporting over 200,000 icons. ([source](https://ui.nuxt.com/raw/docs/getting-started/integrations/icons/vue.md))
- [Verification Code Inputs](https://awesome-repositories.com/f/user-interface-experience/input-field-enhancements/input-field-initializers/styled-input-fields/verification-code-inputs.md) — Provides a code input component that auto-advances focus as each character is entered. ([source](https://ui.nuxt.com/raw/docs/components/pin-input.md))
- [Prompt Submissions](https://awesome-repositories.com/f/user-interface-experience/interactive-chat-interfaces/prompt-starters/prompt-submissions.md) — Provides a chat prompt component that submits text when the user presses Enter or clicks a button. ([source](https://ui.nuxt.com/raw/docs/components/chat-prompt.md))
- [Theme-Aware Content Displays](https://awesome-repositories.com/f/user-interface-experience/interactivity-mode-coordination/interaction-mode-toggles/display-mode-toggles/theme-aware-content-displays.md) — Switches displayed images and elements based on the active light or dark theme. ([source](https://ui.nuxt.com/raw/docs/getting-started/integrations/color-mode/vue.md))
- [Internationalization Frameworks](https://awesome-repositories.com/f/user-interface-experience/internationalization-frameworks.md) — Provides built-in internationalization support for localizing UI text into over 50 languages. ([source](https://ui.nuxt.com/))
- [Custom Item Creators](https://awesome-repositories.com/f/user-interface-experience/item-lists/custom-item-creators.md) — Lets users type and add custom values not present in the predefined list of options. ([source](https://ui.nuxt.com/raw/docs/components/input-menu.md))
- [Masked Inputs](https://awesome-repositories.com/f/user-interface-experience/masked-inputs.md) — Provides a code input component that masks characters as dots or asterisks for sensitive values. ([source](https://ui.nuxt.com/raw/docs/components/pin-input.md))
- [Numeric Inputs](https://awesome-repositories.com/f/user-interface-experience/numeric-inputs.md) — Adjusts a number up or down within a configurable range using buttons or keyboard input. ([source](https://ui.nuxt.com/raw/docs/components/input-number.md))
- [Page Footers](https://awesome-repositories.com/f/user-interface-experience/page-footers.md) — Renders a semantic footer element with customizable slots for navigation links and copyright text. ([source](https://ui.nuxt.com/raw/docs/components/footer.md))
- [Pagination Navigation](https://awesome-repositories.com/f/user-interface-experience/pagination-navigation.md) — Provides pagination controls with numbered page buttons and navigation arrows. ([source](https://ui.nuxt.com/raw/docs/components/pagination.md))
- [OTP Inputs](https://awesome-repositories.com/f/user-interface-experience/password-input-fields/otp-inputs.md) — Includes OTP input fields with autocomplete and clipboard detection for mobile devices. ([source](https://ui.nuxt.com/raw/docs/components/pin-input.md))
- [Progress Value Displays](https://awesome-repositories.com/f/user-interface-experience/progress-bar-widgets/progress-value-displays.md) — Shows the current numeric value above the progress bar for exact progress reading. ([source](https://ui.nuxt.com/raw/docs/components/progress.md))
- [Indeterminate Indicators](https://awesome-repositories.com/f/user-interface-experience/progress-indicators/indeterminate-indicators.md) — Animates a bar with a looping motion when the exact progress value is unknown. ([source](https://ui.nuxt.com/raw/docs/components/progress.md))
- [Multiple Selections](https://awesome-repositories.com/f/user-interface-experience/selectable-lists/multiple-selections.md) — Ships a multi-select component that presents checkboxes for picking several items from a list. ([source](https://ui.nuxt.com/raw/docs/components/checkbox-group.md))
- [Icon Components](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/typography-and-iconography/iconography/icon-components.md) — Embeds icons into UI elements like buttons through a built-in icon prop on components. ([source](https://ui.nuxt.com/raw/docs/getting-started/integrations/icons/nuxt.md))
- [Tag Inputs](https://awesome-repositories.com/f/user-interface-experience/tag-inputs.md) — Provides a tag input component that renders each entry as a removable tag. ([source](https://ui.nuxt.com/raw/docs/components/input-tags.md))
- [Chat Message Role Stylers](https://awesome-repositories.com/f/user-interface-experience/terminal-user-interfaces/visual-styling-presentation/interface-appearance-customization/component-appearance-customizers/chat-message-role-stylers.md) — Provides separate configuration props to apply distinct styling and alignment to user and assistant messages. ([source](https://ui.nuxt.com/raw/docs/components/chat-messages.md))
- [Chat Message Stylers](https://awesome-repositories.com/f/user-interface-experience/terminal-user-interfaces/visual-styling-presentation/interface-appearance-customization/component-appearance-customizers/chat-message-stylers.md) — Changes the message style through variant, color, and side props for left or right alignment. ([source](https://ui.nuxt.com/raw/docs/components/chat-message.md))
- [Chat Loading Indicators](https://awesome-repositories.com/f/user-interface-experience/theme-customization/loading-screen-customizers/chat-loading-indicators.md) — Allows replacing the default processing animation with a custom slot for chat message loading states. ([source](https://ui.nuxt.com/raw/docs/components/chat-messages.md))
- [Color Palettes](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/color-system-utilities/color-palettes.md) — Overrides any default color from the Tailwind palette by redefining its full shade range in the `@theme` block. ([source](https://ui.nuxt.com/raw/docs/getting-started/theme/design-system.md))
- [Badge Indicators](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/badge-indicators.md) — Ships a badge component that displays numeric counts overlaid on other elements. ([source](https://ui.nuxt.com/raw/docs/components/chip.md))
- [Loading Placeholders](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/loading-indicators/loading-placeholders.md) — Shows pulsing placeholder shapes while content is loading to indicate activity. ([source](https://ui.nuxt.com/raw/docs/components/skeleton.md))
- [Visibility Toggles](https://awesome-repositories.com/f/user-interface-experience/visibility-toggles.md) — Ships a disclosure component that toggles content visibility with smooth transitions. ([source](https://ui.nuxt.com/raw/docs/components/collapsible.md))

### Web Development

- [Ecosystem Integrations](https://awesome-repositories.com/f/web-development/ecosystem-integrations.md) — Connects with Nuxt modules for icons, fonts, color modes, internationalization, and content while maintaining SSR compatibility. ([source](https://ui.nuxt.com/raw/docs/getting-started.md))
- [Form Validation Libraries](https://awesome-repositories.com/f/web-development/form-validation-libraries.md) — Validates form data against standard schemas from Zod or Valibot, displaying errors automatically on associated fields. ([source](https://ui.nuxt.com/raw/docs/components/form.md))
- [Server-Side Rendering Support](https://awesome-repositories.com/f/web-development/server-side-rendering-support.md) — Components render on the server without hydration issues, ensuring SSR compatibility. ([source](https://ui.nuxt.com/))
- [Vue Component Libraries](https://awesome-repositories.com/f/web-development/vue-component-wrappers/vue-component-libraries.md) — Provides a full component library usable in any Vue project via Vite plugins. ([source](https://ui.nuxt.com/raw/docs/getting-started.md))
- [Real-time Validation](https://awesome-repositories.com/f/web-development/form-validation/real-time-validation.md) — Triggers validation on input, change, or blur events, configurable via a prop, and always validates on submit. ([source](https://ui.nuxt.com/raw/docs/components/form.md))
- [Vue Icon Libraries](https://awesome-repositories.com/f/web-development/vue-icon-libraries.md) — Accepts Vue components as icon sources, allowing inline SVG definitions or imports from SVG files. ([source](https://ui.nuxt.com/raw/docs/components/icon.md))

### Business & Productivity Software

- [Feature Comparison Cards](https://awesome-repositories.com/f/business-productivity-software/price-list-management/pricing-trackers/product-price-comparators/feature-comparison-cards.md) — Displays pricing tier features, price, and call-to-action in a structured card layout for easy comparison. ([source](https://ui.nuxt.com/raw/docs/components/pricing-plan.md))
- [Grid Layouts](https://awesome-repositories.com/f/business-productivity-software/pricing-structures/pricing-table-displays/grid-layouts.md) — Arranges pricing plans into a responsive grid layout with automatically calculated columns. ([source](https://ui.nuxt.com/raw/docs/components/pricing-plans.md))
- [Responsive Table Layouts](https://awesome-repositories.com/f/business-productivity-software/pricing-structures/pricing-table-displays/responsive-table-layouts.md) — Shows tiered pricing plans in a horizontal table on desktop and a vertical card layout on mobile. ([source](https://ui.nuxt.com/raw/docs/components/pricing-table.md))

### Content Management & Publishing

- [Feature Groupings](https://awesome-repositories.com/f/content-management-publishing/category-organizations/feature-groupings.md) — Groups pricing features into logical categories with per-tier availability indicators. ([source](https://ui.nuxt.com/raw/docs/components/pricing-table.md))

### Data & Databases

- [Custom Field Filters](https://awesome-repositories.com/f/data-databases/data-querying/table-item-filters/custom-field-filters.md) — Filters autocomplete suggestions based on user-defined object properties beyond the display label. ([source](https://ui.nuxt.com/raw/docs/components/input-menu.md))
- [On-Demand Subset Loading](https://awesome-repositories.com/f/data-databases/on-load-data-fetchers/on-demand-subset-loading.md) — Fetches suggestion data from an external API only when the menu is opened or scrolled. ([source](https://ui.nuxt.com/raw/docs/components/input-menu.md))

### Development Tools & Productivity

- [Step Labels](https://awesome-repositories.com/f/development-tools-productivity/progress-bar-labels/step-labels.md) — Renders named step labels beneath the progress bar for multi-step workflows. ([source](https://ui.nuxt.com/raw/docs/components/progress.md))
- [Project Bootstrapping Templates](https://awesome-repositories.com/f/development-tools-productivity/project-bootstrapping-templates.md) — Provides pre-built project templates for dashboards, SaaS, and landing pages. ([source](https://ui.nuxt.com/raw/docs/getting-started.md))
- [Task Progress Indicators](https://awesome-repositories.com/f/development-tools-productivity/task-progress-indicators.md) — Displays a visual bar that fills as a numeric value increases toward a configurable maximum. ([source](https://ui.nuxt.com/raw/docs/components/progress.md))

### DevOps & Infrastructure

- [Assistant Processing](https://awesome-repositories.com/f/devops-infrastructure/cloud-configuration/status-indicators/assistant-processing.md) — Displays a visual indicator that changes based on whether the assistant is submitting, streaming, ready, or in an error state. ([source](https://ui.nuxt.com/raw/docs/components/chat-messages.md))

### Networking & Communication

- [Typed Message Part Displays](https://awesome-repositories.com/f/networking-communication/communication-platforms-services/messaging-notification-systems/messaging-services/message-broker-infrastructure/publish-subscribe-messaging/client-to-client-messaging/message-record-preservation/message-display-enhancements/typed-message-part-displays.md) — Shows message content using a typed format with distinct parts like text, reasoning, and files. ([source](https://ui.nuxt.com/raw/docs/components/chat-message.md))

### Software Engineering & Architecture

- [Timeline Renderers](https://awesome-repositories.com/f/software-engineering-architecture/changelogs/timeline-renderers.md) — Ships a changelog component that renders version entries as a scroll-tracking vertical timeline. ([source](https://ui.nuxt.com/raw/docs/components/changelog-versions.md))
- [List Virtualization](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations/list-virtualization.md) — Implements list virtualization to render only visible items for smooth scrolling performance. ([source](https://ui.nuxt.com/raw/docs/components/input-menu.md))