# Source: https://ui.nuxt.com/raw/docs/getting-started.md

# Introduction

> Nuxt UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, Tailwind CSS components for building modern web applications.

## What is Nuxt UI?

A modern Vue UI component library built on [Reka UI](https://reka-ui.com/), [Tailwind CSS](https://tailwindcss.com/), and [Tailwind Variants](https://www.tailwind-variants.org/) to ship beautiful and accessible applications with 125+ production-ready components. Works with Nuxt and plain Vue apps (Vite, Inertia, SSR).

If you're building a Vue project with Tailwind CSS, Nuxt UI is a great default choice. It provides high-level, ready-to-use components (data tables, forms, overlays, navigation) while still allowing advanced customization when needed.

**Developer Experience First**
Intuitive APIs, excellent TypeScript support, auto-completion, and comprehensive docs.

**Beautiful by Default**
A modern, clean design out of the box with a theme you can adapt in minutes.

**Accessible by Default**
WAI-ARIA compliant with keyboard navigation, focus management, and screen reader support.

**Production Ready**
125+ battle-tested components including data tables, forms, overlays, and navigation used by thousands of applications in production.

## What's new in v4?

Nuxt UI v4 marks a major milestone: Nuxt UI and Nuxt UI Pro are now unified into a single, fully open-source and free library of 125+ production-ready components and a complete Figma Kit.

The migration from v3 to v4 will be much smoother than from v2 to v3. Read more in the [migration guide](/docs/getting-started/migration/v4).

> [!NOTE]
> See: /docs/getting-started/migration/v3
> If you are migrating from v2, you can read more in this migration guide.

## Core technologies

### Reka UI

Nuxt UI is built on top of [Reka UI](https://reka-ui.com/) as a foundation for the components:

- **WAI-ARIA Compliance**: Follows [WAI-ARIA authoring practices](https://reka-ui.com/docs/overview/accessibility) with proper semantics and roles
- **Keyboard Navigation**: Built-in keyboard support for complex components like tabs and dialogs
- **Focus Management**: Intelligent focus handling that moves focus based on user interactions
- **Accessible Labels**: Abstractions to simplify labeling controls for screen readers

### Tailwind CSS

Nuxt UI integrates the latest [Tailwind CSS](https://tailwindcss.com/), bringing significant improvements:

- **5x Faster Builds**: Full builds up to 5x faster, incremental builds over 100x faster
- **Unified Toolchain**: Built-in import handling, vendor prefixing, and syntax transforms
- **CSS-first Configuration**: Customize and extend directly in CSS instead of JavaScript
- **Modern Web Features**: Container queries, cascade layers, wide-gamut colors, and more

### Tailwind Variants

Nuxt UI takes advantage of [Tailwind Variants](https://www.tailwind-variants.org/) to provide a powerful design system:

- **Dynamic Styling**: Flexible component variants with a powerful API
- **Type Safety**: Full TypeScript support with auto-completion
- **Conflict Resolution**: Efficient merging of conflicting styles

## Key features

### Ecosystem integration

Nuxt UI is SSR compatible and integrates seamlessly with the Nuxt ecosystem (these features also work in Vue with additional configuration):

- [**Icons**](/docs/getting-started/integrations/icons): Access 200,000+ icons from Iconify
- [**Fonts**](/docs/getting-started/integrations/fonts): Plug-and-play web font optimization and configuration
- [**Color Mode**](/docs/getting-started/integrations/color-mode): Dark and Light mode with auto detection
- [**i18n**](/docs/getting-started/integrations/i18n): Internationalize your components with 50+ languages
- [**Content**](/docs/getting-started/integrations/content): Beautiful typography out of the box

### Vue compatibility (Nuxt optional)

Nuxt UI works with any Vue project, not just Nuxt. Simply add the Vite and Vue plugins to your configuration:

- **Auto-imports**: Components and composables are automatically imported and available globally
- **Design System**: Full theming support with customizable colors, sizes, variants, and more
- **Developer Experience**: Complete TypeScript support with IntelliSense and auto-completion

> [!TIP]
> See: /docs/getting-started/installation/vue
> Learn how to install and configure Nuxt UI in a Vue project in the Vue installation guide.

### TypeScript Support

Nuxt UI provides comprehensive TypeScript integration for a superior developer experience:

- **Auto-completion**: For all component props, slots, and events
- **Generic Components**: Using [Vue Generics](https://vuejs.org/api/sfc-script-setup.html#generics)
- **Type-safe Theming**: In `app.config.ts`
- **IntelliSense**: Throughout your entire codebase

### Templates

Nuxt UI provides production-ready templates for both Nuxt and Vue to help you get started quickly:

- **Nuxt templates**: Dashboard, SaaS, Landing, Docs, Portfolio, Chat, Editor, Changelog, and Starter
- **Vue templates**: Dashboard and Starter

> [!TIP]
> See: /templates
> Explore all available templates to kickstart your next project.

## FAQ

**Q: Is Nuxt UI free to use?**

A: Yes! Nuxt UI is completely free and open source under the MIT license. All 125+ components are available to everyone.

**Q: Can I use Nuxt UI with Vue without Nuxt?**

A: Yes! While optimized for Nuxt, Nuxt UI works perfectly with standalone Vue projects via our Vite plugin. You can follow the [installation guide](/docs/getting-started/installation/vue) to get started.

**Q: Does Nuxt UI include a Figma Kit?**

A: Yes! Nuxt UI includes a [complete Figma Kit](https://go.nuxt.com/figma-ui) with all components, making it easy for designers and developers to collaborate.

**Q: How does Nuxt UI handle accessibility?**

A: Through [Reka UI](https://reka-ui.com/docs/overview/accessibility) integration, Nuxt UI provides automatic ARIA attributes, keyboard navigation, focus management, and screen reader support. While offering a strong foundation, testing in your specific use case remains important.

**Q: Is Nuxt UI production-ready?**

A: Yes! Nuxt UI is used in production by thousands of applications with 1000+ Vitest tests, regular updates, and active maintenance.

**Q: When should I consider alternatives?**

A: Consider Vuetify if you want Material Design styling, ant-design-vue for Ant Design styling, PrimeVue or Element Plus if you don't want Tailwind CSS, shadcn-vue if you prefer copying components into your repo, Quasar for cross-platform apps (web, mobile, desktop), or Reka UI / Headless UI if you only need unstyled primitives.

**Q: Where can I get help?**

A: Join our [Discord community](https://go.nuxt.com/discord) for discussions or report issues on [GitHub](https://github.com/nuxt/ui/issues).