--- name: nuxt-ui description: Expert knowledge for Nuxt UI v4 components and patterns. Activate when creating UI components, working with buttons, cards, forms, or any Nuxt UI component. --- # Nuxt UI v4 Expertise ## Activation Triggers - Creating Vue components with UI elements - Working with buttons, cards, modals, forms - Implementing navigation, dropdowns, tooltips - Building responsive layouts - Adding loading states or skeletons ## Component Reference ### Buttons (UButton) ```vue Default (solid) Outline Soft Ghost Link Primary Secondary Success Warning Error Extra Small Small Medium (default) Large Extra Large Next Complete Submit Disabled ``` ### Cards (UCard) ```vue

Card content goes here.

Outline card Soft background ``` ### Badges (UBadge) ```vue Default Completed In Progress Failed Solid Outline Soft ``` ### Progress (UProgress) ```vue ``` ### Accordion (UAccordion) ```vue ``` ### Modal (UModal) ```vue Open Modal

Modal content here.

``` ### Checkbox & Radio ```vue ``` ### Skeleton (Loading States) ```vue
``` ### Tooltip ```vue Hover me ``` ### Dropdown Menu ```vue ``` ### Breadcrumb ```vue ``` ### Navigation Menu ```vue ``` ## Icons Nuxt UI uses Heroicons by default. Use the `i-heroicons-*` prefix: ```vue i-heroicons-academic-cap i-heroicons-book-open i-heroicons-check-circle i-heroicons-play-circle i-heroicons-clock i-heroicons-chart-bar i-heroicons-trophy i-heroicons-document-text i-heroicons-question-mark-circle ``` ## Theme Configuration ```typescript // app.config.ts export default defineAppConfig({ ui: { colors: { primary: 'indigo', secondary: 'slate', success: 'green', warning: 'amber', error: 'red' } } }) ``` ## Common Patterns ### Card with Progress ```vue

Phase 1: SDLC

4/5 Complete
Continue Learning
``` ### Empty State ```vue

No lessons yet

Start by selecting a topic from the sidebar.

Browse Topics
``` ### Loading Card ```vue ``` ## Best Practices 1. **Always use Nuxt UI components** instead of raw HTML for consistency 2. **Use the `color` prop** instead of custom Tailwind colors 3. **Provide loading states** with `USkeleton` for async content 4. **Use icons consistently** from Heroicons set 5. **Leverage slots** (header, footer, default) for flexible layouts 6. **Add `cursor-pointer`** class to custom clickable elements (UButton handles this automatically)