skills.rest
optioni
optioniOFFICIAL
Explore all skills by this author →
WebsiteGitHub

nuxt-ui

Build Vue UI components with @nuxt/ui v4 and Tailwind CSS theming.

Updated Apr 13, 2026
Search Tags:#branding#vue#tailwind css#ui components#customizable ui
One-click install
npx skills add https://github.com/optioni/dungeons-and-dragons --skill nuxt-ui-optioni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt-ui
Source: https://github.com/optioni/dungeons-and-dragons/tree/main/.claude/skills/nuxt-ui
Command: npx skills add https://github.com/optioni/dungeons-and-dragons --skill nuxt-ui-optioni

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @nuxt/ui, tailwindcss, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill Unit addresses the challenge of creating modern, accessible UI components with a focus on customization and theming.

Core Features & Use Cases

  • Component Library: Offers a comprehensive set of Vue components for building interfaces, dashboards, and more.
  • Tailwind CSS Integration: Provides full Tailwind CSS support for styling and theming.
  • Theming & Branding: Allows for customization of colors, fonts, and component variants to match brand identity.

Quick Start

To get started, install the nuxt-ui package with 'pnpm add @nuxt/ui tailwindcss' and configure your Nuxt project to use the nuxt/ui module.

Frequently Asked Questions about nuxt-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible Vue components with Tailwind CSS theming?▼

Build accessible Vue components with Tailwind CSS theming by using @nuxt/ui v4, which provides a suite of customizable Vue components styled via Tailwind CSS for Nuxt.js, Vue, Laravel, and AdonisJS.

What's the best way to customize UI component colors and fonts for branding?▼

The best way to customize UI component colors and fonts for branding is using @nuxt/ui v4 theming options, which allow full Tailwind CSS customization of colors, fonts, and component variants to match your brand identity.

Does @nuxt/ui work with Laravel or AdonisJS?▼

Yes, @nuxt/ui works with Laravel and AdonisJS, allowing you to integrate its accessible, Tailwind CSS-styled component suite across these backend frameworks alongside Nuxt.js and Vue.

How do I install and configure @nuxt/ui and tailwindcss?▼

To install and configure @nuxt/ui and tailwindcss, run 'pnpm add @nuxt/ui tailwindcss' in your project directory, then configure your Nuxt project to use the nuxt/ui module to enable the component suite.

Can I use Tailwind CSS for styling and theming Nuxt.js dashboards?▼

Yes, you can use Tailwind CSS for styling and theming Nuxt.js dashboards by leveraging @nuxt/ui v4, which offers full Tailwind CSS support and a comprehensive set of Vue components for building interfaces.

Related Skills

Explore More Design & Creative Skills→
yuhle-qugyuhle-qug

vue-expert

Diagnose Vue 3 Composition API, reactivity, and Nuxt.js integration issues.

Community
Advanced
LuXDAmoreLuXDAmore

nuxt-ui

Provide over 125 accessible Vue components with Tailwind CSS theming.

Community
Advanced
GuibibiGuibibi

nuxt-ui

Build styled Nuxt 4 and Vue 3 interfaces with @nuxt/ui v4 components.

Community
Advanced
fusenginefusengine
22

nextjs-shadcn

Integrate shadcn/ui components into Next.js App Router applications.

Community
Intermediate