ui/docs/app/pages/.index.yml

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
    - 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: Learn more
      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" theme(static);
    @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: Learn more
      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]
    <template>
      <UCollapsible>
        <UButton
          label="Open"
          color="neutral"
          variant="subtle"
          trailing-icon="i-lucide-chevron-down"
          :ui="{
            trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
          }"
            class="group font-bold"
          />
      </UCollapsible>
    </template>
    ```

    ::
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