introducción

Nuxt UI es una biblioteca completa de componentes de interfaz de usuario de Vue (Nuxt opcional), que ofrece más de 125 componentes CSS accesibles y Tailwind para crear aplicaciones web modernas.

¿ Qué es Nuxt UI?

Una moderna biblioteca de componentes de interfaz de usuario de Vue construida sobre Reka UI, Tailwind CSS y Tailwind Variants para enviar aplicaciones hermosas y accesibles con más de 125 componentes listos para producción.

Si está construyendo un proyecto Vue con Tailwind CSS, Nuxt UI es una excelente opción predeterminada. Proporciona componentes de alto nivel listos para usar (tablas de datos, formularios, superposiciones, navegación) al tiempo que permite una personalización avanzada cuando sea necesario.

Developer Experience First

API intuitivas, excelente soporte de TypeScript, autocompletado y documentos completos.

Beautiful by Default

Un diseño moderno y limpio fuera de la caja con un tema que puede adaptar en minutos.

Accessible by Default

WAI-ARIA compatible con navegación por teclado, gestión de enfoque y soporte de lector de pantalla.

Production Ready

Más de 125 componentes probados en batalla, incluyendo tablas de datos, formularios, superposiciones y navegación utilizados por miles de aplicaciones en producción.

¿ Qué hay de nuevo en v4?

Nuxt UI v4 marca un hito importante: Nuxt UI y Nuxt UI Pro ahora están unificados en una única biblioteca de código abierto y gratuita de más de 125 componentes listos para la producción y un completo kit Figma.

La migración de v3 a v4 será mucho más suave que de v2 a v3. Lea más en la guía de migración ](/docs/getting-started/migration).

Tecnologías ## Core

La interfaz de usuario de Nuxt se basa en tres pilares: Reka UI para el comportamiento y la accesibilidad, Tailwind CSS para el estilo y Tailwind Variants para componer variantes.

Reka UI (Edición española)

La interfaz de usuario de Nuxt está construida sobre Reka UI como base para los componentes:

  • WAI-ARIA Compliance: Sigue las prácticas de autoría WAI-ARIA con la semántica y los roles adecuados
  • Keyboard Navigation: Soporte de teclado integrado para componentes complejos como pestañas y diálogos
  • Focus Management: Manejo inteligente del enfoque que mueve el enfoque según las interacciones del usuario
  • **Etiquetas accesibles **: Abstracciones para simplificar los controles de etiquetado para lectores de pantalla

Tailwind CSS (Edición española)

La interfaz de usuario de Nuxt integra la última versión de Tailwind CSS, que aporta mejoras significativas:

  • 5x Faster Builds: Builds completos hasta 5 veces más rápido, Builds incrementales más de 100 veces más rápido
  • Unified Toolchain: Manejo de importaciones integrado, prefijación de proveedores y transformaciones de sintaxis
  • CSS-first Configuration: Personalizar y extender directamente en CSS en lugar de JavaScript
  • Modern Web Features: consultas de contenedores, capas en cascada, colores de amplia gama y más

Variantes de Tailwind

La interfaz de usuario de Nuxt aprovecha las variantes de Tailwind ](https://www.tailwind-variants.org/) para proporcionar un potente sistema de diseño:

  • Dynamic Styling: Variantes de componentes flexibles con una potente API
  • Type Safety: Soporte completo de TypeScript con autocompletado
  • Resolución de conflictos: Fusión eficiente de estilos conflictivos

Key características

Integración de ecosistemas

La interfaz de usuario de Nuxt es compatible con SSR y se integra perfectamente con el ecosistema:

  • Icons: Acceda a más de 200,000 iconos de Iconify
  • Fonts: Optimización y configuración de fuentes web plug-and-play
  • Color Mode: Modo oscuro y claro con detección automática
  • i18n: Internacionaliza tus componentes con más de 50 idiomas
  • Content: Hermosa tipografía fuera de la caja
  • Iconsx: Acceda a más de 200,000 iconos de Iconify
  • Color Mode: Modo oscuro y claro con detección automática
  • i18n: Internacionaliza tus componentes con más de 50 idiomas

Compatibilidad con ### Vue (Nuxt opcional)

La interfaz de usuario de Nuxt funciona con cualquier proyecto de Vue, no solo con Nuxt. Simplemente agregue los complementos de Vite y Vue a su configuración:

  • Autoimports: Componentes y composables se importan automáticamente y están disponibles globalmente
  • Design System: Soporte completo de tematización con colores, tamaños, variantes y más personalizables
  • Developer Experience: Soporte completo de TypeScript con IntelliSense y autocompletado
Aprenda a instalar y configurar la interfaz de usuario de Nuxt en un proyecto de Vue en la guía de instalación **Vue.

Soporte para ### TypeScript

Nuxt UI proporciona una integración completa de TypeScript para una experiencia de desarrollador superior:

  • Auto-completación: Para todos los accesorios de componentes, ranuras y eventos
  • **Componentes genéricos **: Uso de Vue Genericos
  • Tipo seguro Theming: En app.config.ts
  • IntelliSense: en toda su base de código

plantillas

Nuxt UI proporciona plantillas listas para producción tanto para Nuxt como para Vue para ayudarlo a comenzar rápidamente:

Explore todos los templates disponibles para iniciar su próximo proyecto.

FAQ (en inglés)

Installation

Learn how to install and configure Nuxt UI in your Nuxt application.