ui/docs/content/1.getting-started/1.index.md

title, description

title	description
Introduction	Nuxt UI v3 - A powerful, Nuxt-integrated design system with enhanced components, flexibility, and developer experience.

Welcome to Nuxt UI v3 beta! We're thrilled to introduce this major update to our UI library, bringing significant improvements and powerful new features tailored specifically for Nuxt applications.

What's New in v3?

Migration from Headless UI to Radix Vue

In v3, we've transitioned from Headless UI to Radix Vue as our core component foundation. This change brings several benefits:

• Improved Accessibility: WAI-ARIA compliant components with built-in keyboard navigation and focus management.
• Enhanced Composability: Unstyled, primitive components for greater flexibility and customization.
• Vue and Nuxt Compatibility: Seamless integration with Vue and Nuxt ecosystems.
• Consistent API: Enjoy a more unified and intuitive API across all components.
• Active Development: Benefit from ongoing improvements and new features in the Radix Vue ecosystem.

While this change may require some adjustments in your existing code, it significantly enhances the overall quality and capabilities of Nuxt UI.

Tailwind CSS v4 Integration

Leverage the latest Tailwind CSS features for efficient styling and a streamlined development process.

Tailwind Variants Support

Create dynamic variants easily, allowing for more expressive and flexible component styling.

Enhanced TypeScript Support

Enjoy improved type safety and an enhanced developer experience with our Nuxt-specific TypeScript optimizations.

Why Choose Nuxt UI v3?

Nuxt UI v3 offers several advantages over using Radix Vue or Shadcn-vue directly:

• Nuxt-Specific Integration: Seamless compatibility with Nuxt features like auto-imports and server-side rendering.
• Pre-Styled, Customizable Components: A complete set of components adhering to a cohesive design system, ready for use and customization.
• Dark Mode Support: Built-in, easy-to-implement dark mode for your entire application.
• Nuxt Ecosystem Alignment: Regular updates in sync with Nuxt releases, ensuring long-term compatibility.
• Comprehensive Nuxt Documentation: Detailed guides and examples specifically for Nuxt developers.

Upcoming Vue Support

We're excited to announce that in the near future, Nuxt UI v3 will also support Vue applications! This expansion will allow Vue developers to leverage the power and flexibility of Nuxt UI components in their projects, regardless of whether they're using Nuxt or standalone Vue.

Key points about the upcoming Vue support:

• Seamless Integration: Use Nuxt UI components in your Vue projects with the same ease as in Nuxt applications.
• Consistent API: Enjoy the same intuitive API and component structure across both Vue and Nuxt projects.
• Performance Optimizations: Benefit from performance enhancements tailored for Vue applications.
• Expanded Ecosystem: Join a larger community of developers using Nuxt UI across different Vue-based projects.

Stay tuned for updates on the release of Vue support!

Key Features

• Fully Customizable: Tailor components to fit your brand and design needs.
• Responsive Design: Create adaptive UIs across various device sizes.
• Accessibility Focus: Ensure your applications are usable by everyone.
• TypeScript Support: Enhanced type safety for Nuxt projects.

Getting Started

Ready to dive in? Follow our installation guide to start using Nuxt UI v3 in your project. If you're upgrading from v2, check out our migration guide.

Frequently Asked Questions

::accordion ::accordion-item{label="Is Nuxt UI v3 compatible with my existing Nuxt UI v2 project?"} While Nuxt UI v3 introduces significant changes, we've aimed to maintain as much compatibility as possible. However, due to the transition from Headless UI to Radix Vue, some adjustments may be necessary. Please refer to our migration guide for detailed information on upgrading your project. ::

::accordion-item{label="What are the main differences between Nuxt UI v3 and v2?"} The key differences include the transition from Headless UI to Radix Vue, improved accessibility, enhanced composability, Tailwind CSS v4 integration, and improved TypeScript support. These changes result in more flexible and powerful components with better performance and developer experience. ::

::accordion-item{label="Will Nuxt UI v3 work with other CSS frameworks besides Tailwind CSS?"} While Nuxt UI v3 is optimized for use with Tailwind CSS, the core components based on Radix Vue are unstyled. This means you can potentially use them with other CSS frameworks, although you may need to provide your own styling. ::

::accordion-item{label="How does the upcoming Vue support differ from the current Nuxt support?"} The upcoming Vue support will allow you to use Nuxt UI components in standalone Vue projects without the Nuxt framework. The core functionality and API of the components will remain the same, but some Nuxt-specific features may not be available in Vue-only projects. ::

::accordion-item{label="Is Nuxt UI v3 suitable for production use?"} As Nuxt UI v3 is currently in beta, we recommend thorough testing before using it in production environments. We're actively working on stabilizing the library and appreciate any feedback from early adopters. :: ::

Feedback and Contributions

Your input is invaluable as we refine Nuxt UI v3:

• Report issues or suggest improvements on our GitHub repository
• Join our Discord community for discussions and support
• Follow us on Twitter for the latest updates

Stay tuned for more exciting updates as we work towards the final release of Nuxt UI v3!