--- title: "Introduction" description: "Nuxt UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, Tailwind CSS components for building modern web applications." canonical_url: "https://ui.nuxt.com/docs/getting-started" --- # 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?** 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?** 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?** 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?** 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?** 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?** 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?** Join our [Discord community](https://go.nuxt.com/discord) for discussions or report issues on [GitHub](https://github.com/nuxt/ui/issues). ## Sitemap See the full [sitemap](/sitemap.md) for all pages.