Nuxt UI Component Finder

Discover and learn about Nuxt UI components, their usage, props, and customization options.

When to Use

DO USE when:

• User asks "What UI components are available?"

• Need component examples or API reference

• Questions about component props, slots, or events

• Comparing different components for a use case

• Need theming or customization examples

DO NOT USE when:

• General Nuxt questions (use nuxt-documentation-lookup)

• Installation/setup questions (covered in instructions)

• Already know which component to use (instructions have examples)

Available Tools

Component Information

• mcp_nuxt-ui_list-components

• List all available components by category

• mcp_nuxt-ui_get-component

• Get detailed component documentation

• mcp_nuxt-ui_get-component-metadata

• Get component props, slots, events

Examples

• mcp_nuxt-ui_list-examples

• Browse component examples

• mcp_nuxt-ui_get-example

• Get specific example implementation

Documentation

• mcp_nuxt-ui_list-documentation-pages

• List all docs pages

• mcp_nuxt-ui_get-documentation-page

• Get specific docs content

Process

For Component Discovery:

• Use mcp_nuxt-ui_list-components to see all components

• Components are organized by category:

• Form (Button, Input, Select, Checkbox, etc.)

• Layout (Card, Container, Divider, etc.)

• Navigation (Tabs, Accordion, Breadcrumb, etc.)

• Overlay (Modal, Popover, Dropdown, Tooltip, etc.)

• Data (Table, Avatar, Badge, etc.)

• Feedback (Alert, Progress, Skeleton, etc.)

For Component Details:

• Use mcp_nuxt-ui_get-component with component name (e.g., "Button")

• Returns full documentation with usage examples

For Props/API Reference:

• Use mcp_nuxt-ui_get-component-metadata with component name

• Returns TypeScript props, slots, events definitions

For Examples:

• Use mcp_nuxt-ui_list-examples to browse examples

• Use mcp_nuxt-ui_get-example to get specific implementation

Common Scenarios

"What form components are available?"

1. mcp_nuxt-ui_list-components
2. Filter by category: "Form"
3. Show: Button, Input, Textarea, Select, Checkbox, Radio, Toggle, Form, etc.

"How do I use the Modal component?"

1. mcp_nuxt-ui_get-component with "Modal"
2. Show usage example with v-model
3. Explain programmatic usage with useModal()

"What props does Button accept?"

1. mcp_nuxt-ui_get-component-metadata with "Button"
2. List all props: color, size, variant, icon, loading, disabled, etc.
3. Show TypeScript types

"Show me table examples"

1. mcp_nuxt-ui_list-examples
2. Find Table examples
3. mcp_nuxt-ui_get-example with example name

Component Categories

Form Components:

• Button, ButtonGroup

• Input, Textarea

• Select, SelectMenu

• Checkbox, Radio, Toggle

• Form, FormField

Layout:

• App (required wrapper)

• Card

• Container

• Divider

Navigation:

• Tabs, TabGroup

• Accordion

• Breadcrumb

• Pagination

Overlays:

• Modal

• Popover

• Dropdown

• Tooltip

• ContextMenu

Data Display:

• Table

• Avatar

• Badge, Chip

• Kbd

• Meter

Feedback:

• Alert

• Progress

• Skeleton

• Spinner

• Toast (programmatic)

Example Usage

User: "I need a data table with sorting"

1. Get Table component: mcp_nuxt-ui_get-component("Table")
2. Show sortable example
3. Explain sort prop and @sort event
4. Provide implementation code

User: "How do I customize Button colors?"

1. Get Button metadata: mcp_nuxt-ui_get-component-metadata("Button")
2. Explain color prop (primary, secondary, success, etc.)
3. Show ui prop for advanced customization
4. Provide theming examples

User: "Show me all navigation components"

1. List components: mcp_nuxt-ui_list-components
2. Filter category: "Navigation"
3. Summarize: Tabs, Accordion, Breadcrumb, Pagination
4. Offer to get details on any specific component

Tips

• Component names are PascalCase: "Button", "Modal", "FormField"

• All components have color and size props

• Use ui prop for granular customization

• Check metadata for slots and events

• Examples are practical implementation references