Introdução

O Nitro UI é uma biblioteca completa de componentes de UI para Vue (Nuxt opcional), com mais de 125 componentes acessíveis baseados em Tailwind CSS para construir aplicações web modernas.

O que é o Nitro UI?

Uma biblioteca moderna de componentes de UI para Vue, construída sobre Reka UI, Tailwind CSS e Tailwind Variants para entregar aplicações bonitas e acessíveis com mais de 125 componentes prontos para produção. Funciona com Nuxt e com apps Vue puros (Vite, Inertia, SSR).

Se você está construindo um projeto Vue com Tailwind CSS, o Nitro UI é uma ótima escolha padrão. Ele oferece componentes de alto nível e prontos para uso (tabelas de dados, formulários, overlays, navegação) e ainda permite personalização avançada quando necessário.

Experiência do desenvolvedor em primeiro lugar

Intuitive APIs, excellent TypeScript support, auto-completion, and comprehensive docs.

Bonito por padrão

Um design moderno e limpo por padrão, com um tema que você pode adaptar em minutos.

Acessível por padrão

Compatível com WAI-ARIA, com navegação por teclado, gerenciamento de foco e suporte a leitores de tela.

Pronto para produção

Mais de 125 componentes testados em produção, incluindo tabelas de dados, formulários, overlays e navegação, usados por milhares de aplicações.

Tecnologias principais

Reka UI

O Nitro UI é construído sobre o Reka UI como base para os componentes:

  • WAI-ARIA Compliance: Follows WAI-ARIA authoring practices 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

Nitro UI integrates the latest Tailwind CSS, 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

O Nitro UI aproveita o Tailwind Variants para oferecer um design system poderoso:

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

Principais recursos

Integração com o ecossistema

O Nitro UI é compatível com SSR e se integra perfeitamente ao ecossistema Nuxt (esses recursos também funcionam no Vue com configuração adicional):

  • Icons: Access 200,000+ icons from Iconify
  • Fonts: Plug-and-play web font optimization and configuration
  • Color Mode: Dark and Light mode with auto detection
  • i18n: Internationalize your components with 50+ languages
  • Content: Beautiful typography out of the box

Compatibilidade com Vue (Nuxt opcional)

O Nitro UI funciona com qualquer projeto Vue, não apenas Nuxt. Basta adicionar os plugins do Vite e do Vue à sua configuração:

  • 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
Aprenda a instalar e configurar o Nitro UI em um projeto Vue no guia de instalação para Vue.

Suporte a TypeScript

O Nitro UI oferece uma integração completa com TypeScript para uma experiência de desenvolvimento superior:

  • Auto-completion: For all component props, slots, and events
  • Generic Components: Using Vue Generics
  • Type-safe Theming: In app.config.ts
  • IntelliSense: Throughout your entire codebase

Perguntas frequentes

Installation

Aprenda a instalar e configurar o Nitro UI na sua aplicação Nuxt.