# nuxt-ui-helper

> Complete Nuxt UI v4 reference documentation including 100+ production-ready components, theming system, customization guides, and integration examples. Use when building components, styling interfaces, or implementing Nuxt UI features in the project.

- Author: Majid Taheri
- Repository: taheri24/nuxt1
- Version: 20251221202643
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/taheri24/nuxt1
- Web: https://mule.run/skillshub/@@taheri24/nuxt1~nuxt-ui-helper:20251221202643

---

---
name: nuxt-ui-helper
description: Complete Nuxt UI v4 reference documentation including 100+ production-ready components, theming system, customization guides, and integration examples. Use when building components, styling interfaces, or implementing Nuxt UI features in the project.
---

# Nuxt UI Helper Skill

This skill provides comprehensive documentation for **Nuxt UI v4**, a modern UI library built on Reka UI, Tailwind CSS, and Tailwind Variants.

## Quick Reference

- **Components**: 100+ production-ready, accessible components
- **Framework**: Built on Reka UI, Tailwind CSS v4, Tailwind Variants
- **Language**: Full TypeScript support with auto-completion
- **Features**: Theming, dark mode, icons (200k+), i18n, responsive design

## Key Features

### Accessibility
- WAI-ARIA compliant
- Keyboard navigation
- Focus management
- Screen reader support

### Performance
- 5x faster builds with Tailwind CSS v4
- 100x faster incremental builds
- Optimized component architecture

### Developer Experience
- Intuitive APIs
- Excellent TypeScript support
- Auto-completion for all props, slots, events
- Comprehensive documentation

---

# Introduction

## What is Nuxt UI?

A modern UI library built on [Reka UI](https://reka-ui.com/), [Tailwind CSS](https://tailwindcss.com/), and [Tailwind Variants](https://www.tailwind-variants.org/) to ship beautiful and accessible applications with 100+ production-ready components.

### Core Features

1. **Developer Experience First**
   - Intuitive APIs
   - Excellent TypeScript support
   - Auto-completion
   - Comprehensive docs

2. **Beautiful by Default**
   - Modern, clean design out of the box
   - Theme you can adapt in minutes
   - Semantic color system

3. **Accessible by Default**
   - WAI-ARIA compliant
   - Keyboard navigation
   - Focus management
   - Screen reader support

4. **Production Ready**
   - 100+ battle-tested components
   - Used by thousands of applications
   - Fully tested and maintained

## What's New in v4?

Nuxt UI v4 marks a major milestone: Nuxt UI and Nuxt UI Pro are now unified into a single, fully open-source and free library of 100+ production-ready components and a complete Figma Kit.

Key improvements:
- Smoother migration than v2→v3
- Unified component library
- Enhanced theming system
- Better TypeScript integration

## Core Technologies

### Reka UI
- WAI-ARIA compliance
- Keyboard navigation
- Focus management
- Accessible labels

### Tailwind CSS v4
- 5x faster builds
- Full builds significantly improved
- Incremental builds over 100x faster
- Unified toolchain
- CSS-first configuration
- Modern web features (container queries, cascade layers, wide-gamut colors)

### Tailwind Variants
- Dynamic styling with powerful API
- Full TypeScript support
- Efficient style conflict resolution

---

## Complete Documentation Content

For the complete reference including all component APIs, configuration options, theming guides, and examples, refer to the official [Nuxt UI documentation](https://ui.nuxt.com/docs).

### Common Use Cases

1. **Creating New Components**
   - Use Nuxt UI's component library as foundation
   - Customize via `ui` props or CSS classes
   - Support dark mode automatically

2. **Theming Your Application**
   - Configure in `app.config.ts`
   - Use semantic color system (primary, secondary, success, etc.)
   - CSS variable customization

3. **Building Forms**
   - Use form components: UInput, UTextarea, UButton
   - Add validation with composables
   - Full keyboard navigation support

4. **Creating Data Tables**
   - Use UTable component
   - Built-in sorting, filtering, pagination
   - Column customization with slots

5. **Implementing Layouts**
   - Dashboard layouts with sidebar
   - Responsive design built-in
   - Navigation components included

6. **Dark Mode**
   - Automatic detection
   - Manual toggle support
   - Color mode integration

### TypeScript Support

All components provide:
- Full type safety
- Auto-completion for props
- Generic component support
- Type-safe theming in `app.config.ts`

### Integration Points

- **Icons**: 200,000+ from Iconify
- **Fonts**: Web font optimization
- **Color Mode**: Dark/Light mode with auto-detection
- **i18n**: 50+ languages support
- **Content**: Beautiful typography

---

## When to Use This Skill

Claude will autonomously use this skill when:
- Working with Nuxt UI components
- Styling or theming the interface
- Building new components
- Implementing forms or data tables
- Troubleshooting component behavior
- Customizing existing components
- Exploring component APIs

## Related Files

- **Project Configuration**: `nuxt.config.ts` - Nuxt UI module setup
- **App Configuration**: `app/app.config.ts` - Theme and color customization
- **Components**: `app/components/` - Custom components using Nuxt UI
- **Pages**: `app/pages/` - Pages built with Nuxt UI

---

**Last Updated**: December 2024
**Version**: Nuxt UI v4
**Official Docs**: https://ui.nuxt.com/