Nuxt UI

Welcome to the Nuxt UI section! Learn how to build beautiful, accessible user interfaces quickly.

What is Nuxt UI?

Nuxt UI is a collection of fully styled and customizable components built with Tailwind CSS and Headless UI. It's designed specifically for Nuxt applications.

Why Nuxt UI?

✅ Ready to use - Pre-built, accessible components
✅ Fully customizable - Built on Tailwind CSS
✅ Dark mode - Built-in dark mode support
✅ TypeScript - Full type safety
✅ Icons - 100,000+ icons from Iconify
✅ Keyboard navigation - Accessible by default

Explore Topics

Installation

Set up Nuxt UI in your project

Theming

Customize colors and styles

Components

Core UI components

Forms

Form handling and validation

Data Display

Tables, lists, and pagination

Accessibility

Building accessible UIs

Best Practices

Patterns and tips

Quick Start

<script setup>
const name = ref('')
</script>

<template>
  <div>
    <UButton>Click me</UButton>
    <UInput v-model="name" placeholder="Your name" />
    <UCard>
      <template #header>
        <h3>Card Title</h3>
      </template>
      Card content goes here
    </UCard>
  </div>
</template>

Let's build beautiful UIs together!

ESLint and Code Conventions

Establish consistent code quality and style across your Nuxt project with ESLint, TypeScript rules, and automated formatting.

Installation

Get started with Nuxt UI in your project.