The Intuitive Vue UI Library - Nuxt UI

3 min read Original article ↗

A comprehensive Vue UI component library (Nuxt optional) with 125+ accessible, Tailwind CSS components for building modern web applications. Works with Nuxt and plain Vue apps (Vite, Inertia, SSR).

Get startedGet startedExplore components

Styled with Tailwind CSS

Beautifully styled by default, overwrite any style you want.

Accessible with Reka UI

Robust accessibility out of the box.

Type-safe with TypeScript

Auto-complete and type safety for all components.

Flexible design system

Build faster with Nuxt UI's CSS-first design system powered by Tailwind CSS and its semantic color system combined with a runtime configuration.

  • CSS-first configuration

    Define fonts, colors, and breakpoints with the @theme directive directly in your CSS. This makes your theme portable, maintainable and easy to customize.

  • Semantic color system

    Configure 7 semantic color aliases (primary, secondary, success, info, warning, error, neutral) that describe the purpose of colors rather than specific values.

  • Runtime color configuration

    Change colors, icons and more at runtime through AppConfig without rebuilding your application, perfect for multi-tenant applications or dynamic theming.

@import "tailwindcss";
@import "@nuxt/ui";

@theme static {
  --font-sans: 'Public Sans', system-ui, sans-serif;

  --color-brand-50: #f0f9ff;
  --color-brand-100: #e0f2fe;
  --color-brand-200: #bae6fd;
  --color-brand-300: #7dd3fc;
  --color-brand-400: #38bdf8;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a8a;
  --color-brand-950: #172554;
}

Consistent design tokens

Use CSS variables as design tokens for consistent theming with semantic utility classes that automatically adapt to light and dark modes.

  • Semantic color utilities

    Use utility classes like text-primary, bg-success, or border-error that automatically adapt to light and dark modes via CSS variables.

  • Text and background tokens

    Complete set of utility classes for text (text-dimmed, text-muted, text-highlighted), backgrounds (bg-default, bg-elevated, bg-accented) and borders.

  • Global layout variables

    Customize global styles with --ui-radius for border rounding, --ui-container for layout widths, and --ui-header-height for consistent spacing.

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-primary: black;
  --ui-radius: 0.5rem;
  --ui-container: var(--container-5xl);
  --ui-header-height: --spacing(24);
}

.dark {
  --ui-primary: white;
  --ui-bg: var(--ui-color-neutral-950);
}

Tailor components to your needs

Use the Tailwind Variants API with slots, variants, and compound variants for powerful component theming with intelligent class merging.

  • Tailwind Variants API

    Components use slots for flexible styling, variants for prop-based styles, and compound variants for complex conditional styling with intelligent class merging.

  • Global theme configuration

    Override component themes globally in app.config.ts using slots, variants, compound variants, and default variants for consistent styling across your application.

  • Per-component customization

    Fine-tune individual components with the ui prop for slot-specific styling and class prop for root element overrides, providing maximum flexibility.

export default defineAppConfig({
  ui: {
    button: {
      slots: {
        base: 'font-bold'
      },
      variants: {
        size: {
          md: {
            base: 'px-4 py-2 text-sm'
          }
        }
      },
      defaultVariants: {
        color: 'neutral'
      }
    }
  }
})

Ship faster with production-ready templates

Start with our fully responsive, accessible, and easy to customize templates, so you can launch your project quickly and effortlessly.

  • Production-ready templates

    All templates are built with best practices, SEO optimized, performance tuned, and ready to deploy to production immediately with minimal configuration.

  • Nuxt & Vue support

    Templates available for both Nuxt and Vue applications with framework-specific optimizations, choose the one that best fits your project needs.

  • Fully customizable

    Built on top of Nuxt UI components with complete source code access, easily customize colors, fonts, layouts, and components to match your brand identity.