title: The Intuitive Vue UI Library description: Create beautiful, responsive & accessible web apps quickly with Vue or Nuxt. Nuxt UI is an open-source UI library of 50+ customizable components built with Tailwind CSS and Reka UI. hero: title: The Intuitive Vue UI Library description: Create beautiful, responsive & accessible web apps quickly with Vue or Nuxt. Nuxt UI is an open-source UI library of 50+ customizable components built with Tailwind CSS and Reka UI. links: - label: Get started to: /getting-started/installation/nuxt class: 'ui-only nuxt-only' - label: Get started to: /getting-started/installation/vue class: 'ui-only vue-only' - label: Get started to: /getting-started/installation/pro/nuxt class: 'ui-pro-only nuxt-only' - label: Get started to: /getting-started/installation/pro/vue class: 'ui-pro-only vue-only' - label: Explore components to: /components variant: outline color: neutral trailingIcon: i-lucide-arrow-right features: - icon: i-logos-tailwindcss-icon title: Styled with Tailwind CSS v4 description: Beautifully styled by default, overwrite any style you want. - icon: i-custom-reka-ui title: Accessible with Reka UI description: Robust accessibility out of the box. - icon: i-logos-typescript-icon title: Type-safe with TypeScript description: Auto-complete and type safety for all components. features: - title: Build for the modern web description: Powered by Tailwind CSS v4 and Reka UI for top performance and accessibility. icon: i-lucide-rocket to: /getting-started - title: Flexible design system description: Beautiful by default and easily customizable with design tokens to your brand. icon: i-lucide-swatch-book to: /getting-started/theme#design-system - title: Internationalization (i18n) description: Nuxt UI is translated into 30+ languages, works well with i18n and multi-directional support (LTR/RTL). icon: i-lucide-globe to: /getting-started/i18n/nuxt - title: Easy font customization description: Performance-optimized fonts with first-class @nuxt/fonts integration. icon: i-lucide-a-large-small to: /getting-started/fonts - title: Large icons sets description: Access to over 200,000 customizable icons from Iconify, seamlessly integrated with Iconify. icon: i-lucide-smile to: /getting-started/icons - title: Light & Dark description: Dark mode-ready components, seamless integration with @nuxtjs/color-mode. icon: i-lucide-sun-moon to: /getting-started/color-mode/nuxt design_system: title: Flexible design system description: Build your next project faster with Nuxt UI's comprehensive design system. Featuring semantic color aliases, comprehensive design tokens, and automatic light/dark mode support for accessible components out of the box. links: - label: Customize design system to: /getting-started/theme#design-system variant: outline color: neutral trailingIcon: i-lucide-arrow-right features: - title: Color aliases via AppConfig description: Configure 7 semantic color aliases (primary, secondary, success, info, warning, error, neutral) at runtime through AppConfig without rebuilding your application icon: i-lucide-palette - title: Comprehensive design tokens description: Extensive set of neutral palette tokens for text, backgrounds, and borders with automatic light/dark mode support via CSS variables like --ui-text, --ui-bg, --ui-border icon: i-lucide-component - title: Global style variables description: Customize global styling with --ui-radius for consistent border rounding and --ui-container for layout widths across your entire application icon: i-lucide-ruler code: | ::code-group ```ts [app.config.ts] export default defineAppConfig({ ui: { colors: { primary: 'indigo', secondary: 'pink', success: 'green', info: 'blue', warning: 'orange', error: 'red', neutral: 'zinc' } } }) ``` ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui"; :root { --ui-radius: var(--radius-sm); --ui-container: 90rem; --ui-bg: var(--ui-color-neutral-50); --ui-text: var(--ui-color-neutral-900); } .dark { --ui-bg: var(--ui-color-neutral-950); --ui-border: var(--ui-color-neutral-900); } ``` :: component_customization: title: Powerful component customization description: Nuxt UI leverages [Tailwind Variants](https://www.tailwind-variants.org/) to provide a powerful, maintainable system for managing component styles and intelligently merging Tailwind CSS classes without conflicts. links: - label: Customize components to: /getting-started/theme#customize-theme variant: outline color: neutral trailingIcon: i-lucide-arrow-right features: - title: Powerful slot and variant system description: Customize component parts with slots and apply different styles based on props, creating consistent UI patterns with granular control over styling icon: i-lucide-layout-grid - title: Global theme with AppConfig description: Configure component styles project-wide with a centralized AppConfig that maintains consistency across your application without rebuilding icon: i-lucide-settings-2 - title: Per-component customization description: Fine-tune individual components with the ui prop for slot-specific styling and class prop for root element overrides, providing maximum flexibility icon: i-lucide-component code: | ::code-group ```ts [app.config.ts] export default defineAppConfig({ ui: { button: { slots: { base: 'group font-bold', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }, defaultVariants: { color: 'neutral', variant: 'subtle' } } } }) ``` ```vue [Collapsible.vue] ``` :: community: title: Nuxt UI open-source community description: Join our thriving community to contribute code, report issues, suggest features, or help with documentation. Every contribution makes Nuxt UI better for everyone. links: - label: Star on GitHub color: neutral variant: outline to: https://github.com/nuxt/ui target: _blank icon: i-lucide-star