Nuxt Ui
- 6.2k installs
- 696 repo stars
- Updated July 27, 2026
- onmax/nuxt-skills
nuxt-ui agent skill from cached repository docs.
About
Accordion A stacked set of collapsible panels Based on Reka UI Accordion https reka-ui com docs components accordion Key Props items as an array of objects with the following properties label string lang ts-type icon string lang ts-type trailingIcon string lang ts-type content string lang ts-type value string lang ts-type disabled boolean lang ts-type slot string lang ts-type with-custom-slot class any lang ts-type ui item ClassNameValue header ClassNameValue trigger ClassNameValue leadingIcon ClassNameValue label ClassNameValue trailingIcon ClassNameValue content ClassNameValue body ClassNameValue lang ts-type component-code ignore items external items externalTypes AccordionItem hide class props class px-4 items label Icons icon i-lucide-smile content You have nothing to do nuxt icon will handle it automatically disabled slot Usage vue UAccordion props here Slots body content Accordion A stacked set of collapsible panels Based on Reka UI Accordion https reka-ui com docs components accordion Key Props items as an array of objects with the following properties label string lang ts-type icon string lang ts-type trailingIcon string lang ts-type content string lang ts-type value stri.
- `items`: as an array of objects with the following properties:
- `label?: string`{lang="ts-type"}
- `icon?: string`{lang="ts-type"}
- `trailingIcon?: string`{lang="ts-type"}
- `content?: string`{lang="ts-type"}
Nuxt Ui by the numbers
- 6,221 all-time installs (skills.sh)
- +46 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Ranked #82 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
nuxt-ui capabilities & compatibility
- Capabilities
- `items`: as an array of objects with the followi · `label?: string`{lang="ts type"} · `icon?: string`{lang="ts type"} · `trailingicon?: string`{lang="ts type"} · `content?: string`{lang="ts type"}
- Use cases
- documentation
What nuxt-ui says it does
# Accordion A stacked set of collapsible panels.
- `disabled`: - `slot`: ## Usage ```vue <UAccordion <!-- props here --> /> ``` ## Slots - `#body` - `#content`
npx skills add https://github.com/onmax/nuxt-skills --skill nuxt-uiAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 6.2k |
|---|---|
| repo stars | ★ 696 |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 27, 2026 |
| Repository | onmax/nuxt-skills ↗ |
When should developers use nuxt-ui and what problem does it solve?
Accordion A stacked set of collapsible panels Based on Reka UI Accordion https reka-ui com docs components accordion Key Props items as an array of objects with the following properties label string l
Who is it for?
Developers working with nuxt-ui patterns described in the skill documentation.
Skip if: Skip when cached docs are empty or the task is outside the skill's documented scope.
When should I use this skill?
User asks about nuxt-ui.
What you get
Grounded guidance and workflows from SKILL.md for nuxt-ui.
- Nuxt UI component templates
- Typed props and slot configurations
Files
Accordion
A stacked set of collapsible panels.
Based on Reka UI Accordion
Key Props
items: as an array of objects with the following properties:
label?: string{lang="ts-type"}icon?: string{lang="ts-type"}trailingIcon?: string{lang="ts-type"}content?: string{lang="ts-type"}value?: string{lang="ts-type"}disabled?: boolean{lang="ts-type"}- `slot?: string`{lang="ts-type"}
class?: any{lang="ts-type"}ui?: { item?: ClassNameValue, header?: ClassNameValue, trigger?: ClassNameValue, leadingIcon?: ClassNameValue, label?: ClassNameValue, trailingIcon?: ClassNameValue, content?: ClassNameValue, body?: ClassNameValue }{lang="ts-type"}
::component-code
ignore:
- items
external:
- items
externalTypes:
- AccordionItem[]
hide:
- class
props: class: 'px-4' items: - label: 'Icons' icon: 'i-lucide-smile' content: 'You have nothing to do, @nuxt/icon will handle it automatically.
disabled:slot:
Usage
<UAccordion
<!-- props here -->
/>Slots
#body#content
Alert
A callout to draw user's attention.
Key Props
title: to set the title of the Alert.description: to set the description of the Alert.icon: to show an Icon.avatar: to show an Avatar.color: to change the color of the Alert.variant: to change the variant of the Alert.close: to display a Button to dismiss the Alert.actions: to add some Button actions to the Alert.orientation: to change the orientation of the Alert.class: to override the base styles of the Alert.
Usage
<UAlert
<!-- props here -->
/>App
Wraps your app to provide global configurations and more.
Usage
<UApp
<!-- props here -->
/>AuthForm
A customizable Form to create login, register or password reset forms.
Key Props
fields: as an array of objects with the following properties:
name: string{lang="ts-type"}type: 'checkbox' | 'select' | 'otp' | 'InputHTMLAttributes['type']'{lang="ts-type"}
Each field must include a type property, which determines the input component and any additional props applied: checkbox fields use Checkbox props, select fields use SelectMenu props, otp fields use PinInput props, and all other types use Input props.
title: to set the title of the Form.description: to set the description of the Form.icon: to set the icon of the Form.providers: to add providers to the form.separator: to customize the Separator between the providers and the fields.submit: to change the submit button of the Form.
Usage
<UAuthForm
<!-- props here -->
/>AvatarGroup
Stack multiple avatars in a group.
Key Props
size: to change the size of all the avatars.max: to limit the number of avatars displayed.
Usage
<UAvatarGroup
<!-- props here -->
/>Avatar
An img element with fallback and Nuxt Image support.
Key Props
src: to set the image URL.size: to set the size of the Avatar.icon: to display a fallback Icon.text: to display a fallback text.chip: to display a chip around the Avatar.
Usage
<UAvatar
<!-- props here -->
/>Badge
A short text to represent a status or a category.
Key Props
Accordion
A stacked set of collapsible panels.
Based on Reka UI Accordion
Key Props
items: as an array of objects with the following properties:
label?: string{lang="ts-type"}icon?: string{lang="ts-type"}trailingIcon?: string{lang="ts-type"}content?: string{lang="ts-type"}value?: string{lang="ts-type"}disabled?: boolean{lang="ts-type"}- `slot?: string`{lang="ts-type"}
class?: any{lang="ts-type"}ui?: { item?: ClassNameValue, header?: ClassNameValue, trigger?: ClassNameValue, leadingIcon?: ClassNameValue, label?: ClassNameValue, trailingIcon?: ClassNameValue, content?: ClassNameValue, body?: ClassNameValue }{lang="ts-type"}
::component-code
ignore:
- items
external:
- items
externalTypes:
- AccordionItem[]
hide:
- class
props: class: 'px-4' items: - label: 'Icons' icon: 'i-lucide-smile' content: 'You have nothing to do, @nuxt/icon will handle it automatically.
disabled:slot:
Usage
<UAccordion
<!-- props here -->
/>Slots
#body#content
Alert
A callout to draw user's attention.
Key Props
title: to set the title of the Alert.description: to set the description of the Alert.icon: to show an Icon.avatar: to show an Avatar.color: to change the color of the Alert.variant: to change the variant of the Alert.close: to display a Button to dismiss the Alert.actions: to add some Button actions to the Alert.orientation: to change the orientation of the Alert.class: to override the base styles of the Alert.
Usage
<UAlert
<!-- props here -->
/>App
Wraps your app to provide global configurations and more.
Usage
<UApp
<!-- props here -->
/>AuthForm
A customizable Form to create login, register or password reset forms.
Key Props
fields: as an array of objects with the following properties:
name: string{lang="ts-type"}type: 'checkbox' | 'select' | 'otp' | 'InputHTMLAttributes['type']'{lang="ts-type"}
Each field must include a type property, which determines the input component and any additional props applied: checkbox fields use Checkbox props, select fields use SelectMenu props, otp fields use PinInput props, and all other types use Input props.
title: to set the title of the Form.description: to set the description of the Form.icon: to set the icon of the Form.providers: to add providers to the form.separator: to customize the Separator between the providers and the fields.submit: to change the submit button of the Form.
Usage
<UAuthForm
<!-- props here -->
/>AvatarGroup
Stack multiple avatars in a group.
Key Props
size: to change the size of all the avatars.max: to limit the number of avatars displayed.
Usage
<UAvatarGroup
<!-- props here -->
/>Avatar
An img element with fallback and Nuxt Image support.
Key Props
src: to set the image URL.size: to set the size of the Avatar.icon: to display a fallback Icon.text: to display a fallback text.chip: to display a chip around the Avatar.
Usage
<UAvatar
<!-- props here -->
/>Badge
A short text to represent a status or a category.
Key Props
label: to set the label of the Badge.color: to change the color of the Badge.variant:size: to change the size of the Badge.icon: to show an Icon inside the Badge.avatar: to show an Avatar inside the Badge.class: to override the base styles of the Badge.
Usage
<UBadge
<!-- props here -->
/>Banner
Display a banner at the top of your website to inform users about important information.
Key Props
title: to display a title on the Banner.icon: to display an icon on the Banner.color: to change the color of the Banner.close: to display a Button to dismiss the Banner.actions: to add some Button actions to the Banner.
Usage
<UBanner
<!-- props here -->
/>BlogPost
A customizable article to display in a blog page.
Key Props
title: to display the title of the BlogPost.description: to display the description of the BlogPost.date: to display the date of the BlogPost.badge: to display a Badge in the BlogPost.image: to display an image in the BlogPost.authors: to display a list of User in the BlogPost as an array of objects with the following properties:
name?: string{lang="ts-type"}description?: string{lang="ts-type"}avatar?: Omit<AvatarProps, 'size'>{lang="ts-type"}chip?: boolean | Omit<ChipProps, 'size' | 'inset'>{lang="ts-type"}size?: UserProps['size']{lang="ts-type"}orientation?: UserProps['orientation']{lang="ts-type"}
You can pass any property from the Link component such as to, target, etc.
variant: to change the style of the BlogPost.orientation: to change the BlogPost orientation.
Usage
<UBlogPost
<!-- props here -->
/>BlogPosts
Display a list of blog posts in a responsive grid layout.
Key Props
posts: as an array of objects with the properties of the BlogPost component.orientation: to change the orientation of the BlogPosts.
Usage
<UBlogPosts
<!-- props here -->
/>Breadcrumb
A hierarchy of links to navigate through a website.
Key Props
items: as an array of objects with the following properties:
label?: string{lang="ts-type"}icon?: string{lang="ts-type"}avatar?: AvatarProps{lang="ts-type"}- `slot?: string`{lang="ts-type"}
class?: any{lang="ts-type"}ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLabel?: ClassNameValue, separator?: ClassNameValue, separatorIcon?: ClassNameValue }{lang="ts-type"}
You can pass any property from the Link component such as to, target, etc.
slot:
Usage
<UBreadcrumb
<!-- props here -->
/>Slots
#item
Button
A button element that can act as a link or trigger an action.
Key Props
label: to set the label of the Button.color: to change the color of the Button.variant: to change the variant of the Button.size: to change the size of the Button.icon: to show an Icon inside the Button.avatar: to show an Avatar inside the Button.loading: to show a loading icon and disable the Button.disabled: to disable the Button.class: to override the base styles of the Button.ui: to override the slots styles of the Button.
Usage
<UButton
<!-- props here -->
/>Calendar
A calendar component for selecting single dates, multiple dates or date ranges.
Based on Reka UI Calendar
Key Props
multiple: to allow multiple selections.range: to select a range of dates.color: to change the color of the calendar.variant: to change the variant of the calendar.size: to change the size of the calendar.disabled: to disable the calendar.numberOfMonths: to change the number of months in the calendar.weekNumbers: to display week numbers (v4.4+).
Usage
<UCalendar
<!-- props here -->
/>Card
Display content in a card with a header, body and footer.
Key Props
variant: to change the variant of the Card.
Usage
<UCard
<!-- props here -->
/>Carousel
A carousel with motion and swipe built using Embla.
Key Props
items: as an array and render each item using the default slot:
::component-example
name: 'carousel-items-example' class: 'p-8'
---
::
You can also pass an array of objects with the following properties:
class?: any{lang="ts-type"}ui?: { item?: ClassNameValue }{lang="ts-type"}
You can control how many items are visible by using the [basis](https://tailwindcss.
orientation: to change the orientation of the Progress.arrows: to display prev and next buttons.dots: to display a list of dots to scroll to a specific slide.autoplay: as a boolean or an object to configure the [Autoplay plugin](https://www.fade: as a boolean or an object to configure the [Fade plugin](https://www.
Usage
<UCarousel
<!-- props here -->
/>ChangelogVersion
A customizable article to display in a changelog.
Key Props
title: to display the title of the ChangelogVersion.description: to display the description of the ChangelogVersion.date: to display the date of the ChangelogVersion.badge: to display a Badge on the ChangelogVersion.image: to display an image in the BlogPost.authors: to display a list of User in the ChangelogVersion as an array of objects with the following properties:
name?: string{lang="ts-type"}description?: string{lang="ts-type"}avatar?: Omit<AvatarProps, 'size'>{lang="ts-type"}chip?: boolean | Omit<ChipProps, 'size' | 'inset'>{lang="ts-type"}size?: UserProps['size']{lang="ts-type"}orientation?: UserProps['orientation']{lang="ts-type"}
You can pass any property from the Link component such as to, target, etc.
indicator: to hide the indicator dot on the left.
Usage
<UChangelogVersion
<!-- props here -->
/>ChangelogVersions
Display a list of changelog versions in a timeline.
Key Props
versions: as an array of objects with the properties of the ChangelogVersion component.indicator: to hide the indicator bar on the left.
Usage
<UChangelogVersions
<!-- props here -->
/>ChatMessage
Display a chat message with icon, avatar, and actions.
Key Props
parts: to display the message content using the AI SDK v5 format.side: to display the message on the left or right.variant: to change style of the message.icon: to display an Icon component next to the message.avatar: to display an Avatar component next to the message.actions: to display actions below the message that will be displayed when hovering over the message.
Usage
<UChatMessage
<!-- props here -->
/>ChatMessages
Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.
Key Props
messages: to display a list of chat messages.status: to display a visual indicator when the assistant is processing.user: to change the ChatMessage props forusermessages.assistant: to change the ChatMessage props forassistantmessages.
Usage
<UChatMessages
<!-- props here -->
/>ChatPalette
A chat palette to create a chatbot interface inside an overlay.
Usage
<UChatPalette
<!-- props here -->
/>ChatPromptSubmit
A Button for submitting chat prompts with automatic status handling.
Usage
<UChatPromptSubmit
<!-- props here -->
/>ChatPrompt
An enhanced Textarea for submitting prompts in AI chat interfaces.
Key Props
variant: to change the style of the prompt.
Usage
<UChatPrompt
<!-- props here -->
/>CheckboxGroup
A set of checklist buttons to select multiple option from a list.
Based on Reka UI CheckboxGroup
Key Props
items: as an array of strings or numbers:
::component-code
prettier: true ignore:
- modelValue
- items
external:
- items
- modelValue
props: modelValue: - 'System' items: - 'System' - 'Light' - 'Dark'
---
::
You can also pass an array of objects with the following properties:
label?: string{lang="ts-type"}description?: string{lang="ts-type"}- `value?: string`{lang="ts-type"}
disabled?: boolean{lang="ts-type"}class?: any{lang="ts-type"}ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, icon?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }{lang="ts-type"}
::component-code
ignore:
- modelValue
- items
external:
- items
- modelValue
externalTypes:
- CheckboxGroupItem[]
props: modelValue: - 'system' items: - label: 'System' description: 'This is the first option.
legend: to set the legend of the CheckboxGroup.color: to change the color of the CheckboxGroup.variant: to change the variant of the CheckboxGroup.size: to change the size of the CheckboxGroup.orientation: to change the orientation of the CheckboxGroup.indicator: to change the position or hide the indicator.disabled: to disable the CheckboxGroup.
Usage
<UCheckboxGroup
<!-- props here -->
/>Checkbox
An input element to toggle between checked and unchecked states.
Based on Reka UI Checkbox
Key Props
label: to set the label of the Checkbox.description: to set the description of the Checkbox.icon: to set the icon of the Checkbox when it is checked.color: to change the color of the Checkbox.variant: to change the variant of the Checkbox.size: to change the size of the Checkbox.indicator: to change the position or hide the indicator.disabled: to disable the Checkbox.
Usage
<UCheckbox
<!-- props here -->
/>Chip
An indicator of a numeric value or a state.
Key Props
color: to change the color of the Chip.size: to change the size of the Chip.text: to set the text of the Chip.position: to change the position of the Chip.inset: to display the Chip inside the component.standalone: alongside theinsetprop to display the Chip inline.
Usage
<UChip
<!-- props here -->
/>Collapsible
A collapsible element to toggle visibility of its content.
Based on Reka UI Collapsible
Key Props
disabled: to disable the Collapsible.
Usage
<UCollapsible
<!-- props here -->
/>Slots
#content
ColorModeAvatar
An Avatar with a different source for light and dark mode.
Usage
<UColorModeAvatar
<!-- props here -->
/>ColorModeButton
A Button to switch between light and dark mode.
Usage
<UColorModeButton
<!-- props here -->
/>ColorModeImage
An image element with a different source for light and dark mode.
Usage
<UColorModeImage
<!-- props here -->
/>ColorModeSelect
A Select to switch between system, dark & light mode.
Usage
<UColorModeSelect
<!-- props here -->
/>ColorModeSwitch
A switch to toggle between light and dark mode.
Usage
<UColorModeSwitch
<!-- props here -->
/>ColorPicker
A component to select a color.
Key Props
format: to setrgbvalue of the ColorPicker.throttle: to set the throttle value of the ColorPicker.size: to set the size of the ColorPicker.disabled: to disable the ColorPicker.
Usage
<UColorPicker
<!-- props here -->
/>CommandPalette
A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.
Based on Reka UI CommandPalette
Key Props
groups: as an array of objects with the following properties:
id: string{lang="ts-type"}label?: string{lang="ts-type"}slot?: string{lang="ts-type"}items?: CommandPaletteItem[]{lang="ts-type"}- `ignoreFilter?: boolean`{lang="ts-type"}
- [
postFilter?: (searchTerm: string, items: T[]) => T[]{lang="ts-type"}](#with-post-filtered-items) highlightedIcon?: string{lang="ts-type"}
::caution You must provide an id for each group otherwise the group will be ignored.
multiple: to allow multiple selections.placeholder: to change the placeholder text.icon: to customize the input Icon.loading: to show a loading icon on the CommandPalette.close: to display a Button to dismiss the CommandPalette.back: to customize or hide the back button (withfalsevalue) displayed when navigating into a submenu.disabled: to disable the CommandPalette.virtualize: to enable virtualization for large lists as a boolean or an object with options like{ estimateSize: 32, overscan: 12 }.slot:
Usage
<UCommandPalette
<!-- props here -->
/>Slots
#footer#item
Container
A container lets you center and constrain the width of your content.
Usage
<UContainer
<!-- props here -->
/>ContentNavigation
An accordion-style navigation component for organizing page links.
Key Props
navigation: with thenavigation{lang="ts-type"} value you get when fetching the navigation of your app.color: to change the color of the navigation links.variant: to change the variant of the navigation links.highlight: to display a highlighted border for the active link.
Usage
<UContentNavigation
<!-- props here -->
/>ContentSearchButton
A pre-styled Button to open the ContentSearch modal.
Key Props
collapsed: to show the button's label and kbds.kbds: to display keyboard keys in the button.
Usage
<UContentSearchButton
<!-- props here -->
/>ContentSearch
A ready to use CommandPalette to add to your documentation.
Key Props
shortcut: to change the shortcut used in defineShortcuts to open the ContentSearch component.
Usage
<UContentSearch
<!-- props here -->
/>ContentSurround
A pair of prev and next links to navigate between pages.
Key Props
surround: with thesurround{lang="ts-type"} value you get when fetching a page surround.
Usage
<UContentSurround
<!-- props here -->
/>ContentToc
A sticky Table of Contents with automatic active anchor link highlighting.
Key Props
links: with the `page?.title: to change the title of the Table of Contents.color: to change the color of the links.highlight: to display a highlighted border for the active item.
Usage
<UContentToc
<!-- props here -->
/>ContextMenu
A menu to display actions when right-clicking on an element.
Based on Reka UI ContextMenu
Key Props
items: as an array of objects with the following properties:
label?: string{lang="ts-type"}icon?: string{lang="ts-type"}avatar?: AvatarProps{lang="ts-type"}kbds?: string[] | KbdProps[]{lang="ts-type"}- `type?: "link" | "label" | "separator" | "checkbox"`{lang="ts-type"}
- `color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}
- `checked?: boolean`{lang="ts-type"}
disabled?: boolean{lang="ts-type"}- `slot?: string`{lang="ts-type"}
onSelect?: (e: Event) => void{lang="ts-type"}- `onUpdateChecked?: (checked: boolean) => void`{lang="ts-type"}
children?: ContextMenuItem[] | ContextMenuItem[][]{lang="ts-type"}class?: any{lang="ts-type"}ui?: { item?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelExternalIcon?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue }{lang="ts-type"}
You can pass any property from the Link component such as to, target, etc.
size: to change the size of the ContextMenu.modal: to control whether the ContextMenu blocks interaction with outside content.disabled: to disable the ContextMenu.slot:
Usage
<UContextMenu
<!-- props here -->
/>Slots
#item
DashboardGroup
A fixed layout component that provides context for dashboard components with sidebar state management and persistence.
Usage
<UDashboardGroup
<!-- props here -->
/>DashboardNavbar
A responsive navbar to display in a dashboard.
Key Props
title: to set the title of the navbar.icon: to set the icon of the navbar.toggle: to customize the toggle button displayed on mobile that opens the DashboardSidebar component.
Usage
<UDashboardNavbar
<!-- props here -->
/>DashboardPanel
A resizable panel to display in a dashboard.
Key Props
resizable: to make the panel resizable.
Usage
<UDashboardPanel
<!-- props here -->
/>DashboardResizeHandle
A handle to resize a sidebar or panel.
Usage
<UDashboardResizeHandle
<!-- props here -->
/>DashboardSearchButton
A pre-styled Button to open the DashboardSearch modal.
Key Props
collapsed: to hide the button's label and kbds.kbds: to display keyboard keys in the button.
Usage
<UDashboardSearchButton
<!-- props here -->
/>DashboardSearch
A ready to use CommandPalette to add to your dashboard.
Key Props
shortcut: to change the shortcut used in defineShortcuts to open the ContentSearch component.
Usage
<UDashboardSearch
<!-- props here -->
/>DashboardSidebarCollapse
A Button to collapse the sidebar on desktop.
Usage
<UDashboardSidebarCollapse
<!-- props here -->
/>DashboardSidebarToggle
A Button to toggle the sidebar on mobile.
Usage
<UDashboardSidebarToggle
<!-- props here -->
/>DashboardSidebar
A resizable and collapsible sidebar to display in a dashboard.
Key Props
resizable: to make the sidebar resizable.collapsible: to make the sidebar collapsible when dragging near the edge of the screen.side: to change the side of the sidebar.mode: to change the mode of the sidebar menu.toggle: to customize the DashboardSidebarToggle component displayed on mobile.
Usage
<UDashboardSidebar
<!-- props here -->
/>DashboardToolbar
A toolbar to display under the navbar in a dashboard.
Usage
<UDashboardToolbar
<!-- props here -->
/>Drawer
A drawer that smoothly slides in & out of the screen.
Key Props
title: to set the title of the Drawer's header.description: to set the description of the Drawer's header.direction: to control the direction of the Drawer.inset: to inset the Drawer from the edges.handle: to control whether the Drawer has a handle or not.overlay: to control whether the Drawer has an overlay or not.modal: to control whether the Drawer blocks interaction with outside content.dismissible: to control whether the Drawer is dismissible when clicking outside of it or pressing escape.
Usage
<UDrawer
<!-- props here -->
/>Slots
#content#header#body#footer
DropdownMenu
A menu to display actions when clicking on an element.
Based on Reka UI DropdownMenu
Key Props
items: as an array of objects with the following properties:
label?: string{lang="ts-type"}icon?: string{lang="ts-type"}avatar?: AvatarProps{lang="ts-type"}kbds?: string[] | KbdProps[]{lang="ts-type"}- `type?: "link" | "label" | "separator" | "checkbox"`{lang="ts-type"}
- `color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}
- `checked?: boolean`{lang="ts-type"}
disabled?: boolean{lang="ts-type"}- `slot?: string`{lang="ts-type"}
onSelect?: (e: Event) => void{lang="ts-type"}- `onUpdateChecked?: (checked: boolean) => void`{lang="ts-type"}
children?: DropdownMenuItem[] | DropdownMenuItem[][]{lang="ts-type"}class?: any{lang="ts-type"}ui?: { item?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelExternalIcon?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue }{lang="ts-type"}
You can pass any property from the Link component such as to, target, etc.
content: to control how the DropdownMenu content is rendered, like itsalignorsidefor example.arrow: to display an arrow on the DropdownMenu.size: to control the size of the DropdownMenu.modal: to control whether the DropdownMenu blocks interaction with outside content.disabled: to disable the DropdownMenu.slot:
Usage
<UDropdownMenu
<!-- props here -->
/>Slots
#item
EditorDragHandle
A draggable handle for reordering and selecting blocks in the editor.
Key Props
icon: to customize the drag handle icon.options: to customize the positioning behavior using [Floating UI options](https://floating-ui.
Usage
<UEditorDragHandle
<!-- props here -->
/>EditorEmojiMenu
An emoji picker menu that displays emoji suggestions when typing the : character in the editor.
Key Props
items: as an array of objects with the following properties:
name: string{lang="ts-type"}emoji: string{lang="ts-type"}shortcodes?: string[]{lang="ts-type"}tags?: string[]{lang="ts-type"}group?: string{lang="ts-type"}fallbackImage?: string{lang="ts-type"}
::component-example
elevated: true collapse: true name: 'editor-emoji-menu-items-example' class: 'p-8'
---
::
::note You can also pass an array of arrays to the items prop to create separated groups of items.
char: to change the trigger character.options: to customize the positioning behavior using [Floating UI options](https://floating-ui.
Usage
<UEditorEmojiMenu
<!-- props here -->
/>EditorMentionMenu
A mention menu that displays user suggestions when typing the @ character in the editor.
Key Props
items: as an array of objects with the following properties:
label: string{lang="ts-type"}avatar?: AvatarProps{lang="ts-type"}icon?: string{lang="ts-type"}description?: string{lang="ts-type"}disabled?: boolean{lang="ts-type"}
::component-example
elevated: true collapse: true name: 'editor-mention-menu-items-example' class: 'p-8'
---
::
::note You can also pass an array of arrays to the items prop to create separated groups of items.
char: to change the trigger character.options: to customize the positioning behavior using [Floating UI options](https://floating-ui.
Usage
<UEditorMentionMenu
<!-- props here -->
/>EditorSuggestionMenu
A command menu that displays formatting and action suggestions when typing the / character in the editor.
Key Props
items: as an array of objects with the following properties:
- `kind?: "textAlign" | "heading" | "link" | "image" | "blockquote" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "paragraph" | "clearFormatting" | "duplicate" | "delete" | "moveUp" | "moveDown" | "suggestion" | "mention" | "emoji"`{lang="ts-type"}
label?: string{lang="ts-type"}description?: string{lang="ts-type"}icon?: string{lang="ts-type"}type?: "label" | "separator"{lang="ts-type"}disabled?: boolean{lang="ts-type"}
::component-example
elevated: true collapse: true name: 'editor-suggestion-menu-items-example' class: 'p-8'
---
::
::note You can also pass an array of arrays to the items prop to create separated groups of items.
char: to change the trigger character.options: to customize the positioning behavior using [Floating UI options](https://floating-ui.
Usage
<UEditorSuggestionMenu
<!-- props here -->
/>EditorToolbar
A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.
Key Props
items: as an array of objects with the following properties:
label?: string{lang="ts-type"}icon?: string{lang="ts-type"}color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"{lang="ts-type"}activeColor?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"{lang="ts-type"}variant?: "solid" | "outline" | "soft" | "ghost" | "link" | "subtle"{lang="ts-type"}activeVariant?: "solid" | "outline" | "soft" | "ghost" | "link" | "subtle"{lang="ts-type"}size?: "xs" | "sm" | "md" | "lg" | "xl"{lang="ts-type"}- `kind?: "mark" | "textAlign" | "heading" | "link" | "image" | "blockquote" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "paragraph" | "undo" | "redo" | "clearFormatting" | "duplicate" | "delete" | "moveUp" | "moveDown" | "suggestion" | "mention" | "emoji"`{lang="ts-type"}
disabled?: boolean{lang="ts-type"}loading?: boolean{lang="ts-type"}active?: boolean{lang="ts-type"}tooltip?: TooltipProps{lang="ts-type"}- `slot?: string`{lang="ts-type"}
onClick?: (e: MouseEvent) => void{lang="ts-type"}items?: EditorToolbarItem[] | EditorToolbarItem[][]{lang="ts-type"}class?: any{lang="ts-type"}
You can pass any property from the Button component such as color, variant, size, etc.
layout: to change how the toolbar is displayed.
Usage
<UEditorToolbar
<!-- props here -->
/>Editor
A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.
Key Props
placeholder: to set a placeholder text that shows in empty paragraphs.handlers: to extend or override the default handlers.
Usage
<UEditor
<!-- props here -->
/>Empty
A component to display an empty state.
Key Props
title: to set the title of the empty state.description: to set the description of the empty state.icon: to set the icon of the empty state.avatar: to set the avatar of the empty state.actions: to add some Button actions to the empty state.variant: to change the variant of the empty state.size: to change the size of the empty state.
Usage
<UEmpty
<!-- props here -->
/>Error
A pre-built error component with NuxtError support.
Key Props
error: to display an error message.clear: to customize or hide the clear button (withfalsevalue).redirect: to redirect the user to a different page when the clear button is clicked.
Usage
<UError
<!-- props here -->
/>FieldGroup
Group multiple button-like elements together.
Key Props
size: to change the size of all the buttons.orientation: to change the orientation of the buttons.
Usage
<UFieldGroup
<!-- props here -->
/>FileUpload
An input element to upload files.
Key Props
multiple: to allow multiple files to be selected.dropzone: to enable/disable the droppable area.interactive: to enable/disable the clickable area.accept: to specify the allowed file types for the input.label: to set the label of the FileUpload.description: to set the description of the FileUpload.icon: to set the icon of the FileUpload.color: to change the color of the FileUpload.variant: to change the variant of the FileUpload.size: to change the size of the FileUpload.
Usage
<UFileUpload
<!-- props here -->
/>Slots
#actions
FooterColumns
A list of links as columns to display in your Footer.
Key Props
columns: as an array of objects with the following properties:
label: string{lang="ts-type"}children?: FooterColumnLink[]{lang="ts-type"}
Each column contains a children array of objects that define the links.
Usage
<UFooterColumns
<!-- props here -->
/>Footer
A responsive footer component.
Usage
<UFooter
<!-- props here -->
/>FormField
A wrapper for form elements that provides validation and error handling.
Key Props
label: to set the label for the form control.description: to provide additional information below the label.hint: to display a hint message next to the label.help: to display a help message below the form control.error: to display an error message below the form control.size: to change the size of the FormField, thesizeis proxied to the form control.
Usage
<UFormField
<!-- props here -->
/>Form
A form component with built-in validation and submission handling.
Key Props
validate: to apply your own validation logic.nested: to nest multiple Form components and link their validation functions.
Usage
<UForm
<!-- props here -->
/>Header
A responsive header component.
Key Props
title: to change the title of the header.to: to change the link of the title.mode: to change the mode of the header menu.toggle: to customize the toggle button displayed on mobile.
Usage
<UHeader
<!-- props here -->
/>Icon
A component to display any icon from Iconify or another component.
Key Props
name: to display an icon:
::component-code
props: name: 'i-lucide-lightbulb' class: 'size-5'
---
::
::framework-only #nuxt :::caution{to="/docs/getting-started/integrations/icons/nuxt#collections"} It's highly recommended to install the icons collections you need, read more about this.
Usage
<UIcon
<!-- props here -->
/>InputDate
An input component for date selection.
Based on Reka UI InputDate
Key Props
range: to select a range of dates.color: to change the color of the InputDate.variant: to change the variant of the InputDate.size: to change the size of the InputDate.disabled: to disable the InputDate.
Usage
<UInputDate
<!-- props here -->
/>InputMenu
An autocomplete input with real-time suggestions.
Based on Reka UI InputMenu
Key Props
items: as an array of strings, numbers or booleans:
::component-code
prettier: true ignore:
- modelValue
- items
external:
- items
- modelValue
props: modelValue: 'Backlog' items: - Backlog - Todo - In Progress - Done
---
::
You can also pass an array of objects with the following properties:
label?: string{lang="ts-type"}- `type?: "label" | "separator" | "item"`{lang="ts-type"}
- `icon?: string`{lang="ts-type"}
- `avatar?: AvatarProps`{lang="ts-type"}
- `chip?: ChipProps`{lang="ts-type"}
disabled?: boolean{lang="ts-type"}onSelect?: (e: Event) => void{lang="ts-type"}class?: any{lang="ts-type"}ui?: { tagsItem?: ClassNameValue, tagsItemText?: ClassNameValue, tagsItemDelete?: ClassNameValue, tagsItemDeleteIcon?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }{lang="ts-type"}
::component-code
ignore:
- modelValue.
multiple: to allow multiple selections, the selected items will be displayed as tags.placeholder: to set a placeholder text.content: to control how the InputMenu content is rendered, like itsalignorsidefor example.arrow: to display an arrow on the InputMenu.color: to change the ring color when the InputMenu is focused.variant: to change the variant of the InputMenu.size: to change the size of the InputMenu.icon: to show an Icon inside the InputMenu.avatar: to show an Avatar inside the InputMenu.
Usage
<UInputMenu
<!-- props here -->
/>Slots
#leading
InputNumber
An input for numerical values with a customizable range.
Key Props
step: to set the step value of the InputNumber.orientation: to change the orientation of the InputNumber.placeholder: to set a placeholder text.color: to change the ring color when the InputNumber is focused.variant: to change the variant of the InputNumber.size: to change the size of the InputNumber.disabled: to disable the InputNumber.
Usage
<UInputNumber
<!-- props here -->
/>InputTags
An input element that displays interactive tags.
Based on Reka UI InputTags
Key Props
placeholder: to set a placeholder text.color: to change the ring color when the InputTags is focused.variant: to change the appearance of the InputTags.size: to adjust the size of the InputTags.icon: to show an Icon inside the InputTags.avatar: to show an Avatar inside the InputTags.loading: to show a loading icon on the InputTags.disabled: to disable the InputTags.
Usage
<UInputTags
<!-- props here -->
/>InputTime
An input for selecting a time.
Based on Reka UI InputTime
Key Props
color: to change the color of the InputTime.variant: to change the variant of the InputTime.size: to change the size of the InputTime.icon: to show an Icon inside the InputTime.avatar: to show an Avatar inside the InputTime.disabled: to disable the InputTime.
Usage
<UInputTime
<!-- props here -->
/>Input
An input element to enter text.
Key Props
type: to change the input type.placeholder: to set a placeholder text.color: to change the ring color when the Input is focused.variant: to change the variant of the Input.size: to change the size of the Input.icon: to show an Icon inside the Input.avatar: to show an Avatar inside the Input.loading: to show a loading icon on the Input.disabled: to disable the Input.
Usage
<UInput
<!-- props here -->
/>Slots
#trailing#default
Kbd
A kbd element to display a keyboard key.
Key Props
value: to set the value of the Kbd.color: to change the color of the Kbd.variant: to change the variant of the Kbd.size: to change the size of the Kbd.class: to override the base styles of the Badge.
Usage
<UKbd
<!-- props here -->
/>Link
A wrapper around <NuxtLink> with extra props.
Usage
<ULink
<!-- props here -->
/>LocaleSelect
A Select to switch between locales.
Key Props
locales: with an array of locales from@nuxt/ui/locale.
Usage
<ULocaleSelect
<!-- props here -->
/>Main
A main element that fills the available viewport height.
Usage
<UMain
<!-- props here -->
/>Marquee
A component to create infinite scrolling content.
Key Props
reverse: to reverse the direction of the animation.orientation: to change the scrolling direction.repeat: to specify how many times the content should be repeated in the animation.overlay: to remove the gradient overlays on the edges of the marquee.
Usage
<UMarquee
<!-- props here -->
/>Modal
A dialog window that can be used to display a message or request user input.
Based on Reka UI Modal
Key Props
title: to set the title of the Modal's header.description: to set the description of the Modal's header.close: to customize or hide the close button (withfalsevalue) displayed in the Modal's header.transition: to control whether the Modal is animated or not.overlay: to control whether the Modal has an overlay or not.modal: to control whether the Modal blocks interaction with outside content.dismissible: to control whether the Modal is dismissible when clicking outside of it or pressing escape.scrollable: to make the Modal's content scrollable within the overlay.fullscreen: to make the Modal fullscreen.
Usage
<UModal
<!-- props here -->
/>Slots
#content#header#body#footer
NavigationMenu
A list of links that can be displayed horizontally or vertically.
Based on Reka UI NavigationMenu
Key Props
items: as an array of objects with the following properties:
label?: string{lang="ts-type"}icon?: string{lang="ts-type"}avatar?: AvatarProps{lang="ts-type"}badge?: string | number | BadgeProps{lang="ts-type"}tooltip?: TooltipProps{lang="ts-type"}trailingIcon?: string{lang="ts-type"}type?: 'label' | 'trigger' | 'link'{lang="ts-type"}defaultOpen?: boolean{lang="ts-type"}open?: boolean{lang="ts-type"}value?: string{lang="ts-type"}disabled?: boolean{lang="ts-type"}- `slot?: string`{lang="ts-type"}
onSelect?: (e: Event) => void{lang="ts-type"}children?: NavigationMenuChildItem[]{lang="ts-type"}class?: any{lang="ts-type"}ui?: { linkLeadingAvatarSize?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingBadgeSize?: ClassNameValue, linkTrailingBadge?: ClassNameValue, linkTrailingIcon?: ClassNameValue, label?: ClassNameValue, link?: ClassNameValue, content?: ClassNameValue, childList?: ClassNameValue, childLabel?: ClassNameValue, childItem?: ClassNameValue, childLink?: ClassNameValue, childLinkIcon?: ClassNameValue, childLinkWrapper?: ClassNameValue, childLinkLabel?: ClassNameValue, childLinkLabelExternalIcon?: ClassNameValue, childLinkDescription?: ClassNameValue }{lang="ts-type"}
You can pass any property from the Link component such as to, target, etc.
orientation: to change the orientation of the NavigationMenu.highlight: to display a highlighted border for the active item.color: to change the color of the NavigationMenu.variant: to change the variant of the NavigationMenu.arrow: to display an arrow on the NavigationMenu content when items have children.slot:
Usage
<UNavigationMenu
<!-- props here -->
/>Slots
#content#item
PageAnchors
A list of anchors to be displayed in the page.
Key Props
links: as an array of objects with the following properties:
label: string{lang="ts-type"}icon?: string{lang="ts-type"}class?: any{lang="ts-type"}ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeading?: ClassNameValue, linkLeadingIcon?: ClassNameValue }{lang="ts-type"}
You can pass any property from the Link component such as to, target, etc.
Usage
<UPageAnchors
<!-- props here -->
/>PageAside
A sticky aside to display your page navigation.
Usage
<UPageAside
<!-- props here -->
/>PageBody
The main content of your page.
Usage
<UPageBody
<!-- props here -->
/>PageCard
A pre-styled card component that displays a title, description and optional link.
Key Props
title: to set the title of the card.description: to set the description of the card.icon: to set the icon of the card.variant: to change the style of the card.orientation: to change the orientation with the default slot.reverse: to reverse the orientation of the default slot.
Usage
<UPageCard
<!-- props here -->
/>PageColumns
A responsive multi-column layout system for organizing content side-by-side.
Usage
<UPageColumns
<!-- props here -->
/>PageCta
A call to action section to display in your pages.
Key Props
title: to set the title of the CTA.description: to set the description of the CTA.links: to display a list of Button under the description.variant: to change the style of the CTA.orientation: to change the orientation with the default slot.reverse: to reverse the orientation of the default slot.
Usage
<UPageCta
<!-- props here -->
/>PageFeature
A component to showcase key features of your application.
Key Props
title: to set the title of the feature.description: to set the description of the feature.icon: to set the icon of the feature.orientation: to change the orientation of the feature.
Usage
<UPageFeature
<!-- props here -->
/>PageGrid
A responsive grid system for displaying content in a flexible layout.
Usage
<UPageGrid
<!-- props here -->
/>PageHeader
A responsive header for your pages.
Key Props
title: to display a title in the header.description: to display a description in the header.headline: to display a headline in the header.links: to display a list of Button in the header.
Usage
<UPageHeader
<!-- props here -->
/>PageHero
A responsive hero for your pages.
Key Props
title: to set the title of the hero.description: to set the description of the hero.headline: to set the headline of the hero.links: to display a list of Button under the description.orientation: to change the orientation with the default slot.reverse: to reverse the orientation of the default slot.
Usage
<UPageHero
<!-- props here -->
/>PageLinks
A list of links to be displayed in the page.
Key Props
links: as an array of objects with the following properties:
label: string{lang="ts-type"}icon?: string{lang="ts-type"}class?: any{lang="ts-type"}ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeadingIcon?: ClassNameValue }{lang="ts-type"}
You can pass any property from the Link component such as to, target, etc.
title: to display a title above the links.
Usage
<UPageLinks
<!-- props here -->
/>PageList
A vertical list layout for displaying content in a stacked format.
Key Props
divide: to add a divider between each child element.
Usage
<UPageList
<!-- props here -->
/>PageLogos
A list of logos or images to display on your pages.
Key Props
title: to set the title above the logos.marquee: to enable a marquee effect for the logos.
Usage
<UPageLogos
<!-- props here -->
/>PageSection
A responsive section for your pages.
Key Props
title: to set the title of the section.description: to set the description of the section.headline: to set the headline of the section.icon: to set the icon of the section.features: to display a list of PageFeature under the description as an array of objects with the following properties:
title?: string{lang="ts-type"}description?: string{lang="ts-type"}icon?: string{lang="ts-type"}orientation?: 'horizontal' | 'vertical'{lang="ts-type"}
You can pass any property from the Link component such as to, target, etc.
links: to display a list of Button under the description.orientation: to change the orientation with the default slot.reverse: to reverse the orientation of the default slot.
Usage
<UPageSection
<!-- props here -->
/>Page
A grid layout for your pages with left and right columns.
Usage
<UPage
<!-- props here -->
/>Pagination
A list of buttons or links to navigate through pages.
Based on Reka UI Pagination
Key Props
total: to set the total number of items in the list.color: to set the color of the inactive controls.variant: to set the variant of the inactive controls.size: to set the size of the controls.disabled: to disable the pagination controls.to: to transform buttons into links.
Usage
<UPagination
<!-- props here -->
/>PinInput
An input element to enter a pin.
Based on Reka UI PinInput
Key Props
type: to change the input type.mask: to treat the input like a password.otp: to enable One-Time Password functionality.length: to change the amount of inputs.placeholder: to set a placeholder text.color: to change the ring color when the PinInput is focused.variant: to change the variant of the PinInput.size: to change the size of the PinInput.disabled: to disable the PinInput.
Usage
<UPinInput
<!-- props here -->
/>Popover
A non-modal dialog that floats around a trigger element.
Based on Reka UI Popover
Key Props
mode: to change the mode of the Popover.content: to control how the Popover content is rendered, like itsalignorsidefor example.arrow: to display an arrow on the Popover.modal: to control whether the Popover blocks interaction with outside content.dismissible: to control whether the Popover is dismissible when clicking outside of it or pressing escape.
Usage
<UPopover
<!-- props here -->
/>Slots
#content
PricingPlan
A customizable pricing plan to display in a pricing page.
Key Props
title: to set the title of the PricingPlan.description: to set the description of the PricingPlan.badge: to display a Badge next to the title of the PricingPlan.price: to set the price of the PricingPlan.discount: to set a discounted price that will be displayed alongside the original price (which will be shown with a strikethrough).features: as an array of string to display a list of features on the PricingPlan:
::component-code
prettier: true hide:
- class
ignore:
- title
- description
- price
- features
props: title: 'Solo' description: 'For bootstrappers and indie hackers.
button: with any property from the Button component to display a button at the bottom of the PricingPlan.variant: to change the variant of the PricingPlan.orientation: to change the orientation of the PricingPlan.tagline: to display a tagline text above the price.
Usage
<UPricingPlan
<!-- props here -->
/>Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4kFAQ
What does nuxt-ui do?
Accordion A stacked set of collapsible panels Based on Reka UI Accordion https reka-ui com docs components accordion Key Props items as an array of objects with the following properties label string lang ts-type icon str
When should I invoke nuxt-ui?
Accordion A stacked set of collapsible panels Based on Reka UI Accordion https reka-ui com docs components accordion Key Props items as an array of objects with the following properties label string l
Where is the source documentation?
Ground claims in SKILL.md excerpts and linked reference files from the cached docs.
Is Nuxt Ui safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.