Show properties
* `delayDuration?: number`
The duration from when the pointer enters the trigger until the tooltip gets opened. Defaults to `700`.
* `skipDelayDuration?: number`
How much time a user has to enter another trigger without incurring a delay again. Defaults to `300`.
* `disableHoverableContent?: boolean`
When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger. Defaults to `false`.
* `disableClosingTrigger?: boolean`
When `true`, clicking on trigger will not close the content. Defaults to `false`.
* `disabled?: boolean`
When `true`, disable tooltip Defaults to `false`.
* `ignoreNonKeyboardFocus?: boolean`
Prevent the tooltip from opening if the focus did not come from the keyboard by matching against the `:focus-visible` selector. This is useful if you want to avoid opening it when switching browser tabs or closing a dialog. Defaults to `false`. | | `toaster` | | `null \| ToasterProps`
Show properties
* `position?: "top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"`
The position on the screen to display the toasts. Defaults to `'bottom-right'`.
* `expand?: boolean`
Expand the toasts to show multiple toasts at once. Defaults to `true`.
* `progress?: boolean`
Whether to show the progress bar on all toasts. Defaults to `true`.
* `portal?: string \| boolean \| HTMLElement`
Render the toaster in a portal. Defaults to `true`.
* `class?: any`
* `ui?: { viewport?: ClassNameValue; base?: ClassNameValue; }`
* `label?: string`
An author-localized label for each toast. Used to help screen reader users associate the interruption with a toast. Defaults to `'Notification'`.
* `duration?: number`
Time in milliseconds that each toast should remain visible for. Defaults to `5000`.
* `swipeThreshold?: number`
Distance in pixels that the swipe must pass before a close is triggered. Defaults to `50`. | | `locale` | | `Locale
Show properties
* `name: string`
* `code: string`
* `dir: Direction`
* `messages: Messages` | | `portal` | `'body'` | `string \| HTMLElement` | | `scrollBody` | | `boolean \| ScrollBodyOption`
The global scroll body behavior of your application. This will be inherited by the related primitives.
Show properties
* `padding?: string \| number \| boolean`
* `margin?: string \| number \| boolean` | | `nonce` | | `string`
The global `nonce` value of your application. This will be inherited by the related primitives. | ### [Slots](https://ui.nuxt.com/components/app#slots) | Slot | Type | | --- | --- | | `default` | `{}` | [useToast\ \ A composable to display toast notifications in your app.](https://ui.nuxt.com/composables/use-toast) [Accordion\ \ A stacked set of collapsible panels.](https://ui.nuxt.com/components/accordion) --- # Vue Avatar Component - Nuxt UI Avatar ====== [GitHub](https://github.com/nuxt/ui/tree/v3/src/runtime/components/Avatar.vue) An img element with fallback and Nuxt Image support. [Usage](https://ui.nuxt.com/components/avatar#usage) ----------------------------------------------------- The Avatar uses the `
The element or component this component should render as. | | `src` | | `string` | | `alt` | | `string` | | `icon` | | `string` | | `text` | | `string` | | `size` | `'md'` | `"md" \| "3xs" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"` | | `chip` | | `boolean \| ChipProps`
Show properties
* `as?: any`
The element or component this component should render as. Defaults to `'div'`.
* `text?: string \| number`
Display some text inside the chip.
* `color?: "error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
Defaults to `'primary'`.
* `size?: "md" \| "3xs" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`
Defaults to `'md'`.
* `position?: "top-left" \| "top-right" \| "bottom-left" \| "bottom-right"`
The position of the chip. Defaults to `'top-right'`.
* `inset?: boolean`
When `true`, keep the chip inside the component for rounded elements.
* `standalone?: boolean`
When `true`, render the chip relatively to the parent.
* `class?: any`
* `ui?: { root?: ClassNameValue; base?: ClassNameValue; }` | | `ui` | | `{ root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; }` | [Theme](https://ui.nuxt.com/components/avatar#theme) ----------------------------------------------------- app.config.ts `export default defineAppConfig({ ui: { avatar: { slots: { root: 'inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated', image: 'h-full w-full rounded-[inherit] object-cover', fallback: 'font-medium leading-none text-muted truncate', icon: 'text-muted shrink-0' }, variants: { size: { '3xs': { root: 'size-4 text-[8px]' }, '2xs': { root: 'size-5 text-[10px]' }, xs: { root: 'size-6 text-xs' }, sm: { root: 'size-7 text-sm' }, md: { root: 'size-8 text-base' }, lg: { root: 'size-9 text-lg' }, xl: { root: 'size-10 text-xl' }, '2xl': { root: 'size-11 text-[22px]' }, '3xl': { root: 'size-12 text-2xl' } } }, defaultVariants: { size: 'md' } } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ ui: { avatar: { slots: { root: 'inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated', image: 'h-full w-full rounded-[inherit] object-cover', fallback: 'font-medium leading-none text-muted truncate', icon: 'text-muted shrink-0' }, variants: { size: { '3xs': { root: 'size-4 text-[8px]' }, '2xs': { root: 'size-5 text-[10px]' }, xs: { root: 'size-6 text-xs' }, sm: { root: 'size-7 text-sm' }, md: { root: 'size-8 text-base' }, lg: { root: 'size-9 text-lg' }, xl: { root: 'size-10 text-xl' }, '2xl': { root: 'size-11 text-[22px]' }, '3xl': { root: 'size-12 text-2xl' } } }, defaultVariants: { size: 'md' } } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ ui: { avatar: { slots: { root: 'inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated', image: 'h-full w-full rounded-[inherit] object-cover', fallback: 'font-medium leading-none text-muted truncate', icon: 'text-muted shrink-0' }, variants: { size: { '3xs': { root: 'size-4 text-[8px]' }, '2xs': { root: 'size-5 text-[10px]' }, xs: { root: 'size-6 text-xs' }, sm: { root: 'size-7 text-sm' }, md: { root: 'size-8 text-base' }, lg: { root: 'size-9 text-lg' }, xl: { root: 'size-10 text-xl' }, '2xl': { root: 'size-11 text-[22px]' }, '3xl': { root: 'size-12 text-2xl' } } }, defaultVariants: { size: 'md' } } } }) ] })` Expand code [Alert\ \ A callout to draw user's attention.](https://ui.nuxt.com/components/alert) [AvatarGroup\ \ Stack multiple avatars in a group.](https://ui.nuxt.com/components/avatar-group) --- # Vue Accordion Component - Nuxt UI Accordion ========= [Accordion](https://reka-ui.com/docs/components/accordion) [GitHub](https://github.com/nuxt/ui/tree/v3/src/runtime/components/Accordion.vue) A stacked set of collapsible panels. [Usage](https://ui.nuxt.com/components/accordion#usage) -------------------------------------------------------- ### [Items](https://ui.nuxt.com/components/accordion#items) Use the `items` prop as an array of objects with the following properties: * `label?: string` * `icon?: string` * `trailingIcon?: string` * `content?: string` * `value?: string` * `disabled?: boolean` * [`slot?: string`](https://ui.nuxt.com/components/accordion#with-custom-slot) * `class?: any` * `ui?: { item?: ClassNameValue, header?: ClassNameValue, trigger?: ClassNameValue, leadingIcon?: ClassNameValue, label?: ClassNameValue, trailingIcon?: ClassNameValue, content?: ClassNameValue, body?: ClassNameValue }` Icons Colors Components ``
This is the {{ item.label }} panel.
{{ item.content }}
The element or component this component should render as. | | `items` | | `AccordionItem[]`
Show properties
* `label?: string`
* `icon?: string`
* `trailingIcon?: string`
* `slot?: string`
* `content?: string`
* `value?: string`
A unique value for the accordion item. Defaults to the index.
* `disabled?: boolean`
* `class?: any`
* `ui?: Pick<{ root?: ClassNameValue; item?: ClassNameValue; header?: ClassNameValue; trigger?: ClassNameValue; content?: ClassNameValue; body?: ClassNameValue; leadingIcon?: ClassNameValue; trailingIcon?: ClassNameValue; label?: ClassNameValue; }, "body" \| ... 6 more ... \| "label">` | | `trailingIcon` | `appConfig.ui.icons.chevronDown` | `string`
The icon displayed on the right side of the trigger. | | `labelKey` | `'label'` | `string`
The key used to get the label from the item. | | `collapsible` | `true` | `boolean`
When type is "single", allows closing content when clicking trigger for an open item. When type is "multiple", this prop has no effect. | | `defaultValue` | | `string \| string[]`
The default active value of the item(s).
Use when you do not need to control the state of the item(s). | | `modelValue` | | `string \| string[]`
The controlled value of the active item(s).
Use this when you need to control the state of the items. Can be binded with `v-model` | | `type` | `'single'` | `"single" \| "multiple"`
Determines whether a "single" or "multiple" items can be selected at a time.
This prop will overwrite the inferred type from `modelValue` and `defaultValue`. | | `disabled` | `false` | `boolean`
When `true`, prevents the user from interacting with the accordion and all its items | | `unmountOnHide` | `true` | `boolean`
When `true`, the element will be unmounted on closed state. | | `ui` | | `{ root?: ClassNameValue; item?: ClassNameValue; header?: ClassNameValue; trigger?: ClassNameValue; content?: ClassNameValue; body?: ClassNameValue; leadingIcon?: ClassNameValue; trailingIcon?: ClassNameValue; label?: ClassNameValue; }` | ### [Slots](https://ui.nuxt.com/components/accordion#slots) | Slot | Type | | --- | --- | | `leading` | `{ item: AccordionItem; index: number; open: boolean; }` | | `default` | `{ item: AccordionItem; index: number; open: boolean; }` | | `trailing` | `{ item: AccordionItem; index: number; open: boolean; }` | | `content` | `{ item: AccordionItem; index: number; open: boolean; }` | | `body` | `{ item: AccordionItem; index: number; open: boolean; }` | ### [Emits](https://ui.nuxt.com/components/accordion#emits) | Event | Type | | --- | --- | | `update:modelValue` | `[value: string \| string[] \| undefined]` | [Theme](https://ui.nuxt.com/components/accordion#theme) -------------------------------------------------------- app.config.ts `export default defineAppConfig({ ui: { accordion: { slots: { root: 'w-full', item: 'border-b border-default last:border-b-0', header: 'flex', trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0', content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none', body: 'text-sm pb-3.5', leadingIcon: 'shrink-0 size-5', trailingIcon: 'shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200', label: 'text-start break-words' }, variants: { disabled: { true: { trigger: 'cursor-not-allowed opacity-75' } } } } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ ui: { accordion: { slots: { root: 'w-full', item: 'border-b border-default last:border-b-0', header: 'flex', trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0', content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none', body: 'text-sm pb-3.5', leadingIcon: 'shrink-0 size-5', trailingIcon: 'shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200', label: 'text-start break-words' }, variants: { disabled: { true: { trigger: 'cursor-not-allowed opacity-75' } } } } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ ui: { accordion: { slots: { root: 'w-full', item: 'border-b border-default last:border-b-0', header: 'flex', trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0', content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none', body: 'text-sm pb-3.5', leadingIcon: 'shrink-0 size-5', trailingIcon: 'shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200', label: 'text-start break-words' }, variants: { disabled: { true: { trigger: 'cursor-not-allowed opacity-75' } } } } } }) ] })` Expand code [App\ \ Wraps your app to provide global configurations and more.](https://ui.nuxt.com/components/app) [Alert\ \ A callout to draw user's attention.](https://ui.nuxt.com/components/alert) --- # Vue AvatarGroup Component - Nuxt UI AvatarGroup =========== [GitHub](https://github.com/nuxt/ui/tree/v3/src/runtime/components/AvatarGroup.vue) Stack multiple avatars in a group. [Usage](https://ui.nuxt.com/components/avatar-group#usage) ----------------------------------------------------------- Wrap multiple [Avatar](https://ui.nuxt.com/components/avatar) within an AvatarGroup to stack them.  `
The element or component this component should render as. | | `size` | `'md'` | `"md" \| "3xs" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"` | | `max` | | `string \| number`
The maximum number of avatars to display. | | `ui` | | `{ root?: ClassNameValue; base?: ClassNameValue; }` | ### [Slots](https://ui.nuxt.com/components/avatar-group#slots) | Slot | Type | | --- | --- | | `default` | `{}` | [Theme](https://ui.nuxt.com/components/avatar-group#theme) ----------------------------------------------------------- app.config.ts `export default defineAppConfig({ ui: { avatarGroup: { slots: { root: 'inline-flex flex-row-reverse justify-end', base: 'relative rounded-full ring-bg first:me-0' }, variants: { size: { '3xs': { base: 'ring -me-0.5' }, '2xs': { base: 'ring -me-0.5' }, xs: { base: 'ring -me-0.5' }, sm: { base: 'ring-2 -me-1.5' }, md: { base: 'ring-2 -me-1.5' }, lg: { base: 'ring-2 -me-1.5' }, xl: { base: 'ring-3 -me-2' }, '2xl': { base: 'ring-3 -me-2' }, '3xl': { base: 'ring-3 -me-2' } } }, defaultVariants: { size: 'md' } } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ ui: { avatarGroup: { slots: { root: 'inline-flex flex-row-reverse justify-end', base: 'relative rounded-full ring-bg first:me-0' }, variants: { size: { '3xs': { base: 'ring -me-0.5' }, '2xs': { base: 'ring -me-0.5' }, xs: { base: 'ring -me-0.5' }, sm: { base: 'ring-2 -me-1.5' }, md: { base: 'ring-2 -me-1.5' }, lg: { base: 'ring-2 -me-1.5' }, xl: { base: 'ring-3 -me-2' }, '2xl': { base: 'ring-3 -me-2' }, '3xl': { base: 'ring-3 -me-2' } } }, defaultVariants: { size: 'md' } } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ ui: { avatarGroup: { slots: { root: 'inline-flex flex-row-reverse justify-end', base: 'relative rounded-full ring-bg first:me-0' }, variants: { size: { '3xs': { base: 'ring -me-0.5' }, '2xs': { base: 'ring -me-0.5' }, xs: { base: 'ring -me-0.5' }, sm: { base: 'ring-2 -me-1.5' }, md: { base: 'ring-2 -me-1.5' }, lg: { base: 'ring-2 -me-1.5' }, xl: { base: 'ring-3 -me-2' }, '2xl': { base: 'ring-3 -me-2' }, '3xl': { base: 'ring-3 -me-2' } } }, defaultVariants: { size: 'md' } } } }) ] })` Expand code [Avatar\ \ An img element with fallback and Nuxt Image support.](https://ui.nuxt.com/components/avatar) [Badge\ \ A short text to represent a status or a category.](https://ui.nuxt.com/components/badge) --- # Vue Alert Component - Nuxt UI Alert ===== [GitHub](https://github.com/nuxt/ui/tree/v3/src/runtime/components/Alert.vue) A callout to draw user's attention. [Usage](https://ui.nuxt.com/components/alert#usage) ---------------------------------------------------- ### [Title](https://ui.nuxt.com/components/alert#title) Use the `title` prop to set the title of the Alert. title Heads up! `
The element or component this component should render as. | | `title` | | `string` | | `description` | | `string` | | `icon` | | `string` | | `avatar` | | `AvatarProps`
Show properties
* `as?: any`
The element or component this component should render as. Defaults to `'span'`.
* `src?: string`
* `alt?: string`
* `icon?: string`
* `text?: string`
* `size?: "2xl" \| "md" \| "3xs" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "3xl"`
Defaults to `'md'`.
* `chip?: boolean \| ChipProps`
* `class?: any`
* `style?: any`
* `ui?: { root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; }` | | `color` | `'primary'` | `"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"` | | `variant` | `'solid'` | `"solid" \| "outline" \| "soft" \| "subtle"` | | `orientation` | `'vertical'` | `"vertical" \| "horizontal"`
The orientation between the content and the actions. | | `actions` | | `ButtonProps[]`
Display a list of actions:
* under the title and description when orientation is `vertical`
* next to the close button when orientation is `horizontal``{ size: 'xs' }`
Show properties
* `label?: string`
* `color?: "error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
Defaults to `'primary'`.
* `activeColor?: "error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
* `variant?: "link" \| "solid" \| "outline" \| "soft" \| "subtle" \| "ghost"`
Defaults to `'solid'`.
* `activeVariant?: "link" \| "solid" \| "outline" \| "soft" \| "subtle" \| "ghost"`
* `size?: "md" \| "xs" \| "sm" \| "lg" \| "xl"`
Defaults to `'md'`.
* `square?: boolean`
Render the button with equal padding on all sides.
* `block?: boolean`
Render the button full width.
* `loadingAuto?: boolean`
Set loading state automatically based on the `@click` promise state
* `class?: any`
* `ui?: { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }`
* `icon?: string`
Display an icon based on the `leading` and `trailing` props.
* `avatar?: AvatarProps`
Display an avatar on the left side.
* `leading?: boolean`
When `true`, the icon will be displayed on the left side.
* `leadingIcon?: string`
Display an icon on the left side.
* `trailing?: boolean`
When `true`, the icon will be displayed on the right side.
* `trailingIcon?: string`
Display an icon on the right side.
* `loading?: boolean`
When `true`, the loading icon will be displayed.
* `loadingIcon?: string`
The icon when the `loading` prop is `true`. Defaults to `appConfig.ui.icons.loading`.
* `type?: "reset" \| "submit" \| "button"`
The type of the button when not a link. Defaults to `'button'`.
* `disabled?: boolean`
* `as?: any`
The element or component this component should render as when not a link. Defaults to `'button'`.
* `to?: string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric`
Route Location the link should navigate to when clicked on.
* `active?: boolean`
Force the link to be active independent of the current route.
* `target?: "_blank" \| "_parent" \| "_self" \| "_top" \| (string & {}) \| null`
Where to display the linked URL, as the name for a browsing context. | | `close` | `false` | `boolean \| Partial
Display a close button to dismiss the alert. `{ size: 'md', color: 'neutral', variant: 'link' }` | | `closeIcon` | `appConfig.ui.icons.close` | `string`
The icon displayed in the close button. | | `ui` | | `{ root?: ClassNameValue; wrapper?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; icon?: ClassNameValue; avatar?: ClassNameValue; avatarSize?: ClassNameValue; actions?: ClassNameValue; close?: ClassNameValue; }` | ### [Slots](https://ui.nuxt.com/components/alert#slots) | Slot | Type | | --- | --- | | `leading` | `{}` | | `title` | `{}` | | `description` | `{}` | | `actions` | `{}` | | `close` | `{ ui: { root: (props?: Record
The element or component this component should render as. | | `items` | | `BreadcrumbItem[]`
Show properties
* `label?: string`
* `icon?: string`
* `avatar?: AvatarProps`
* `slot?: string`
* `class?: any`
* `ui?: Pick<{ root?: ClassNameValue; list?: ClassNameValue; item?: ClassNameValue; link?: ClassNameValue; linkLeadingIcon?: ClassNameValue; ... 4 more ...; separatorIcon?: ClassNameValue; }, "separatorIcon" \| ... 5 more ... \| "separator">`
* `as?: any`
The element or component this component should render as when not a link. Defaults to `'button'`.
* `to?: string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric`
Route Location the link should navigate to when clicked on.
* `type?: "reset" \| "submit" \| "button"`
The type of the button when not a link. Defaults to `'button'`.
* `disabled?: boolean`
* `active?: boolean`
Force the link to be active independent of the current route.
* `target?: "_blank" \| "_parent" \| "_self" \| "_top" \| (string & {}) \| null`
Where to display the linked URL, as the name for a browsing context. | | `separatorIcon` | `appConfig.ui.icons.chevronRight` | `string`
The icon to use as a separator. | | `labelKey` | `'label'` | `string`
The key used to get the label from the item. | | `ui` | | `{ root?: ClassNameValue; list?: ClassNameValue; item?: ClassNameValue; link?: ClassNameValue; linkLeadingIcon?: ClassNameValue; ... 4 more ...; separatorIcon?: ClassNameValue; }` | ### [Slots](https://ui.nuxt.com/components/breadcrumb#slots) | Slot | Type | | --- | --- | | `item` | `{ item: BreadcrumbItem; index: number; active?: boolean \| undefined; }` | | `item-leading` | `{ item: BreadcrumbItem; index: number; active?: boolean \| undefined; }` | | `item-label` | `{ item: BreadcrumbItem; index: number; active?: boolean \| undefined; }` | | `item-trailing` | `{ item: BreadcrumbItem; index: number; active?: boolean \| undefined; }` | | `separator` | `any` | [Theme](https://ui.nuxt.com/components/breadcrumb#theme) --------------------------------------------------------- app.config.ts `export default defineAppConfig({ ui: { breadcrumb: { slots: { root: 'relative min-w-0', list: 'flex items-center gap-1.5', item: 'flex min-w-0', link: 'group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary', linkLeadingIcon: 'shrink-0 size-5', linkLeadingAvatar: 'shrink-0', linkLeadingAvatarSize: '2xs', linkLabel: 'truncate', separator: 'flex', separatorIcon: 'shrink-0 size-5 text-muted' }, variants: { active: { true: { link: 'text-primary font-semibold' }, false: { link: 'text-muted font-medium' } }, disabled: { true: { link: 'cursor-not-allowed opacity-75' } }, to: { true: '' } }, compoundVariants: [ { disabled: false, active: false, to: true, class: { link: [ 'hover:text-default', 'transition-colors' ] } } ] } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ ui: { breadcrumb: { slots: { root: 'relative min-w-0', list: 'flex items-center gap-1.5', item: 'flex min-w-0', link: 'group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary', linkLeadingIcon: 'shrink-0 size-5', linkLeadingAvatar: 'shrink-0', linkLeadingAvatarSize: '2xs', linkLabel: 'truncate', separator: 'flex', separatorIcon: 'shrink-0 size-5 text-muted' }, variants: { active: { true: { link: 'text-primary font-semibold' }, false: { link: 'text-muted font-medium' } }, disabled: { true: { link: 'cursor-not-allowed opacity-75' } }, to: { true: '' } }, compoundVariants: [ { disabled: false, active: false, to: true, class: { link: [ 'hover:text-default', 'transition-colors' ] } } ] } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ ui: { breadcrumb: { slots: { root: 'relative min-w-0', list: 'flex items-center gap-1.5', item: 'flex min-w-0', link: 'group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-primary', linkLeadingIcon: 'shrink-0 size-5', linkLeadingAvatar: 'shrink-0', linkLeadingAvatarSize: '2xs', linkLabel: 'truncate', separator: 'flex', separatorIcon: 'shrink-0 size-5 text-muted' }, variants: { active: { true: { link: 'text-primary font-semibold' }, false: { link: 'text-muted font-medium' } }, disabled: { true: { link: 'cursor-not-allowed opacity-75' } }, to: { true: '' } }, compoundVariants: [ { disabled: false, active: false, to: true, class: { link: [ 'hover:text-default', 'transition-colors' ] } } ] } } }) ] })` Expand code [Badge\ \ A short text to represent a status or a category.](https://ui.nuxt.com/components/badge) [Button\ \ A button element that can act as a link or trigger an action.](https://ui.nuxt.com/components/button) --- # Vue ButtonGroup Component - Nuxt UI ButtonGroup =========== [GitHub](https://github.com/nuxt/ui/tree/v3/src/runtime/components/ButtonGroup.vue) Group multiple button-like elements together. [Usage](https://ui.nuxt.com/components/button-group#usage) ----------------------------------------------------------- Wrap multiple [Button](https://ui.nuxt.com/components/button) within a ButtonGroup to group them together. Button `
The element or component this component should render as. | | `size` | `'md'` | `"md" \| "xs" \| "sm" \| "lg" \| "xl"` | | `orientation` | `'horizontal'` | `"horizontal" \| "vertical"`
The orientation the buttons are laid out. | | `ui` | | `{}` | ### [Slots](https://ui.nuxt.com/components/button-group#slots) | Slot | Type | | --- | --- | | `default` | `{}` | [Theme](https://ui.nuxt.com/components/button-group#theme) ----------------------------------------------------------- app.config.ts `export default defineAppConfig({ ui: { buttonGroup: { base: 'relative', variants: { size: { xs: '', sm: '', md: '', lg: '', xl: '' }, orientation: { horizontal: 'inline-flex -space-x-px', vertical: 'flex flex-col -space-y-px' } } } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ ui: { buttonGroup: { base: 'relative', variants: { size: { xs: '', sm: '', md: '', lg: '', xl: '' }, orientation: { horizontal: 'inline-flex -space-x-px', vertical: 'flex flex-col -space-y-px' } } } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ ui: { buttonGroup: { base: 'relative', variants: { size: { xs: '', sm: '', md: '', lg: '', xl: '' }, orientation: { horizontal: 'inline-flex -space-x-px', vertical: 'flex flex-col -space-y-px' } } } } }) ] })` Expand code [Button\ \ A button element that can act as a link or trigger an action.](https://ui.nuxt.com/components/button) [Calendar\ \ A calendar component for selecting single dates, multiple dates or date ranges.](https://ui.nuxt.com/components/calendar) --- # Vue Badge Component - Nuxt UI Badge ===== [GitHub](https://github.com/nuxt/ui/tree/v3/src/runtime/components/Badge.vue) A short text to represent a status or a category. [Usage](https://ui.nuxt.com/components/badge#usage) ---------------------------------------------------- ### [Label](https://ui.nuxt.com/components/badge#label) Use the default slot to set the label of the Badge. Badge `
The element or component this component should render as. | | `label` | | `string \| number` | | `color` | `'primary'` | `"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"` | | `variant` | `'solid'` | `"solid" \| "outline" \| "soft" \| "subtle"` | | `size` | `'md'` | `"md" \| "xs" \| "sm" \| "lg" \| "xl"` | | `square` | | `boolean`
Render the badge with equal padding on all sides. | | `icon` | | `string`
Display an icon based on the `leading` and `trailing` props. | | `avatar` | | `AvatarProps`
Display an avatar on the left side.
Show properties
* `as?: any`
The element or component this component should render as. Defaults to `'span'`.
* `src?: string`
* `alt?: string`
* `icon?: string`
* `text?: string`
* `size?: "md" \| "3xs" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`
Defaults to `'md'`.
* `chip?: boolean \| ChipProps`
* `class?: any`
* `style?: any`
* `ui?: { root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; }` | | `leading` | | `boolean`
When `true`, the icon will be displayed on the left side. | | `leadingIcon` | | `string`
Display an icon on the left side. | | `trailing` | | `boolean`
When `true`, the icon will be displayed on the right side. | | `trailingIcon` | | `string`
Display an icon on the right side. | | `ui` | | `{ base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }` | ### [Slots](https://ui.nuxt.com/components/badge#slots) | Slot | Type | | --- | --- | | `leading` | `{}` | | `default` | `{}` | | `trailing` | `{}` | [Theme](https://ui.nuxt.com/components/badge#theme) ---------------------------------------------------- app.config.ts `export default defineAppConfig({ ui: { badge: { slots: { base: 'font-medium inline-flex items-center', label: 'truncate', leadingIcon: 'shrink-0', leadingAvatar: 'shrink-0', leadingAvatarSize: '', trailingIcon: 'shrink-0' }, variants: { buttonGroup: { horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]', vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]' }, color: { primary: '', secondary: '', success: '', info: '', warning: '', error: '', neutral: '' }, variant: { solid: '', outline: '', soft: '', subtle: '' }, size: { xs: { base: 'text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm', leadingIcon: 'size-3', leadingAvatarSize: '3xs', trailingIcon: 'size-3' }, sm: { base: 'text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm', leadingIcon: 'size-3', leadingAvatarSize: '3xs', trailingIcon: 'size-3' }, md: { base: 'text-xs px-2 py-1 gap-1 rounded-md', leadingIcon: 'size-4', leadingAvatarSize: '3xs', trailingIcon: 'size-4' }, lg: { base: 'text-sm px-2 py-1 gap-1.5 rounded-md', leadingIcon: 'size-5', leadingAvatarSize: '2xs', trailingIcon: 'size-5' }, xl: { base: 'text-base px-2.5 py-1 gap-1.5 rounded-md', leadingIcon: 'size-6', leadingAvatarSize: '2xs', trailingIcon: 'size-6' } }, square: { true: '' } }, compoundVariants: [ { color: 'primary', variant: 'solid', class: 'bg-primary text-inverted' }, { color: 'primary', variant: 'outline', class: 'text-primary ring ring-inset ring-primary/50' }, { color: 'primary', variant: 'soft', class: 'bg-primary/10 text-primary' }, { color: 'primary', variant: 'subtle', class: 'bg-primary/10 text-primary ring ring-inset ring-primary/25' }, { color: 'neutral', variant: 'solid', class: 'text-inverted bg-inverted' }, { color: 'neutral', variant: 'outline', class: 'ring ring-inset ring-accented text-default bg-default' }, { color: 'neutral', variant: 'soft', class: 'text-default bg-elevated' }, { color: 'neutral', variant: 'subtle', class: 'ring ring-inset ring-accented text-default bg-elevated' }, { size: 'xs', square: true, class: 'p-0.5' }, { size: 'sm', square: true, class: 'p-1' }, { size: 'md', square: true, class: 'p-1' }, { size: 'lg', square: true, class: 'p-1' }, { size: 'xl', square: true, class: 'p-1' } ], defaultVariants: { color: 'primary', variant: 'solid', size: 'md' } } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ ui: { badge: { slots: { base: 'font-medium inline-flex items-center', label: 'truncate', leadingIcon: 'shrink-0', leadingAvatar: 'shrink-0', leadingAvatarSize: '', trailingIcon: 'shrink-0' }, variants: { buttonGroup: { horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]', vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]' }, color: { primary: '', secondary: '', success: '', info: '', warning: '', error: '', neutral: '' }, variant: { solid: '', outline: '', soft: '', subtle: '' }, size: { xs: { base: 'text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm', leadingIcon: 'size-3', leadingAvatarSize: '3xs', trailingIcon: 'size-3' }, sm: { base: 'text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm', leadingIcon: 'size-3', leadingAvatarSize: '3xs', trailingIcon: 'size-3' }, md: { base: 'text-xs px-2 py-1 gap-1 rounded-md', leadingIcon: 'size-4', leadingAvatarSize: '3xs', trailingIcon: 'size-4' }, lg: { base: 'text-sm px-2 py-1 gap-1.5 rounded-md', leadingIcon: 'size-5', leadingAvatarSize: '2xs', trailingIcon: 'size-5' }, xl: { base: 'text-base px-2.5 py-1 gap-1.5 rounded-md', leadingIcon: 'size-6', leadingAvatarSize: '2xs', trailingIcon: 'size-6' } }, square: { true: '' } }, compoundVariants: [ { color: 'primary', variant: 'solid', class: 'bg-primary text-inverted' }, { color: 'primary', variant: 'outline', class: 'text-primary ring ring-inset ring-primary/50' }, { color: 'primary', variant: 'soft', class: 'bg-primary/10 text-primary' }, { color: 'primary', variant: 'subtle', class: 'bg-primary/10 text-primary ring ring-inset ring-primary/25' }, { color: 'neutral', variant: 'solid', class: 'text-inverted bg-inverted' }, { color: 'neutral', variant: 'outline', class: 'ring ring-inset ring-accented text-default bg-default' }, { color: 'neutral', variant: 'soft', class: 'text-default bg-elevated' }, { color: 'neutral', variant: 'subtle', class: 'ring ring-inset ring-accented text-default bg-elevated' }, { size: 'xs', square: true, class: 'p-0.5' }, { size: 'sm', square: true, class: 'p-1' }, { size: 'md', square: true, class: 'p-1' }, { size: 'lg', square: true, class: 'p-1' }, { size: 'xl', square: true, class: 'p-1' } ], defaultVariants: { color: 'primary', variant: 'solid', size: 'md' } } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ ui: { badge: { slots: { base: 'font-medium inline-flex items-center', label: 'truncate', leadingIcon: 'shrink-0', leadingAvatar: 'shrink-0', leadingAvatarSize: '', trailingIcon: 'shrink-0' }, variants: { buttonGroup: { horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]', vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]' }, color: { primary: '', secondary: '', success: '', info: '', warning: '', error: '', neutral: '' }, variant: { solid: '', outline: '', soft: '', subtle: '' }, size: { xs: { base: 'text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm', leadingIcon: 'size-3', leadingAvatarSize: '3xs', trailingIcon: 'size-3' }, sm: { base: 'text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm', leadingIcon: 'size-3', leadingAvatarSize: '3xs', trailingIcon: 'size-3' }, md: { base: 'text-xs px-2 py-1 gap-1 rounded-md', leadingIcon: 'size-4', leadingAvatarSize: '3xs', trailingIcon: 'size-4' }, lg: { base: 'text-sm px-2 py-1 gap-1.5 rounded-md', leadingIcon: 'size-5', leadingAvatarSize: '2xs', trailingIcon: 'size-5' }, xl: { base: 'text-base px-2.5 py-1 gap-1.5 rounded-md', leadingIcon: 'size-6', leadingAvatarSize: '2xs', trailingIcon: 'size-6' } }, square: { true: '' } }, compoundVariants: [ { color: 'primary', variant: 'solid', class: 'bg-primary text-inverted' }, { color: 'primary', variant: 'outline', class: 'text-primary ring ring-inset ring-primary/50' }, { color: 'primary', variant: 'soft', class: 'bg-primary/10 text-primary' }, { color: 'primary', variant: 'subtle', class: 'bg-primary/10 text-primary ring ring-inset ring-primary/25' }, { color: 'neutral', variant: 'solid', class: 'text-inverted bg-inverted' }, { color: 'neutral', variant: 'outline', class: 'ring ring-inset ring-accented text-default bg-default' }, { color: 'neutral', variant: 'soft', class: 'text-default bg-elevated' }, { color: 'neutral', variant: 'subtle', class: 'ring ring-inset ring-accented text-default bg-elevated' }, { size: 'xs', square: true, class: 'p-0.5' }, { size: 'sm', square: true, class: 'p-1' }, { size: 'md', square: true, class: 'p-1' }, { size: 'lg', square: true, class: 'p-1' }, { size: 'xl', square: true, class: 'p-1' } ], defaultVariants: { color: 'primary', variant: 'solid', size: 'md' } } } }) ] })` Expand code [](https://github.com/nuxt/ui/blob/v3/src/theme/badge.ts "Compound variants") Some colors in `compoundVariants` are omitted for readability. Check out the source code on GitHub. [AvatarGroup\ \ Stack multiple avatars in a group.](https://ui.nuxt.com/components/avatar-group) [Breadcrumb\ \ A hierarchy of links to navigate through a website.](https://ui.nuxt.com/components/breadcrumb) --- # Vue Card Component - Nuxt UI Card ==== [GitHub](https://github.com/nuxt/ui/tree/v3/src/runtime/components/Card.vue) Display content in a card with a header, body and footer. [Usage](https://ui.nuxt.com/components/card#usage) --------------------------------------------------- `
The element or component this component should render as. | | `variant` | `'outline'` | `"solid" \| "outline" \| "soft" \| "subtle"` | | `ui` | | `{ root?: ClassNameValue; header?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; }` | ### [Slots](https://ui.nuxt.com/components/card#slots) | Slot | Type | | --- | --- | | `header` | `{}` | | `default` | `{}` | | `footer` | `{}` | [Theme](https://ui.nuxt.com/components/card#theme) --------------------------------------------------- app.config.ts `export default defineAppConfig({ ui: { card: { slots: { root: 'rounded-lg', header: 'p-4 sm:px-6', body: 'p-4 sm:p-6', footer: 'p-4 sm:px-6' }, variants: { variant: { solid: { root: 'bg-inverted text-inverted' }, outline: { root: 'bg-default ring ring-default divide-y divide-default' }, soft: { root: 'bg-elevated/50 divide-y divide-default' }, subtle: { root: 'bg-elevated/50 ring ring-default divide-y divide-default' } } }, defaultVariants: { variant: 'outline' } } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ ui: { card: { slots: { root: 'rounded-lg', header: 'p-4 sm:px-6', body: 'p-4 sm:p-6', footer: 'p-4 sm:px-6' }, variants: { variant: { solid: { root: 'bg-inverted text-inverted' }, outline: { root: 'bg-default ring ring-default divide-y divide-default' }, soft: { root: 'bg-elevated/50 divide-y divide-default' }, subtle: { root: 'bg-elevated/50 ring ring-default divide-y divide-default' } } }, defaultVariants: { variant: 'outline' } } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ ui: { card: { slots: { root: 'rounded-lg', header: 'p-4 sm:px-6', body: 'p-4 sm:p-6', footer: 'p-4 sm:px-6' }, variants: { variant: { solid: { root: 'bg-inverted text-inverted' }, outline: { root: 'bg-default ring ring-default divide-y divide-default' }, soft: { root: 'bg-elevated/50 divide-y divide-default' }, subtle: { root: 'bg-elevated/50 ring ring-default divide-y divide-default' } } }, defaultVariants: { variant: 'outline' } } } }) ] })` Expand code [Calendar\ \ A calendar component for selecting single dates, multiple dates or date ranges.](https://ui.nuxt.com/components/calendar) [Carousel\ \ A carousel with motion and swipe built using Embla.](https://ui.nuxt.com/components/carousel) --- # Vue Button Component - Nuxt UI Button ====== [GitHub](https://github.com/nuxt/ui/tree/v3/src/runtime/components/Button.vue) A button element that can act as a link or trigger an action. [Usage](https://ui.nuxt.com/components/button#usage) ----------------------------------------------------- ### [Label](https://ui.nuxt.com/components/button#label) Use the default slot to set the label of the Button. Button `
The element or component this component should render as when not a link. | | `label` | | `string` | | `color` | `'primary'` | `"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"` | | `activeColor` | | `"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"` | | `variant` | `'solid'` | `"link" \| "solid" \| "outline" \| "soft" \| "subtle" \| "ghost"` | | `activeVariant` | | `"link" \| "solid" \| "outline" \| "soft" \| "subtle" \| "ghost"` | | `size` | `'md'` | `"md" \| "xs" \| "sm" \| "lg" \| "xl"` | | `square` | | `boolean`
Render the button with equal padding on all sides. | | `block` | | `boolean`
Render the button full width. | | `loadingAuto` | | `boolean`
Set loading state automatically based on the `@click` promise state | | `icon` | | `string`
Display an icon based on the `leading` and `trailing` props. | | `avatar` | | `AvatarProps`
Display an avatar on the left side.
Show properties
* `as?: any`
The element or component this component should render as. Defaults to `'span'`.
* `src?: string`
* `alt?: string`
* `icon?: string`
* `text?: string`
* `size?: "2xs" \| "md" \| "3xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`
Defaults to `'md'`.
* `chip?: boolean \| ChipProps`
* `class?: any`
* `style?: any`
* `ui?: { root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; }` | | `leading` | | `boolean`
When `true`, the icon will be displayed on the left side. | | `leadingIcon` | | `string`
Display an icon on the left side. | | `trailing` | | `boolean`
When `true`, the icon will be displayed on the right side. | | `trailingIcon` | | `string`
Display an icon on the right side. | | `loading` | | `boolean`
When `true`, the loading icon will be displayed. | | `loadingIcon` | `appConfig.ui.icons.loading` | `string`
The icon when the `loading` prop is `true`. | | `to` | | `string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric`
Route Location the link should navigate to when clicked on.
Show properties
* `name?: RouteRecordNameGeneric`
* `params?: RouteParamsRawGeneric`
* `path?: undefined`
A relative path to the current location. This property should be removed
* `query?: LocationQueryRaw`
* `hash?: string`
* `force?: boolean`
Triggers the navigation even if the location is the same as the current one. Note this will also add a new entry to the history unless `replace: true` is passed.
* `state?: HistoryState`
State to save using the History API. This cannot contain any reactive values and some primitives like Symbols are forbidden. More info at [https://developer.mozilla.org/en-US/docs/Web/API/History/state](https://developer.mozilla.org/en-US/docs/Web/API/History/state)
* `path: string`
A relative path to the current location. This property should be removed
* `query?: LocationQueryRaw`
* `hash?: string`
* `force?: boolean`
Triggers the navigation even if the location is the same as the current one. Note this will also add a new entry to the history unless `replace: true` is passed.
* `state?: HistoryState`
State to save using the History API. This cannot contain any reactive values and some primitives like Symbols are forbidden. More info at [https://developer.mozilla.org/en-US/docs/Web/API/History/state](https://developer.mozilla.org/en-US/docs/Web/API/History/state) | | `type` | `'button'` | `"reset" \| "submit" \| "button"`
The type of the button when not a link. | | `disabled` | | `boolean` | | `active` | `undefined` | `boolean`
Force the link to be active independent of the current route. | | `target` | | `null \| "_blank" \| "_parent" \| "_self" \| "_top" \| string & {}`
Where to display the linked URL, as the name for a browsing context. | | `ui` | | `{ base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }` | [](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Link.vue#L13) The `Button` component extends the `Link` component. Check out the source code on GitHub. ### [Slots](https://ui.nuxt.com/components/button#slots) | Slot | Type | | --- | --- | | `leading` | `{}` | | `default` | `{}` | | `trailing` | `{}` | [Theme](https://ui.nuxt.com/components/button#theme) ----------------------------------------------------- app.config.ts `export default defineAppConfig({ ui: { button: { slots: { base: [ 'rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75', 'transition-colors' ], label: 'truncate', leadingIcon: 'shrink-0', leadingAvatar: 'shrink-0', leadingAvatarSize: '', trailingIcon: 'shrink-0' }, variants: { buttonGroup: { horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]', vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]' }, color: { primary: '', secondary: '', success: '', info: '', warning: '', error: '', neutral: '' }, variant: { solid: '', outline: '', soft: '', subtle: '', ghost: '', link: '' }, size: { xs: { base: 'px-2 py-1 text-xs gap-1', leadingIcon: 'size-4', leadingAvatarSize: '3xs', trailingIcon: 'size-4' }, sm: { base: 'px-2.5 py-1.5 text-xs gap-1.5', leadingIcon: 'size-4', leadingAvatarSize: '3xs', trailingIcon: 'size-4' }, md: { base: 'px-2.5 py-1.5 text-sm gap-1.5', leadingIcon: 'size-5', leadingAvatarSize: '2xs', trailingIcon: 'size-5' }, lg: { base: 'px-3 py-2 text-sm gap-2', leadingIcon: 'size-5', leadingAvatarSize: '2xs', trailingIcon: 'size-5' }, xl: { base: 'px-3 py-2 text-base gap-2', leadingIcon: 'size-6', leadingAvatarSize: 'xs', trailingIcon: 'size-6' } }, block: { true: { base: 'w-full justify-center', trailingIcon: 'ms-auto' } }, square: { true: '' }, leading: { true: '' }, trailing: { true: '' }, loading: { true: '' }, active: { true: { base: '' }, false: { base: '' } } }, compoundVariants: [ { color: 'primary', variant: 'solid', class: 'text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary' }, { color: 'primary', variant: 'outline', class: 'ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary' }, { color: 'primary', variant: 'soft', class: 'text-primary bg-primary/10 hover:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10' }, { color: 'primary', variant: 'subtle', class: 'text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary' }, { color: 'primary', variant: 'ghost', class: 'text-primary hover:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent' }, { color: 'primary', variant: 'link', class: 'text-primary hover:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary' }, { color: 'neutral', variant: 'solid', class: 'text-inverted bg-inverted hover:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted' }, { color: 'neutral', variant: 'outline', class: 'ring ring-inset ring-accented text-default bg-default hover:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted' }, { color: 'neutral', variant: 'soft', class: 'text-default bg-elevated hover:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated' }, { color: 'neutral', variant: 'subtle', class: 'ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted' }, { color: 'neutral', variant: 'ghost', class: 'text-default hover:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent' }, { color: 'neutral', variant: 'link', class: 'text-muted hover:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted' }, { size: 'xs', square: true, class: 'p-1' }, { size: 'sm', square: true, class: 'p-1.5' }, { size: 'md', square: true, class: 'p-1.5' }, { size: 'lg', square: true, class: 'p-2' }, { size: 'xl', square: true, class: 'p-2' }, { loading: true, leading: true, class: { leadingIcon: 'animate-spin' } }, { loading: true, leading: false, trailing: true, class: { trailingIcon: 'animate-spin' } } ], defaultVariants: { color: 'primary', variant: 'solid', size: 'md' } } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ ui: { button: { slots: { base: [ 'rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75', 'transition-colors' ], label: 'truncate', leadingIcon: 'shrink-0', leadingAvatar: 'shrink-0', leadingAvatarSize: '', trailingIcon: 'shrink-0' }, variants: { buttonGroup: { horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]', vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]' }, color: { primary: '', secondary: '', success: '', info: '', warning: '', error: '', neutral: '' }, variant: { solid: '', outline: '', soft: '', subtle: '', ghost: '', link: '' }, size: { xs: { base: 'px-2 py-1 text-xs gap-1', leadingIcon: 'size-4', leadingAvatarSize: '3xs', trailingIcon: 'size-4' }, sm: { base: 'px-2.5 py-1.5 text-xs gap-1.5', leadingIcon: 'size-4', leadingAvatarSize: '3xs', trailingIcon: 'size-4' }, md: { base: 'px-2.5 py-1.5 text-sm gap-1.5', leadingIcon: 'size-5', leadingAvatarSize: '2xs', trailingIcon: 'size-5' }, lg: { base: 'px-3 py-2 text-sm gap-2', leadingIcon: 'size-5', leadingAvatarSize: '2xs', trailingIcon: 'size-5' }, xl: { base: 'px-3 py-2 text-base gap-2', leadingIcon: 'size-6', leadingAvatarSize: 'xs', trailingIcon: 'size-6' } }, block: { true: { base: 'w-full justify-center', trailingIcon: 'ms-auto' } }, square: { true: '' }, leading: { true: '' }, trailing: { true: '' }, loading: { true: '' }, active: { true: { base: '' }, false: { base: '' } } }, compoundVariants: [ { color: 'primary', variant: 'solid', class: 'text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary' }, { color: 'primary', variant: 'outline', class: 'ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary' }, { color: 'primary', variant: 'soft', class: 'text-primary bg-primary/10 hover:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10' }, { color: 'primary', variant: 'subtle', class: 'text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary' }, { color: 'primary', variant: 'ghost', class: 'text-primary hover:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent' }, { color: 'primary', variant: 'link', class: 'text-primary hover:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary' }, { color: 'neutral', variant: 'solid', class: 'text-inverted bg-inverted hover:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted' }, { color: 'neutral', variant: 'outline', class: 'ring ring-inset ring-accented text-default bg-default hover:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted' }, { color: 'neutral', variant: 'soft', class: 'text-default bg-elevated hover:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated' }, { color: 'neutral', variant: 'subtle', class: 'ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted' }, { color: 'neutral', variant: 'ghost', class: 'text-default hover:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent' }, { color: 'neutral', variant: 'link', class: 'text-muted hover:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted' }, { size: 'xs', square: true, class: 'p-1' }, { size: 'sm', square: true, class: 'p-1.5' }, { size: 'md', square: true, class: 'p-1.5' }, { size: 'lg', square: true, class: 'p-2' }, { size: 'xl', square: true, class: 'p-2' }, { loading: true, leading: true, class: { leadingIcon: 'animate-spin' } }, { loading: true, leading: false, trailing: true, class: { trailingIcon: 'animate-spin' } } ], defaultVariants: { color: 'primary', variant: 'solid', size: 'md' } } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ ui: { button: { slots: { base: [ 'rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75', 'transition-colors' ], label: 'truncate', leadingIcon: 'shrink-0', leadingAvatar: 'shrink-0', leadingAvatarSize: '', trailingIcon: 'shrink-0' }, variants: { buttonGroup: { horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]', vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]' }, color: { primary: '', secondary: '', success: '', info: '', warning: '', error: '', neutral: '' }, variant: { solid: '', outline: '', soft: '', subtle: '', ghost: '', link: '' }, size: { xs: { base: 'px-2 py-1 text-xs gap-1', leadingIcon: 'size-4', leadingAvatarSize: '3xs', trailingIcon: 'size-4' }, sm: { base: 'px-2.5 py-1.5 text-xs gap-1.5', leadingIcon: 'size-4', leadingAvatarSize: '3xs', trailingIcon: 'size-4' }, md: { base: 'px-2.5 py-1.5 text-sm gap-1.5', leadingIcon: 'size-5', leadingAvatarSize: '2xs', trailingIcon: 'size-5' }, lg: { base: 'px-3 py-2 text-sm gap-2', leadingIcon: 'size-5', leadingAvatarSize: '2xs', trailingIcon: 'size-5' }, xl: { base: 'px-3 py-2 text-base gap-2', leadingIcon: 'size-6', leadingAvatarSize: 'xs', trailingIcon: 'size-6' } }, block: { true: { base: 'w-full justify-center', trailingIcon: 'ms-auto' } }, square: { true: '' }, leading: { true: '' }, trailing: { true: '' }, loading: { true: '' }, active: { true: { base: '' }, false: { base: '' } } }, compoundVariants: [ { color: 'primary', variant: 'solid', class: 'text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary' }, { color: 'primary', variant: 'outline', class: 'ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary' }, { color: 'primary', variant: 'soft', class: 'text-primary bg-primary/10 hover:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10' }, { color: 'primary', variant: 'subtle', class: 'text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary' }, { color: 'primary', variant: 'ghost', class: 'text-primary hover:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent' }, { color: 'primary', variant: 'link', class: 'text-primary hover:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary' }, { color: 'neutral', variant: 'solid', class: 'text-inverted bg-inverted hover:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted' }, { color: 'neutral', variant: 'outline', class: 'ring ring-inset ring-accented text-default bg-default hover:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted' }, { color: 'neutral', variant: 'soft', class: 'text-default bg-elevated hover:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated' }, { color: 'neutral', variant: 'subtle', class: 'ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted' }, { color: 'neutral', variant: 'ghost', class: 'text-default hover:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent' }, { color: 'neutral', variant: 'link', class: 'text-muted hover:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted' }, { size: 'xs', square: true, class: 'p-1' }, { size: 'sm', square: true, class: 'p-1.5' }, { size: 'md', square: true, class: 'p-1.5' }, { size: 'lg', square: true, class: 'p-2' }, { size: 'xl', square: true, class: 'p-2' }, { loading: true, leading: true, class: { leadingIcon: 'animate-spin' } }, { loading: true, leading: false, trailing: true, class: { trailingIcon: 'animate-spin' } } ], defaultVariants: { color: 'primary', variant: 'solid', size: 'md' } } } }) ] })` Expand code [](https://github.com/nuxt/ui/blob/v3/src/theme/button.ts "Compound variants") Some colors in `compoundVariants` are omitted for readability. Check out the source code on GitHub. [Breadcrumb\ \ A hierarchy of links to navigate through a website.](https://ui.nuxt.com/components/breadcrumb) [ButtonGroup\ \ Group multiple button-like elements together.](https://ui.nuxt.com/components/button-group) --- # Vue Checkbox Component - Nuxt UI Checkbox ======== [Checkbox](https://reka-ui.com/docs/components/checkbox) [GitHub](https://github.com/nuxt/ui/tree/v3/src/runtime/components/Checkbox.vue) An input element to toggle between checked and unchecked states. [Usage](https://ui.nuxt.com/components/checkbox#usage) ------------------------------------------------------- Use the `v-model` directive to control the checked state of the Checkbox. `
The element or component this component should render as. | | `label` | | `string` | | `description` | | `string` | | `color` | `'primary'` | `"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"` | | `variant` | `'list'` | `"card" \| "list"` | | `size` | `'md'` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | | `indicator` | `'start'` | `"start" \| "end" \| "hidden"`
Position of the indicator. | | `icon` | `appConfig.ui.icons.check` | `string`
The icon displayed when checked. | | `indeterminateIcon` | `appConfig.ui.icons.minus` | `string`
The icon displayed when the checkbox is indeterminate. | | `disabled` | | `boolean`
When `true`, prevents the user from interacting with the checkbox | | `value` | `"on"` | `null \| string \| number \| bigint \| Record
The value given as data when submitted with a `name`. | | `name` | | `string`
The name of the field. Submitted with its owning form as part of a name/value pair. | | `required` | | `boolean`
When `true`, indicates that the user must set the value before the owning form can be submitted. | | `id` | | `string`
Id of the element | | `defaultValue` | | `boolean \| "indeterminate"`
The value of the checkbox when it is initially rendered. Use when you do not need to control its value. | | `modelValue` | `undefined` | `boolean \| "indeterminate"` | | `ui` | | `{ root?: ClassNameValue; container?: ClassNameValue; base?: ClassNameValue; indicator?: ClassNameValue; icon?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; }` | ### [Slots](https://ui.nuxt.com/components/checkbox#slots) | Slot | Type | | --- | --- | | `label` | `{ label?: string \| undefined; }` | | `description` | `{ description?: string \| undefined; }` | ### [Emits](https://ui.nuxt.com/components/checkbox#emits) | Event | Type | | --- | --- | | `change` | `[payload: Event]` | | `update:modelValue` | `[value: boolean \| "indeterminate"]` | [Theme](https://ui.nuxt.com/components/checkbox#theme) ------------------------------------------------------- app.config.ts `export default defineAppConfig({ ui: { checkbox: { slots: { root: 'relative flex items-start', container: 'flex items-center', base: 'rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2', indicator: 'flex items-center justify-center size-full text-inverted', icon: 'shrink-0 size-full', wrapper: 'w-full', label: 'block font-medium text-default', description: 'text-muted' }, variants: { color: { primary: { base: 'focus-visible:outline-primary', indicator: 'bg-primary' }, secondary: { base: 'focus-visible:outline-secondary', indicator: 'bg-secondary' }, success: { base: 'focus-visible:outline-success', indicator: 'bg-success' }, info: { base: 'focus-visible:outline-info', indicator: 'bg-info' }, warning: { base: 'focus-visible:outline-warning', indicator: 'bg-warning' }, error: { base: 'focus-visible:outline-error', indicator: 'bg-error' }, neutral: { base: 'focus-visible:outline-inverted', indicator: 'bg-inverted' } }, variant: { list: { root: '' }, card: { root: 'border border-muted rounded-lg' } }, indicator: { start: { root: 'flex-row', wrapper: 'ms-2' }, end: { root: 'flex-row-reverse', wrapper: 'me-2' }, hidden: { base: 'sr-only', wrapper: 'text-center' } }, size: { xs: { base: 'size-3', container: 'h-4', wrapper: 'text-xs' }, sm: { base: 'size-3.5', container: 'h-4', wrapper: 'text-xs' }, md: { base: 'size-4', container: 'h-5', wrapper: 'text-sm' }, lg: { base: 'size-4.5', container: 'h-5', wrapper: 'text-sm' }, xl: { base: 'size-5', container: 'h-6', wrapper: 'text-base' } }, required: { true: { label: "after:content-['*'] after:ms-0.5 after:text-error" } }, disabled: { true: { base: 'cursor-not-allowed opacity-75', label: 'cursor-not-allowed opacity-75', description: 'cursor-not-allowed opacity-75' } }, checked: { true: '' } }, compoundVariants: [ { size: 'xs', variant: 'card', class: { root: 'p-2.5' } }, { size: 'sm', variant: 'card', class: { root: 'p-3' } }, { size: 'md', variant: 'card', class: { root: 'p-3.5' } }, { size: 'lg', variant: 'card', class: { root: 'p-4' } }, { size: 'xl', variant: 'card', class: { root: 'p-4.5' } }, { color: 'primary', variant: 'card', class: { root: 'has-data-[state=checked]:border-primary' } }, { color: 'neutral', variant: 'card', class: { root: 'has-data-[state=checked]:border-inverted' } }, { variant: 'card', disabled: true, class: { root: 'cursor-not-allowed opacity-75' } } ], defaultVariants: { size: 'md', color: 'primary', variant: 'list', indicator: 'start' } } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ ui: { checkbox: { slots: { root: 'relative flex items-start', container: 'flex items-center', base: 'rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2', indicator: 'flex items-center justify-center size-full text-inverted', icon: 'shrink-0 size-full', wrapper: 'w-full', label: 'block font-medium text-default', description: 'text-muted' }, variants: { color: { primary: { base: 'focus-visible:outline-primary', indicator: 'bg-primary' }, secondary: { base: 'focus-visible:outline-secondary', indicator: 'bg-secondary' }, success: { base: 'focus-visible:outline-success', indicator: 'bg-success' }, info: { base: 'focus-visible:outline-info', indicator: 'bg-info' }, warning: { base: 'focus-visible:outline-warning', indicator: 'bg-warning' }, error: { base: 'focus-visible:outline-error', indicator: 'bg-error' }, neutral: { base: 'focus-visible:outline-inverted', indicator: 'bg-inverted' } }, variant: { list: { root: '' }, card: { root: 'border border-muted rounded-lg' } }, indicator: { start: { root: 'flex-row', wrapper: 'ms-2' }, end: { root: 'flex-row-reverse', wrapper: 'me-2' }, hidden: { base: 'sr-only', wrapper: 'text-center' } }, size: { xs: { base: 'size-3', container: 'h-4', wrapper: 'text-xs' }, sm: { base: 'size-3.5', container: 'h-4', wrapper: 'text-xs' }, md: { base: 'size-4', container: 'h-5', wrapper: 'text-sm' }, lg: { base: 'size-4.5', container: 'h-5', wrapper: 'text-sm' }, xl: { base: 'size-5', container: 'h-6', wrapper: 'text-base' } }, required: { true: { label: "after:content-['*'] after:ms-0.5 after:text-error" } }, disabled: { true: { base: 'cursor-not-allowed opacity-75', label: 'cursor-not-allowed opacity-75', description: 'cursor-not-allowed opacity-75' } }, checked: { true: '' } }, compoundVariants: [ { size: 'xs', variant: 'card', class: { root: 'p-2.5' } }, { size: 'sm', variant: 'card', class: { root: 'p-3' } }, { size: 'md', variant: 'card', class: { root: 'p-3.5' } }, { size: 'lg', variant: 'card', class: { root: 'p-4' } }, { size: 'xl', variant: 'card', class: { root: 'p-4.5' } }, { color: 'primary', variant: 'card', class: { root: 'has-data-[state=checked]:border-primary' } }, { color: 'neutral', variant: 'card', class: { root: 'has-data-[state=checked]:border-inverted' } }, { variant: 'card', disabled: true, class: { root: 'cursor-not-allowed opacity-75' } } ], defaultVariants: { size: 'md', color: 'primary', variant: 'list', indicator: 'start' } } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ ui: { checkbox: { slots: { root: 'relative flex items-start', container: 'flex items-center', base: 'rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2', indicator: 'flex items-center justify-center size-full text-inverted', icon: 'shrink-0 size-full', wrapper: 'w-full', label: 'block font-medium text-default', description: 'text-muted' }, variants: { color: { primary: { base: 'focus-visible:outline-primary', indicator: 'bg-primary' }, secondary: { base: 'focus-visible:outline-secondary', indicator: 'bg-secondary' }, success: { base: 'focus-visible:outline-success', indicator: 'bg-success' }, info: { base: 'focus-visible:outline-info', indicator: 'bg-info' }, warning: { base: 'focus-visible:outline-warning', indicator: 'bg-warning' }, error: { base: 'focus-visible:outline-error', indicator: 'bg-error' }, neutral: { base: 'focus-visible:outline-inverted', indicator: 'bg-inverted' } }, variant: { list: { root: '' }, card: { root: 'border border-muted rounded-lg' } }, indicator: { start: { root: 'flex-row', wrapper: 'ms-2' }, end: { root: 'flex-row-reverse', wrapper: 'me-2' }, hidden: { base: 'sr-only', wrapper: 'text-center' } }, size: { xs: { base: 'size-3', container: 'h-4', wrapper: 'text-xs' }, sm: { base: 'size-3.5', container: 'h-4', wrapper: 'text-xs' }, md: { base: 'size-4', container: 'h-5', wrapper: 'text-sm' }, lg: { base: 'size-4.5', container: 'h-5', wrapper: 'text-sm' }, xl: { base: 'size-5', container: 'h-6', wrapper: 'text-base' } }, required: { true: { label: "after:content-['*'] after:ms-0.5 after:text-error" } }, disabled: { true: { base: 'cursor-not-allowed opacity-75', label: 'cursor-not-allowed opacity-75', description: 'cursor-not-allowed opacity-75' } }, checked: { true: '' } }, compoundVariants: [ { size: 'xs', variant: 'card', class: { root: 'p-2.5' } }, { size: 'sm', variant: 'card', class: { root: 'p-3' } }, { size: 'md', variant: 'card', class: { root: 'p-3.5' } }, { size: 'lg', variant: 'card', class: { root: 'p-4' } }, { size: 'xl', variant: 'card', class: { root: 'p-4.5' } }, { color: 'primary', variant: 'card', class: { root: 'has-data-[state=checked]:border-primary' } }, { color: 'neutral', variant: 'card', class: { root: 'has-data-[state=checked]:border-inverted' } }, { variant: 'card', disabled: true, class: { root: 'cursor-not-allowed opacity-75' } } ], defaultVariants: { size: 'md', color: 'primary', variant: 'list', indicator: 'start' } } } }) ] })` Expand code [](https://github.com/nuxt/ui/blob/v3/src/theme/checkbox.ts "Compound variants") Some colors in `compoundVariants` are omitted for readability. Check out the source code on GitHub. [Carousel\ \ A carousel with motion and swipe built using Embla.](https://ui.nuxt.com/components/carousel) [CheckboxGroup\ \ A set of checklist buttons to select multiple option from a list.](https://ui.nuxt.com/components/checkbox-group) --- # Vue Chip Component - Nuxt UI Chip ==== [GitHub](https://github.com/nuxt/ui/tree/v3/src/runtime/components/Chip.vue) An indicator of a numeric value or a state. [Usage](https://ui.nuxt.com/components/chip#usage) --------------------------------------------------- Wrap any component with a Chip to display an indicator. `
The element or component this component should render as. | | `text` | | `string \| number`
Display some text inside the chip. | | `color` | `'primary'` | `"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"` | | `size` | `'md'` | `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "3xs" \| "2xs" \| "2xl" \| "3xl"` | | `position` | `'top-right'` | `"top-right" \| "bottom-right" \| "top-left" \| "bottom-left"`
The position of the chip. | | `inset` | `false` | `boolean`
When `true`, keep the chip inside the component for rounded elements. | | `standalone` | `false` | `boolean`
When `true`, render the chip relatively to the parent. | | `show` | `true` | `boolean` | | `ui` | | `{ root?: ClassNameValue; base?: ClassNameValue; }` | ### [Slots](https://ui.nuxt.com/components/chip#slots) | Slot | Type | | --- | --- | | `default` | `{}` | | `content` | `{}` | [Theme](https://ui.nuxt.com/components/chip#theme) --------------------------------------------------- app.config.ts `export default defineAppConfig({ ui: { chip: { slots: { root: 'relative inline-flex items-center justify-center shrink-0', base: 'rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap' }, variants: { color: { primary: 'bg-primary', secondary: 'bg-secondary', success: 'bg-success', info: 'bg-info', warning: 'bg-warning', error: 'bg-error', neutral: 'bg-inverted' }, size: { '3xs': 'h-[4px] min-w-[4px] text-[4px]', '2xs': 'h-[5px] min-w-[5px] text-[5px]', xs: 'h-[6px] min-w-[6px] text-[6px]', sm: 'h-[7px] min-w-[7px] text-[7px]', md: 'h-[8px] min-w-[8px] text-[8px]', lg: 'h-[9px] min-w-[9px] text-[9px]', xl: 'h-[10px] min-w-[10px] text-[10px]', '2xl': 'h-[11px] min-w-[11px] text-[11px]', '3xl': 'h-[12px] min-w-[12px] text-[12px]' }, position: { 'top-right': 'top-0 right-0', 'bottom-right': 'bottom-0 right-0', 'top-left': 'top-0 left-0', 'bottom-left': 'bottom-0 left-0' }, inset: { false: '' }, standalone: { false: 'absolute' } }, compoundVariants: [ { position: 'top-right', inset: false, class: '-translate-y-1/2 translate-x-1/2 transform' }, { position: 'bottom-right', inset: false, class: 'translate-y-1/2 translate-x-1/2 transform' }, { position: 'top-left', inset: false, class: '-translate-y-1/2 -translate-x-1/2 transform' }, { position: 'bottom-left', inset: false, class: 'translate-y-1/2 -translate-x-1/2 transform' } ], defaultVariants: { size: 'md', color: 'primary', position: 'top-right' } } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ ui: { chip: { slots: { root: 'relative inline-flex items-center justify-center shrink-0', base: 'rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap' }, variants: { color: { primary: 'bg-primary', secondary: 'bg-secondary', success: 'bg-success', info: 'bg-info', warning: 'bg-warning', error: 'bg-error', neutral: 'bg-inverted' }, size: { '3xs': 'h-[4px] min-w-[4px] text-[4px]', '2xs': 'h-[5px] min-w-[5px] text-[5px]', xs: 'h-[6px] min-w-[6px] text-[6px]', sm: 'h-[7px] min-w-[7px] text-[7px]', md: 'h-[8px] min-w-[8px] text-[8px]', lg: 'h-[9px] min-w-[9px] text-[9px]', xl: 'h-[10px] min-w-[10px] text-[10px]', '2xl': 'h-[11px] min-w-[11px] text-[11px]', '3xl': 'h-[12px] min-w-[12px] text-[12px]' }, position: { 'top-right': 'top-0 right-0', 'bottom-right': 'bottom-0 right-0', 'top-left': 'top-0 left-0', 'bottom-left': 'bottom-0 left-0' }, inset: { false: '' }, standalone: { false: 'absolute' } }, compoundVariants: [ { position: 'top-right', inset: false, class: '-translate-y-1/2 translate-x-1/2 transform' }, { position: 'bottom-right', inset: false, class: 'translate-y-1/2 translate-x-1/2 transform' }, { position: 'top-left', inset: false, class: '-translate-y-1/2 -translate-x-1/2 transform' }, { position: 'bottom-left', inset: false, class: 'translate-y-1/2 -translate-x-1/2 transform' } ], defaultVariants: { size: 'md', color: 'primary', position: 'top-right' } } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ ui: { chip: { slots: { root: 'relative inline-flex items-center justify-center shrink-0', base: 'rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap' }, variants: { color: { primary: 'bg-primary', secondary: 'bg-secondary', success: 'bg-success', info: 'bg-info', warning: 'bg-warning', error: 'bg-error', neutral: 'bg-inverted' }, size: { '3xs': 'h-[4px] min-w-[4px] text-[4px]', '2xs': 'h-[5px] min-w-[5px] text-[5px]', xs: 'h-[6px] min-w-[6px] text-[6px]', sm: 'h-[7px] min-w-[7px] text-[7px]', md: 'h-[8px] min-w-[8px] text-[8px]', lg: 'h-[9px] min-w-[9px] text-[9px]', xl: 'h-[10px] min-w-[10px] text-[10px]', '2xl': 'h-[11px] min-w-[11px] text-[11px]', '3xl': 'h-[12px] min-w-[12px] text-[12px]' }, position: { 'top-right': 'top-0 right-0', 'bottom-right': 'bottom-0 right-0', 'top-left': 'top-0 left-0', 'bottom-left': 'bottom-0 left-0' }, inset: { false: '' }, standalone: { false: 'absolute' } }, compoundVariants: [ { position: 'top-right', inset: false, class: '-translate-y-1/2 translate-x-1/2 transform' }, { position: 'bottom-right', inset: false, class: 'translate-y-1/2 translate-x-1/2 transform' }, { position: 'top-left', inset: false, class: '-translate-y-1/2 -translate-x-1/2 transform' }, { position: 'bottom-left', inset: false, class: 'translate-y-1/2 -translate-x-1/2 transform' } ], defaultVariants: { size: 'md', color: 'primary', position: 'top-right' } } } }) ] })` Expand code [CheckboxGroup\ \ A set of checklist buttons to select multiple option from a list.](https://ui.nuxt.com/components/checkbox-group) [Collapsible\ \ A collapsible element to toggle visibility of its content.](https://ui.nuxt.com/components/collapsible) --- # Vue Collapsible Component - Nuxt UI Collapsible =========== [Collapsible](https://reka-ui.com/docs/components/collapsible) [GitHub](https://github.com/nuxt/ui/tree/v3/src/runtime/components/Collapsible.vue) A collapsible element to toggle visibility of its content. [Usage](https://ui.nuxt.com/components/collapsible#usage) ---------------------------------------------------------- Use a [Button](https://ui.nuxt.com/components/button) or any other component in the default slot of the Collapsible. Then, use the `#content` slot to add the content displayed when the Collapsible is open. Open `
The element or component this component should render as. | | `disabled` | | `boolean`
When `true`, prevents the user from interacting with the collapsible. | | `defaultOpen` | | `boolean`
The open state of the collapsible when it is initially rendered.
Use when you do not need to control its open state. | | `open` | | `boolean`
The controlled open state of the collapsible. Can be binded with `v-model`. | | `unmountOnHide` | `true` | `boolean`
When `true`, the element will be unmounted on closed state. | | `ui` | | `{ root?: ClassNameValue; content?: ClassNameValue; }` | ### [Slots](https://ui.nuxt.com/components/collapsible#slots) | Slot | Type | | --- | --- | | `default` | `{ open: boolean; }` | | `content` | `{}` | ### [Emits](https://ui.nuxt.com/components/collapsible#emits) | Event | Type | | --- | --- | | `update:open` | `[value: boolean]` | [Theme](https://ui.nuxt.com/components/collapsible#theme) ---------------------------------------------------------- app.config.ts `export default defineAppConfig({ ui: { collapsible: { slots: { root: '', content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden' } } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ ui: { collapsible: { slots: { root: '', content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden' } } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ ui: { collapsible: { slots: { root: '', content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden' } } } }) ] })` Expand code [Chip\ \ An indicator of a numeric value or a state.](https://ui.nuxt.com/components/chip) [ColorPicker\ \ A component to select a color.](https://ui.nuxt.com/components/color-picker) --- # Migration - Nuxt UI Migration ========= A comprehensive guide to migrate your application from Nuxt UI v2 to Nuxt UI v3. Nuxt UI v3.0 is a new major version rebuilt from the ground up, introducing a modern architecture with significant performance improvements and an enhanced developer experience. This major release includes several breaking changes alongside powerful new features and capabilities: * **Tailwind CSS v4**: Migration from JavaScript to CSS-based configuration * **Reka UI**: Replacing Headless UI as the underlying component library * **Tailwind Variants**: New styling API for component variants This guide provides step by step instructions to migrate your application from v2 to v3. [Migrate your project](https://ui.nuxt.com/getting-started/migration#migrate-your-project) ------------------------------------------------------------------------------------------- ### [Update Tailwind CSS](https://ui.nuxt.com/getting-started/migration#update-tailwind-css) Tailwind CSS v4 introduces significant changes to its configuration approach. The official Tailwind upgrade tool will help automate most of the migration process. [](https://tailwindcss.com/docs/upgrade-guide#changes-from-v3) For a detailed walkthrough of all changes, refer to the official **Tailwind CSS v4 upgrade guide**. 1. Create a `main.css` file and import it in your `nuxt.config.ts` file: app/assets/css/main.cssnuxt.config.ts `@import "tailwindcss";` `export default defineNuxtConfig({ css: ['~/assets/css/main.css'] })` 2. Run the Tailwind CSS upgrade tool: `npx @tailwindcss/upgrade` ### [Update Nuxt UI](https://ui.nuxt.com/getting-started/migration#update-nuxt-ui) 3. Install the latest version of the package: pnpmyarnnpmbun `pnpm add @nuxt/ui` `yarn add @nuxt/ui` `npm install @nuxt/ui` `bun add @nuxt/ui` pnpmyarnnpmbun `pnpm add @nuxt/ui-pro` `yarn add @nuxt/ui-pro` `npm install @nuxt/ui-pro` `bun add @nuxt/ui-pro` 4. Import it in your CSS: app/assets/css/main.css `@import "tailwindcss"; @import "@nuxt/ui";` app/assets/css/main.css `@import "tailwindcss"; @import "@nuxt/ui-pro";` 5. Wrap your app with the [App](https://ui.nuxt.com/components/app) component: 5. Add the `@nuxt/ui-pro` module in your `nuxt.config.ts` file as it's no longer a layer: nuxt.config.ts `export default defineNuxtConfig({ - extends: ['@nuxt/ui-pro'], - modules: ['@nuxt/ui'] + modules: ['@nuxt/ui-pro'] })` 6. Wrap your app with the [App](https://ui.nuxt.com/components/app) component: app.vue `
with `orientation="vertical"` | | `HorizontalNavigation` | [`NavigationMenu`](https://ui.nuxt.com/components/navigation-menu)
with `orientation="horizontal"` | Here are the Nuxt UI Pro components that have been renamed or removed: | v1 | v3 | | --- | --- | | `BlogList` | [`BlogPosts`](https://ui.nuxt.com/components/blog-posts) | | `ColorModeToggle` | [`ColorModeSwitch`](https://ui.nuxt.com/components/color-mode-switch) | | `DashboardCard` | Removed (use [`PageCard`](https://ui.nuxt.com/components/page-card)
instead) | | `DashboardLayout` | [`DashboardGroup`](https://ui.nuxt.com/components/dashboard-group) | | `DashboardModal` | Removed (use [`Modal`](https://ui.nuxt.com/components/modal)
instead) | | `DashboardNavbarToggle` | [`DashboardSidebarToggle`](https://ui.nuxt.com/components/dashboard-sidebar-toggle) | | `DashboardPage` | Removed | | `DashboardPanelContent` | Removed (use `#body` slot instead) | | `DashboardPanelHandle` | [`DashboardResizeHandle`](https://ui.nuxt.com/components/dashboard-resize-handle) | | `DashboardSection` | Removed (use [`PageCard`](https://ui.nuxt.com/components/page-card)
instead) | | `DashboardSidebarLinks` | Removed (use [`NavigationMenu`](https://ui.nuxt.com/components/navigation-menu)
instead) | | `DashboardSlideover` | Removed (use [`Slideover`](https://ui.nuxt.com/components/slideover)
instead) | | `FooterLinks` | Removed (use [`NavigationMenu`](https://ui.nuxt.com/components/navigation-menu)
instead) | | `HeaderLinks` | Removed (use [`NavigationMenu`](https://ui.nuxt.com/components/navigation-menu)
instead) | | `LandingCard` | Removed (use [`PageCard`](https://ui.nuxt.com/components/page-card)
instead) | | `LandingCTA` | [`PageCTA`](https://ui.nuxt.com/components/page-cta) | | `LandingFAQ` | Removed (use [`PageAccordion`](https://ui.nuxt.com/components/page-accordion)
instead) | | `LandingGrid` | Removed (use [`PageGrid`](https://ui.nuxt.com/components/page-grid)
instead) | | `LandingHero` | Removed (use [`PageHero`](https://ui.nuxt.com/components/page-hero)
instead) | | `LandingLogos` | [`PageLogos`](https://ui.nuxt.com/components/page-logos) | | `LandingSection` | [`PageSection`](https://ui.nuxt.com/components/page-section) | | `LandingTestimonial` | Removed (use [`PageCard`](https://ui.nuxt.com/components/page-card#as-a-testimonial)
instead) | | `NavigationAccordion` | [`ContentNavigation`](https://ui.nuxt.com/components/content-navigation) | | `NavigationLinks` | [`ContentNavigation`](https://ui.nuxt.com/components/content-navigation) | | `NavigationTree` | [`ContentNavigation`](https://ui.nuxt.com/components/content-navigation) | | `PageError` | [`Error`](https://ui.nuxt.com/components/error) | | `PricingCard` | [`PricingPlan`](https://ui.nuxt.com/components/pricing-plan) | | `PricingGrid` | [`PricingPlans`](https://ui.nuxt.com/components/pricing-plans) | | `PricingSwitch` | Removed (use [`Switch`](https://ui.nuxt.com/components/switch)
or [`Tabs`](https://ui.nuxt.com/components/tabs)
instead) | ### [Changed components](https://ui.nuxt.com/getting-started/migration#changed-components) In addition to the renamed components, there are lots of changes to the components API. Let's detail the most important ones: * The `links` and `options` props have been renamed to `items` for consistency: ` -
+
The element or component this component should render as. | | `legend` | | `string` | | `valueKey` | `'value'` | `string`
When `items` is an array of objects, select the field to use as the value. | | `labelKey` | `'label'` | `string`
When `items` is an array of objects, select the field to use as the label. | | `descriptionKey` | `'description'` | `string`
When `items` is an array of objects, select the field to use as the description. | | `items` | | `CheckboxGroupItem[]`
Show properties
* `label?: string`
* `description?: string`
* `disabled?: boolean`
* `value?: string`
* `class?: any`
* `ui?: (Pick<{ root?: ClassNameValue; fieldset?: ClassNameValue; legend?: ClassNameValue; item?: ClassNameValue; }, "item"> & Omit<...>)` | | `size` | `'md'` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | | `variant` | `'list'` | `"table" \| "list" \| "card"` | | `orientation` | `'vertical'` | `"horizontal" \| "vertical"`
The orientation the checkbox buttons are laid out. | | `defaultValue` | | `AcceptableValue[]`
The value of the checkbox when it is initially rendered. Use when you do not need to control its value. | | `disabled` | | `boolean`
When `true`, prevents the user from interacting with the checkboxes | | `loop` | `false` | `boolean`
Whether keyboard navigation should loop around | | `modelValue` | | `AcceptableValue[]`
The controlled value of the checkbox. Can be binded with v-model. | | `name` | | `string`
The name of the field. Submitted with its owning form as part of a name/value pair. | | `required` | | `boolean`
When `true`, indicates that the user must set the value before the owning form can be submitted. | | `color` | `'primary'` | `"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"` | | `indicator` | `'start'` | `"start" \| "end" \| "hidden"`
Position of the indicator. | | `icon` | `appConfig.ui.icons.check` | `string`
The icon displayed when checked. | | `ui` | | `{ root?: ClassNameValue; fieldset?: ClassNameValue; legend?: ClassNameValue; item?: ClassNameValue; } & { root?: ClassNameValue; ... 6 more ...; description?: ClassNameValue; }`
Show properties
* `root?: ClassNameValue`
* `fieldset?: ClassNameValue`
* `legend?: ClassNameValue`
* `item?: ClassNameValue`
* `container?: ClassNameValue`
* `base?: ClassNameValue`
* `indicator?: ClassNameValue`
* `icon?: ClassNameValue`
* `wrapper?: ClassNameValue`
* `label?: ClassNameValue`
* `description?: ClassNameValue` | ### [Slots](https://ui.nuxt.com/components/checkbox-group#slots) | Slot | Type | | --- | --- | | `legend` | `{}` | | `label` | `{ item: CheckboxGroupItem & { id: string; }; }` | | `description` | `{ item: CheckboxGroupItem & { id: string; }; }` | ### [Emits](https://ui.nuxt.com/components/checkbox-group#emits) | Event | Type | | --- | --- | | `change` | `[payload: Event]` | | `update:modelValue` | `[value: AcceptableValue[]]` | [Theme](https://ui.nuxt.com/components/checkbox-group#theme) ------------------------------------------------------------- app.config.ts `export default defineAppConfig({ ui: { checkboxGroup: { slots: { root: 'relative', fieldset: 'flex gap-x-2', legend: 'mb-1 block font-medium text-default', item: '' }, variants: { orientation: { horizontal: { fieldset: 'flex-row' }, vertical: { fieldset: 'flex-col' } }, color: { primary: {}, secondary: {}, success: {}, info: {}, warning: {}, error: {}, neutral: {} }, variant: { list: {}, card: {}, table: { item: 'border border-muted' } }, size: { xs: { fieldset: 'gap-y-0.5', legend: 'text-xs' }, sm: { fieldset: 'gap-y-0.5', legend: 'text-xs' }, md: { fieldset: 'gap-y-1', legend: 'text-sm' }, lg: { fieldset: 'gap-y-1', legend: 'text-sm' }, xl: { fieldset: 'gap-y-1.5', legend: 'text-base' } }, required: { true: { legend: "after:content-['*'] after:ms-0.5 after:text-error" } } }, compoundVariants: [ { size: 'xs', variant: 'table', class: { item: 'p-2.5' } }, { size: 'sm', variant: 'table', class: { item: 'p-3' } }, { size: 'md', variant: 'table', class: { item: 'p-3.5' } }, { size: 'lg', variant: 'table', class: { item: 'p-4' } }, { size: 'xl', variant: 'table', class: { item: 'p-4.5' } }, { orientation: 'horizontal', variant: 'table', class: { item: 'first-of-type:rounded-s-lg last-of-type:rounded-e-lg', fieldset: 'gap-0 -space-x-px' } }, { orientation: 'vertical', variant: 'table', class: { item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg', fieldset: 'gap-0 -space-y-px' } }, { color: 'primary', variant: 'table', class: { item: 'has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]' } }, { color: 'neutral', variant: 'table', class: { item: 'has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]' } }, { variant: 'table', disabled: true, class: { item: 'cursor-not-allowed opacity-75' } } ], defaultVariants: { size: 'md', variant: 'list', color: 'primary' } } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ ui: { checkboxGroup: { slots: { root: 'relative', fieldset: 'flex gap-x-2', legend: 'mb-1 block font-medium text-default', item: '' }, variants: { orientation: { horizontal: { fieldset: 'flex-row' }, vertical: { fieldset: 'flex-col' } }, color: { primary: {}, secondary: {}, success: {}, info: {}, warning: {}, error: {}, neutral: {} }, variant: { list: {}, card: {}, table: { item: 'border border-muted' } }, size: { xs: { fieldset: 'gap-y-0.5', legend: 'text-xs' }, sm: { fieldset: 'gap-y-0.5', legend: 'text-xs' }, md: { fieldset: 'gap-y-1', legend: 'text-sm' }, lg: { fieldset: 'gap-y-1', legend: 'text-sm' }, xl: { fieldset: 'gap-y-1.5', legend: 'text-base' } }, required: { true: { legend: "after:content-['*'] after:ms-0.5 after:text-error" } } }, compoundVariants: [ { size: 'xs', variant: 'table', class: { item: 'p-2.5' } }, { size: 'sm', variant: 'table', class: { item: 'p-3' } }, { size: 'md', variant: 'table', class: { item: 'p-3.5' } }, { size: 'lg', variant: 'table', class: { item: 'p-4' } }, { size: 'xl', variant: 'table', class: { item: 'p-4.5' } }, { orientation: 'horizontal', variant: 'table', class: { item: 'first-of-type:rounded-s-lg last-of-type:rounded-e-lg', fieldset: 'gap-0 -space-x-px' } }, { orientation: 'vertical', variant: 'table', class: { item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg', fieldset: 'gap-0 -space-y-px' } }, { color: 'primary', variant: 'table', class: { item: 'has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]' } }, { color: 'neutral', variant: 'table', class: { item: 'has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]' } }, { variant: 'table', disabled: true, class: { item: 'cursor-not-allowed opacity-75' } } ], defaultVariants: { size: 'md', variant: 'list', color: 'primary' } } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ ui: { checkboxGroup: { slots: { root: 'relative', fieldset: 'flex gap-x-2', legend: 'mb-1 block font-medium text-default', item: '' }, variants: { orientation: { horizontal: { fieldset: 'flex-row' }, vertical: { fieldset: 'flex-col' } }, color: { primary: {}, secondary: {}, success: {}, info: {}, warning: {}, error: {}, neutral: {} }, variant: { list: {}, card: {}, table: { item: 'border border-muted' } }, size: { xs: { fieldset: 'gap-y-0.5', legend: 'text-xs' }, sm: { fieldset: 'gap-y-0.5', legend: 'text-xs' }, md: { fieldset: 'gap-y-1', legend: 'text-sm' }, lg: { fieldset: 'gap-y-1', legend: 'text-sm' }, xl: { fieldset: 'gap-y-1.5', legend: 'text-base' } }, required: { true: { legend: "after:content-['*'] after:ms-0.5 after:text-error" } } }, compoundVariants: [ { size: 'xs', variant: 'table', class: { item: 'p-2.5' } }, { size: 'sm', variant: 'table', class: { item: 'p-3' } }, { size: 'md', variant: 'table', class: { item: 'p-3.5' } }, { size: 'lg', variant: 'table', class: { item: 'p-4' } }, { size: 'xl', variant: 'table', class: { item: 'p-4.5' } }, { orientation: 'horizontal', variant: 'table', class: { item: 'first-of-type:rounded-s-lg last-of-type:rounded-e-lg', fieldset: 'gap-0 -space-x-px' } }, { orientation: 'vertical', variant: 'table', class: { item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg', fieldset: 'gap-0 -space-y-px' } }, { color: 'primary', variant: 'table', class: { item: 'has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]' } }, { color: 'neutral', variant: 'table', class: { item: 'has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]' } }, { variant: 'table', disabled: true, class: { item: 'cursor-not-allowed opacity-75' } } ], defaultVariants: { size: 'md', variant: 'list', color: 'primary' } } } }) ] })` Expand code [](https://github.com/nuxt/ui/blob/v3/src/theme/checkbox-group.ts "Compound variants") Some colors in `compoundVariants` are omitted for readability. Check out the source code on GitHub. [Checkbox\ \ An input element to toggle between checked and unchecked states.](https://ui.nuxt.com/components/checkbox) [Chip\ \ An indicator of a numeric value or a state.](https://ui.nuxt.com/components/chip) --- # License - Nuxt UI Pro LicensePRO ========== Nuxt UI Pro is free in development, but you need a license to build your app in production. The license you bought or will buy is valid for both Nuxt UI Pro v1 and v3, this is a **free update**. [Plans](https://ui.nuxt.com/getting-started/license#plans) ----------------------------------------------------------- You can choose between **Solo**, **Startup** and **Organization** plans, they all provide the same features and give you a license key required to build your apps. The only difference is the number of developers that can be invited to the private GitHub repository. [](https://nuxt.lemonsqueezy.com/buy/057dacb2-87ba-4dc1-9256-59ee5b3bd394) Solo Tailored for indie hackers, freelancers and solo founders. [](https://nuxt.lemonsqueezy.com/buy/2e042a33-7e76-4dda-bd68-e353c182e571) Startup Best suited for small teams, startups and agencies with up to 5 developers. [](https://nuxt.lemonsqueezy.com/buy/2979099c-b7a0-4ba1-90e0-a0d60509b92d) Organization Ideal for larger teams and organizations with up to 20 developers. Once purchased, you will receive an email with a license key to activate. To activate your license, enter your license key and your GitHub username. This will invite you to the private GitHub repository as well as activating your license to build your app in production. [Activate my license](https://ui.nuxt.com/pro/activate) [Build](https://ui.nuxt.com/getting-started/license#build) ----------------------------------------------------------- ### [Local](https://ui.nuxt.com/getting-started/license#local) To build your app locally, you can use your license key in your `.env` file: .env `NUXT_UI_PRO_LICENSE=
The element or component this component should render as. | | `prev` | `{ size: 'md', color: 'neutral', variant: 'link' }` | `ButtonProps`
Configure the prev button when arrows are enabled.
Show properties
* `label?: string`
* `color?: "error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
Defaults to `'primary'`.
* `activeColor?: "error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
* `variant?: "link" \| "solid" \| "outline" \| "soft" \| "subtle" \| "ghost"`
Defaults to `'solid'`.
* `activeVariant?: "link" \| "solid" \| "outline" \| "soft" \| "subtle" \| "ghost"`
* `size?: "xs" \| "sm" \| "md" \| "lg" \| "xl"`
Defaults to `'md'`.
* `square?: boolean`
Render the button with equal padding on all sides.
* `block?: boolean`
Render the button full width.
* `loadingAuto?: boolean`
Set loading state automatically based on the `@click` promise state
* `class?: any`
* `ui?: { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }`
* `icon?: string`
Display an icon based on the `leading` and `trailing` props.
* `avatar?: AvatarProps`
Display an avatar on the left side.
* `leading?: boolean`
When `true`, the icon will be displayed on the left side.
* `leadingIcon?: string`
Display an icon on the left side.
* `trailing?: boolean`
When `true`, the icon will be displayed on the right side.
* `trailingIcon?: string`
Display an icon on the right side.
* `loading?: boolean`
When `true`, the loading icon will be displayed.
* `loadingIcon?: string`
The icon when the `loading` prop is `true`. Defaults to `appConfig.ui.icons.loading`.
* `active?: boolean`
Force the link to be active independent of the current route.
* `as?: any`
The element or component this component should render as when not a link. Defaults to `'button'`.
* `to?: string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric`
Route Location the link should navigate to when clicked on.
* `type?: "reset" \| "submit" \| "button"`
The type of the button when not a link. Defaults to `'button'`.
* `disabled?: boolean`
* `target?: "_blank" \| "_parent" \| "_self" \| "_top" \| (string & {}) \| null`
Where to display the linked URL, as the name for a browsing context. | | `prevIcon` | `appConfig.ui.icons.arrowLeft` | `string`
The icon displayed in the prev button. | | `next` | `{ size: 'md', color: 'neutral', variant: 'link' }` | `ButtonProps`
Configure the next button when arrows are enabled.
Show properties
* `label?: string`
* `color?: "error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
Defaults to `'primary'`.
* `activeColor?: "error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
* `variant?: "link" \| "solid" \| "outline" \| "soft" \| "subtle" \| "ghost"`
Defaults to `'solid'`.
* `activeVariant?: "link" \| "solid" \| "outline" \| "soft" \| "subtle" \| "ghost"`
* `size?: "xs" \| "sm" \| "md" \| "lg" \| "xl"`
Defaults to `'md'`.
* `square?: boolean`
Render the button with equal padding on all sides.
* `block?: boolean`
Render the button full width.
* `loadingAuto?: boolean`
Set loading state automatically based on the `@click` promise state
* `class?: any`
* `ui?: { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }`
* `icon?: string`
Display an icon based on the `leading` and `trailing` props.
* `avatar?: AvatarProps`
Display an avatar on the left side.
* `leading?: boolean`
When `true`, the icon will be displayed on the left side.
* `leadingIcon?: string`
Display an icon on the left side.
* `trailing?: boolean`
When `true`, the icon will be displayed on the right side.
* `trailingIcon?: string`
Display an icon on the right side.
* `loading?: boolean`
When `true`, the loading icon will be displayed.
* `loadingIcon?: string`
The icon when the `loading` prop is `true`. Defaults to `appConfig.ui.icons.loading`.
* `active?: boolean`
Force the link to be active independent of the current route.
* `as?: any`
The element or component this component should render as when not a link. Defaults to `'button'`.
* `to?: string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric`
Route Location the link should navigate to when clicked on.
* `type?: "reset" \| "submit" \| "button"`
The type of the button when not a link. Defaults to `'button'`.
* `disabled?: boolean`
* `target?: "_blank" \| "_parent" \| "_self" \| "_top" \| (string & {}) \| null`
Where to display the linked URL, as the name for a browsing context. | | `nextIcon` | `appConfig.ui.icons.arrowRight` | `string`
The icon displayed in the next button. | | `arrows` | `false` | `boolean`
Display prev and next buttons to scroll the carousel. | | `dots` | `false` | `boolean`
Display dots to scroll to a specific slide. | | `orientation` | `'horizontal'` | `"vertical" \| "horizontal"`
The orientation of the carousel. | | `items` | | `CarouselItem[]`
Show properties
* `class?: any`
* `ui?: Pick<{ root?: ClassNameValue; viewport?: ClassNameValue; container?: ClassNameValue; item?: ClassNameValue; controls?: ClassNameValue; ... 4 more ...; dot?: ClassNameValue; }, "item">` | | `autoplay` | `false` | `boolean \| Partial
Enable Autoplay plugin
* [https://www.embla-carousel.com/plugins/autoplay/](https://www.embla-carousel.com/plugins/autoplay/) | | `autoScroll` | `false` | `boolean \| Partial
Enable Auto Scroll plugin
* [https://www.embla-carousel.com/plugins/auto-scroll/](https://www.embla-carousel.com/plugins/auto-scroll/) | | `autoHeight` | `false` | `boolean \| Partial
Enable Auto Height plugin
* [https://www.embla-carousel.com/plugins/auto-height/](https://www.embla-carousel.com/plugins/auto-height/) | | `classNames` | `false` | `boolean \| Partial
Enable Class Names plugin
* [https://www.embla-carousel.com/plugins/class-names/](https://www.embla-carousel.com/plugins/class-names/) | | `fade` | `false` | `boolean \| Partial
Enable Fade plugin
* [https://www.embla-carousel.com/plugins/fade/](https://www.embla-carousel.com/plugins/fade/) | | `wheelGestures` | `false` | `any`
Enable Wheel Gestures plugin
* [https://www.embla-carousel.com/plugins/wheel-gestures/](https://www.embla-carousel.com/plugins/wheel-gestures/) | | `align` | `'center'` | `"start" \| "center" \| "end" \| (viewSize: number, snapSize: number, index: number): number` | | `containScroll` | `'trimSnaps'` | `false \| "trimSnaps" \| "keepSnaps"` | | `slidesToScroll` | `1` | `number \| "auto"` | | `dragFree` | `false` | `boolean` | | `dragThreshold` | `10` | `number` | | `inViewThreshold` | `0` | `number \| number[]` | | `loop` | `false` | `boolean` | | `skipSnaps` | `false` | `boolean` | | `duration` | `25` | `number` | | `startIndex` | `0` | `number` | | `watchDrag` | `true` | `false \| true \| (emblaApi: EmblaCarouselType, evt: PointerEventType): boolean \| void` | | `watchResize` | `true` | `false \| true \| (emblaApi: EmblaCarouselType, entries: ResizeObserverEntry[]): boolean \| void` | | `watchSlides` | `true` | `false \| true \| (emblaApi: EmblaCarouselType, mutations: MutationRecord[]): boolean \| void` | | `watchFocus` | `true` | `false \| true \| (emblaApi: EmblaCarouselType, evt: FocusEvent): boolean \| void` | | `active` | `true` | `boolean` | | `breakpoints` | `{}` | `{ [key: string]: Omit
The element or component this component should render as. | | `throttle` | `50` | `number`
Throttle time in ms for the color picker | | `disabled` | | `boolean`
Disable the color picker | | `defaultValue` | `'#FFFFFF'` | `string`
The default value of the color picker | | `format` | `'hex'` | `"hex" \| "rgb" \| "hsl" \| "cmyk" \| "lab"`
Format of the color | | `size` | `'md'` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | | `modelValue` | | `string` | | `ui` | | `{ root?: ClassNameValue; picker?: ClassNameValue; selector?: ClassNameValue; selectorBackground?: ClassNameValue; selectorThumb?: ClassNameValue; track?: ClassNameValue; trackThumb?: ClassNameValue; }` | ### [Emits](https://ui.nuxt.com/components/color-picker#emits) | Event | Type | | --- | --- | | `update:modelValue` | `[value: string \| undefined]` | [Theme](https://ui.nuxt.com/components/color-picker#theme) ----------------------------------------------------------- app.config.ts `export default defineAppConfig({ ui: { colorPicker: { slots: { root: 'data-[disabled]:opacity-75', picker: 'flex gap-4', selector: 'rounded-md touch-none', selectorBackground: 'w-full h-full relative rounded-md', selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed', track: 'w-[8px] relative rounded-md touch-none', trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed' }, variants: { size: { xs: { selector: 'w-38 h-38', track: 'h-38' }, sm: { selector: 'w-40 h-40', track: 'h-40' }, md: { selector: 'w-42 h-42', track: 'h-42' }, lg: { selector: 'w-44 h-44', track: 'h-44' }, xl: { selector: 'w-46 h-46', track: 'h-46' } } }, compoundVariants: [], defaultVariants: { size: 'md' } } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ ui: { colorPicker: { slots: { root: 'data-[disabled]:opacity-75', picker: 'flex gap-4', selector: 'rounded-md touch-none', selectorBackground: 'w-full h-full relative rounded-md', selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed', track: 'w-[8px] relative rounded-md touch-none', trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed' }, variants: { size: { xs: { selector: 'w-38 h-38', track: 'h-38' }, sm: { selector: 'w-40 h-40', track: 'h-40' }, md: { selector: 'w-42 h-42', track: 'h-42' }, lg: { selector: 'w-44 h-44', track: 'h-44' }, xl: { selector: 'w-46 h-46', track: 'h-46' } } }, compoundVariants: [], defaultVariants: { size: 'md' } } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ ui: { colorPicker: { slots: { root: 'data-[disabled]:opacity-75', picker: 'flex gap-4', selector: 'rounded-md touch-none', selectorBackground: 'w-full h-full relative rounded-md', selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed', track: 'w-[8px] relative rounded-md touch-none', trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed' }, variants: { size: { xs: { selector: 'w-38 h-38', track: 'h-38' }, sm: { selector: 'w-40 h-40', track: 'h-40' }, md: { selector: 'w-42 h-42', track: 'h-42' }, lg: { selector: 'w-44 h-44', track: 'h-44' }, xl: { selector: 'w-46 h-46', track: 'h-46' } } }, compoundVariants: [], defaultVariants: { size: 'md' } } } }) ] })` Expand code [Collapsible\ \ A collapsible element to toggle visibility of its content.](https://ui.nuxt.com/components/collapsible) [CommandPalette\ \ A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.](https://ui.nuxt.com/components/command-palette) --- # Vue Container Component - Nuxt UI Container ========= [GitHub](https://github.com/nuxt/ui/tree/v3/src/runtime/components/Container.vue) A container lets you center and constrain the width of your content. [Usage](https://ui.nuxt.com/components/container#usage) -------------------------------------------------------- `
The element or component this component should render as. | ### [Slots](https://ui.nuxt.com/components/container#slots) | Slot | Type | | --- | --- | | `default` | `{}` | [Theme](https://ui.nuxt.com/components/container#theme) -------------------------------------------------------- app.config.ts `export default defineAppConfig({ ui: { container: { base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8' } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ ui: { container: { base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8' } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ ui: { container: { base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8' } } }) ] })` Expand code [CommandPalette\ \ A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.](https://ui.nuxt.com/components/command-palette) [ContextMenu\ \ A menu to display actions when right-clicking on an element.](https://ui.nuxt.com/components/context-menu) --- # Meet the Team - Nuxt UI Meet the Team ============= The development of Nuxt UI is led by a community of developers from all over the world.  Benjamin Canac Bordeaux, France [](https://x.com/benjamincanac) [](https://bsky.app/profile/benjamincanac.dev) [](https://github.com/benjamincanac) [Sponsor](https://github.com/sponsors/benjamincanac)  Hugo Richard Nice, France [](https://www.instagram.com/hugo.rcd_) [](https://x.com/HugoRCD__) [](https://www.linkedin.com/in/hugorcd) [](https://bsky.app/profile/hrcd.fr) [](https://github.com/HugoRCD) [](https://hrcd.fr/) [Sponsor](https://github.com/sponsors/HugoRCD)  Romain Hamel France [](https://www.linkedin.com/in/romhml) [](https://bsky.app/profile/rohm.bsky.social) [](https://github.com/romhml) [Sponsor](https://github.com/sponsors/romhml)  Sandro Circi Roma, Italy [](https://bsky.app/profile/sandros94.com) [](https://www.youtube.com/@sandros94) [](https://twitch.tv/sandros94) [](https://github.com/sandros94) [](https://s94.dev/) [Sponsor](https://github.com/sponsors/sandros94)  Eugen Istoc Atlanta, Washington DC [](https://x.com/eugenistoc) [](https://github.com/genu) [](http://www.eugenistoc.com/) [Sponsor](https://github.com/sponsors/genu) * * *  atinux [](https://github.com/atinux)  smarroufin [](https://github.com/smarroufin)  Haythamasalama [](https://github.com/Haythamasalama)  danielroe [](https://github.com/danielroe)  hywax [](https://github.com/hywax)  malik-jouda [](https://github.com/malik-jouda)  connerblanton [](https://github.com/connerblanton)  maximepvrt [](https://github.com/maximepvrt)  antfu [](https://github.com/antfu)  noook [](https://github.com/noook)  rdjanuar [](https://github.com/rdjanuar)  larbish [](https://github.com/larbish)  eduayme [](https://github.com/eduayme)  farnabaz [](https://github.com/farnabaz)  ivanmaxlogiudice [](https://github.com/ivanmaxlogiudice)  KeJunMao [](https://github.com/KeJunMao)  ineshbose [](https://github.com/ineshbose)  DarkGhostHunter [](https://github.com/DarkGhostHunter)  J-Michalek [](https://github.com/J-Michalek)  Silver343 [](https://github.com/Silver343)  zAlweNy26 [](https://github.com/zAlweNy26)  maxsteinwand [](https://github.com/maxsteinwand)  MuhammadM1998 [](https://github.com/MuhammadM1998)  Akryum [](https://github.com/Akryum) --- # Theme - Nuxt UI Theme ===== Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming. [Tailwind CSS](https://ui.nuxt.com/getting-started/theme#tailwind-css) ----------------------------------------------------------------------- Nuxt UI uses Tailwind CSS v4, you can read the official [upgrade guide](https://tailwindcss.com/docs/upgrade-guide#changes-from-v3) to learn about all the breaking changes. ### [`@theme`](https://ui.nuxt.com/getting-started/theme#theme) Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your theme with CSS variables inside a [`@theme`](https://tailwindcss.com/docs/functions-and-directives#theme-directive) directive to define your project's custom design tokens, like fonts, colors, and breakpoints: app/assets/css/main.css `@import "tailwindcss"; @import "@nuxt/ui"; @theme static { --font-sans: 'Public Sans', sans-serif; --breakpoint-3xl: 1920px; --color-green-50: #EFFDF5; --color-green-100: #D9FBE8; --color-green-200: #B3F5D1; --color-green-300: #75EDAE; --color-green-400: #00DC82; --color-green-500: #00C16A; --color-green-600: #00A155; --color-green-700: #007F45; --color-green-800: #016538; --color-green-900: #0A5331; --color-green-950: #052E16; }` app/assets/css/main.css `@import "tailwindcss"; @import "@nuxt/ui-pro"; @theme static { --font-sans: 'Public Sans', sans-serif; --breakpoint-3xl: 1920px; --color-green-50: #EFFDF5; --color-green-100: #D9FBE8; --color-green-200: #B3F5D1; --color-green-300: #75EDAE; --color-green-400: #00DC82; --color-green-500: #00C16A; --color-green-600: #00A155; --color-green-700: #007F45; --color-green-800: #016538; --color-green-900: #0A5331; --color-green-950: #052E16; }` The `@theme` directive tells Tailwind to make new utilities and variants available based on these variables. It's the equivalent of the `theme.extend` key in Tailwind CSS v3 `tailwind.config.ts` file. [](https://tailwindcss.com/docs/theme) Learn more about customizing your theme in the theme variables documentation. ### [`@source`](https://ui.nuxt.com/getting-started/theme#source) You can use the [`@source` directive](https://tailwindcss.com/docs/functions-and-directives#source-directive) to explicitly specify source files that aren't picked up by Tailwind's automatic content detection: This can be useful when writing Tailwind CSS classes in markdown files with [`@nuxt/content`](https://github.com/nuxt/content) for example: app/assets/css/main.css `@import "tailwindcss"; @import "@nuxt/ui"; @source "../../../content"; /* Use this if you're not using compatibilityVersion: 4: https://nuxt.com/docs/getting-started/upgrade#opting-in-to-nuxt-4 */ @source "../../content";` app/assets/css/main.css `@import "tailwindcss"; @import "@nuxt/ui-pro"; @source "../../../content"; /* Use this if you're not using compatibilityVersion: 4: https://nuxt.com/docs/getting-started/upgrade#opting-in-to-nuxt-4 */ @source "../../content";` [](https://tailwindcss.com/docs/detecting-classes-in-source-files) Learn more about automatic content detection in the detecting classes in source files documentation. [Design system](https://ui.nuxt.com/getting-started/theme#design-system) ------------------------------------------------------------------------- Nuxt UI extends Tailwind CSS's theming capabilities, providing a flexible design system with pre-configured color aliases based on [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) . This allows for easy customization and quick adaptation of the UI to your brand's aesthetic. | Color | Default | Description | | --- | --- | --- | | `primary` | `green` | Main brand color, used as the default color for components. | | `secondary` | `blue` | Secondary color to complement the primary color. | | `success` | `green` | Used for success states. | | `info` | `blue` | Used for informational states. | | `warning` | `yellow` | Used for warning states. | | `error` | `red` | Used for form error validation states. | | `neutral` | `slate` | Neutral color for backgrounds, text, etc. | These colors are used to style the components but also to generate the `color` props: color primary Button `
Default
Muted
Elevated
Accented
Inverted
`
DefaultMutedAccentedInverted
` Default
Muted
Accented
Inverted
`
This is how the `@theme` is generated for each design token:
`@theme default { --text-color-dimmed: var(--ui-text-dimmed); --text-color-muted: var(--ui-text-muted); --text-color-toned: var(--ui-text-toned); --text-color-default: var(--ui-text); --text-color-highlighted: var(--ui-text-highlighted); --text-color-inverted: var(--ui-text-inverted); --background-color-default: var(--ui-bg); --background-color-muted: var(--ui-bg-muted); --background-color-elevated: var(--ui-bg-elevated); --background-color-accented: var(--ui-bg-accented); --background-color-inverted: var(--ui-bg-inverted); --background-color-border: var(--ui-border); --border-color-default: var(--ui-border); --border-color-muted: var(--ui-border-muted); --border-color-accented: var(--ui-border-accented); --border-color-inverted: var(--ui-border-inverted); --border-color-bg: var(--ui-bg); --ring-color-default: var(--ui-border); --ring-color-muted: var(--ui-border-muted); --ring-color-accented: var(--ui-border-accented); --ring-color-inverted: var(--ui-border-inverted); --ring-color-bg: var(--ui-bg); --ring-offset-color-default: var(--ui-border); --ring-offset-color-muted: var(--ui-border-muted); --ring-offset-color-accented: var(--ui-border-accented); --ring-offset-color-inverted: var(--ui-border-inverted); --ring-offset-color-bg: var(--ui-bg); --divide-color-default: var(--ui-border); --divide-color-muted: var(--ui-border-muted); --divide-color-accented: var(--ui-border-accented); --divide-color-inverted: var(--ui-border-inverted); --divide-color-bg: var(--ui-bg); --outline-color-default: var(--ui-border); --outline-color-inverted: var(--ui-border-inverted); --stroke-color-default: var(--ui-border); --stroke-color-inverted: var(--ui-border-inverted); --fill-color-default: var(--ui-border); --fill-color-inverted: var(--ui-border-inverted); }`
Expand code
You can customize these CSS variables to tailor the appearance of your application in your `main.css` file:
app/assets/css/main.css
`@import "tailwindcss"; @import "@nuxt/ui"; :root { --ui-bg: var(--ui-color-neutral-50); --ui-text: var(--ui-color-neutral-900); } .dark { --ui-bg: var(--ui-color-neutral-950); --ui-border: var(--ui-color-neutral-900); }`
app/assets/css/main.css
`@import "tailwindcss"; @import "@nuxt/ui-pro"; :root { --ui-bg: var(--ui-color-neutral-50); --ui-text: var(--ui-color-neutral-900); } .dark { --ui-bg: var(--ui-color-neutral-950); --ui-border: var(--ui-color-neutral-900); }`
Nuxt UI applies a text and background color on the `` element of your app:
`body { @apply antialiased text-default bg-default scheme-light dark:scheme-dark; }`
### [Radius](https://ui.nuxt.com/getting-started/theme#radius)
Nuxt UI provides a centralized border radius system through the `--ui-radius` CSS variable.
`:root { --ui-radius: 0.25rem; }`
This CSS variable replaces Tailwind CSS's default `rounded-*` utilities so you can use the same class names:
xssmmdlgxl2xl3xl
` xs
sm
md
lg
xl
2xl
3xl
`
This is how the `@theme` is generated for each radius value:
`@theme default { --radius-xs: calc(var(--ui-radius) * 0.5); /* 0.125rem */ --radius-sm: var(--ui-radius); /* 0.25rem */ --radius-md: calc(var(--ui-radius) * 1.5); /* 0.375rem */ --radius-lg: calc(var(--ui-radius) * 2); /* 0.5rem */ --radius-xl: calc(var(--ui-radius) * 3); /* 0.75rem */ --radius-2xl: calc(var(--ui-radius) * 4); /* 1rem */ --radius-3xl: calc(var(--ui-radius) * 6); /* 1.5rem */ }`
Expand code
You can customize the base radius value in your `main.css` file:
app/assets/css/main.css
`@import "tailwindcss"; @import "@nuxt/ui"; :root { --ui-radius: 0.5rem; }`
app/assets/css/main.css
`@import "tailwindcss"; @import "@nuxt/ui-pro"; :root { --ui-radius: 0.5rem; }`
Try the theme picker in the header above to change the base radius value.
### [Container](https://ui.nuxt.com/getting-started/theme#container)
Nuxt UI provides a `--ui-container` CSS variable that controls the maximum width of the [Container](https://ui.nuxt.com/components/container)
component.
`:root { --ui-container: var(--container-7xl); }`
You can customize this value in your `main.css` file to adjust container widths consistently throughout your application:
app/assets/css/main.css
`@import "tailwindcss"; @import "@nuxt/ui"; @theme { --container-8xl: 90rem; } :root { --ui-container: var(--container-8xl); }`
app/assets/css/main.css
`@import "tailwindcss"; @import "@nuxt/ui-pro"; @theme { --container-8xl: 90rem; } :root { --ui-container: var(--container-8xl); }`
[Components theme](https://ui.nuxt.com/getting-started/theme#components-theme)
-------------------------------------------------------------------------------
Nuxt UI components are styled using the [Tailwind Variants](https://www.tailwind-variants.org/)
API, which provides a powerful way to create variants and manage component styles. Let's explore the key features of this API:
### [Slots](https://ui.nuxt.com/getting-started/theme#slots)
Components in Nuxt UI can have multiple `slots`, each representing a distinct HTML element or section within the component. These slots allow for flexible content insertion and styling. Let's take the [Card](https://ui.nuxt.com/components/card)
component as an example:
src/theme/card.tssrc/runtime/components/Card.vue
`export default { slots: { root: 'bg-default ring ring-default divide-y divide-default rounded-lg', header: 'p-4 sm:px-6', body: 'p-4 sm:p-6', footer: 'p-4 sm:px-6' } }`
` The icon displayed in the button when the status is `ready`. | | `color` | `'primary'` | `"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
The color of the button when the status is `ready`. | | `variant` | `'solid'` | `"link" \| "solid" \| "outline" \| "soft" \| "subtle" \| "ghost"`
The variant of the button when the status is `ready`. | | `streamingIcon` | `appConfig.ui.icons.stop` | `string`
The icon displayed in the button when the status is `streaming`. | | `streamingColor` | `'neutral'` | `"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
The color of the button when the status is `streaming`. | | `streamingVariant` | `'subtle'` | `"link" \| "solid" \| "outline" \| "soft" \| "subtle" \| "ghost"`
The variant of the button when the status is `streaming`. | | `submittedIcon` | `appConfig.ui.icons.stop` | `string`
The icon displayed in the button when the status is `submitted`. | | `submittedColor` | `'neutral'` | `"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
The color of the button when the status is `submitted`. | | `submittedVariant` | `'subtle'` | `"link" \| "solid" \| "outline" \| "soft" \| "subtle" \| "ghost"`
The variant of the button when the status is `submitted`. | | `errorIcon` | `appConfig.ui.icons.reload` | `string`
The icon displayed in the button when the status is `error`. | | `errorColor` | `'error'` | `"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
The color of the button when the status is `error`. | | `errorVariant` | `'soft'` | `"link" \| "solid" \| "outline" \| "soft" \| "subtle" \| "ghost"`
The variant of the button when the status is `error`. | | `label` | | `string` | | `size` | `'md'` | `"md" \| "xs" \| "sm" \| "lg" \| "xl"` | | `ui` | | `{ base?: ClassNameValue; } & { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }`
Show properties
* `base?: ClassNameValue`
* `label?: ClassNameValue`
* `leadingIcon?: ClassNameValue`
* `leadingAvatar?: ClassNameValue`
* `leadingAvatarSize?: ClassNameValue`
* `trailingIcon?: ClassNameValue` | ### [Slots](https://ui.nuxt.com/components/chat-prompt-submit#slots) | Slot | Type | | --- | --- | | `leading` | `{}` | | `default` | `{}` | | `trailing` | `{}` | ### [Emits](https://ui.nuxt.com/components/chat-prompt-submit#emits) | Event | Type | | --- | --- | | `stop` | `[]` | | `reload` | `[]` | [Theme](https://ui.nuxt.com/components/chat-prompt-submit#theme) ----------------------------------------------------------------- app.config.ts `export default defineAppConfig({ uiPro: { chatPromptSubmit: { slots: { base: '' } } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ uiPro: { chatPromptSubmit: { slots: { base: '' } } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ uiPro: { chatPromptSubmit: { slots: { base: '' } } } }) ] })` Expand code [ChatPrompt\ \ An enhanced Textarea for submitting prompts in AI chat interfaces.](https://ui.nuxt.com/components/chat-prompt) [Checkbox\ \ An input element to toggle between checked and unchecked states.](https://ui.nuxt.com/components/checkbox) --- # Fonts - Nuxt UI Fonts ===== [nuxt/fonts](https://github.com/nuxt/fonts) Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization. [Usage](https://ui.nuxt.com/getting-started/fonts#usage) --------------------------------------------------------- Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/fonts) module for you, so there's no additional setup required. To use a font in your Nuxt UI application, you can simply declare it in your CSS. It will be automatically loaded and optimized for you. app/assets/css/main.css `@import "tailwindcss"; @import "@nuxt/ui"; @theme { --font-sans: 'Public Sans', sans-serif; }` app/assets/css/main.css `@import "tailwindcss"; @import "@nuxt/ui-pro"; @theme { --font-sans: 'Public Sans', sans-serif; }` You can disable the `@nuxt/fonts` module with the `ui.fonts` option in your `nuxt.config.ts`: nuxt.config.ts `export default defineNuxtConfig({ ui: { fonts: false } })` [Icons\ \ Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.](https://ui.nuxt.com/getting-started/icons/nuxt) [Color Mode\ \ Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.](https://ui.nuxt.com/getting-started/color-mode/nuxt) --- # Vue CommandPalette Component - Nuxt UI CommandPalette ============== [Fuse.js](https://fusejs.io/) [Listbox](https://reka-ui.com/docs/components/listbox) [GitHub](https://github.com/nuxt/ui/tree/v3/src/runtime/components/CommandPalette.vue) A command palette with full-text search powered by Fuse.js for efficient fuzzy matching. [Usage](https://ui.nuxt.com/components/command-palette#usage) -------------------------------------------------------------- Use the `v-model` directive to control the value of the CommandPalette or the `default-value` prop to set the initial value when you do not need to control its state. [](https://ui.nuxt.com/components/command-palette#control-selected-items) You can also use the `@update:model-value` event to listen to the selected item(s). ### [Groups](https://ui.nuxt.com/components/command-palette#groups) The CommandPalette component filters groups and ranks matching commands by relevance as users type. It provides dynamic, instant search results for efficient command discovery. Use the `groups` prop as an array of objects with the following properties: * `id: string` * `label?: string` * `slot?: string` * `items?: CommandPaletteItem[]` * [`ignoreFilter?: boolean`](https://ui.nuxt.com/components/command-palette#with-ignore-filter) * [`postFilter?: (searchTerm: string, items: T[]) => T[]`](https://ui.nuxt.com/components/command-palette#with-post-filtered-items) * `highlightedIcon?: string` You must provide an `id` for each group otherwise the group will be ignored. Each group contains an `items` array of objects that define the commands. Each item can have the following properties: * `prefix?: string` * `label?: string` * `suffix?: string` * `icon?: string` * `avatar?: AvatarProps` * `chip?: ChipProps` * `kbds?: string[] | KbdProps[]` * `active?: boolean` * `loading?: boolean` * `disabled?: boolean` * [`slot?: string`](https://ui.nuxt.com/components/command-palette#with-custom-slot) * `onSelect?(e?: Event): void` * `class?: any` * `ui?: { item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelPrefix?: ClassNameValue, itemLabelBase?: ClassNameValue, itemLabelSuffix?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue, itemTrailingHighlightedIcon?: ClassNameValue, itemTrailingIcon?: ClassNameValue,}` You can pass any property from the [Link](https://ui.nuxt.com/components/link#props) component such as `to`, `target`, etc. Users Benjamin CanacbenjamincanacSylvain MarroufinsmarroufinSébastien ChopinatinuxRomain HamelromhmlHaytham A. SalamaHaythamasalamaDaniel RoedanielroeNeil Richternoook `
The element or component this component should render as. | | `icon` | `appConfig.ui.icons.search` | `string`
The icon displayed in the input. | | `selectedIcon` | `appConfig.ui.icons.check` | `string`
The icon displayed when an item is selected. | | `placeholder` | `t('commandPalette.placeholder')` | `string`
The placeholder text for the input. | | `autofocus` | `true` | `boolean`
Automatically focus the input when component is mounted. | | `close` | `false` | `boolean \| Partial
Display a close button in the input (useful when inside a Modal for example). `{ size: 'md', color: 'neutral', variant: 'ghost' }` | | `closeIcon` | `appConfig.ui.icons.close` | `string`
The icon displayed in the close button. | | `groups` | | `CommandPaletteGroup
Options for [useFuse](https://vueuse.org/integrations/useFuse)
. | | `labelKey` | `'label'` | `string`
The key used to get the label from the item. | | `multiple` | | `boolean`
Whether multiple options can be selected or not. | | `disabled` | | `boolean`
When `true`, prevents the user from interacting with listbox | | `modelValue` | `''` | `null \| string \| number \| bigint \| Record
The controlled value of the listbox. Can be binded with with `v-model`. | | `defaultValue` | | `null \| string \| number \| bigint \| Record
The value of the listbox when initially rendered. Use when you do not need to control the state of the Listbox | | `highlightOnHover` | | `boolean`
When `true`, hover over item will trigger highlight | | `loading` | | `boolean`
When `true`, the loading icon will be displayed. | | `loadingIcon` | `appConfig.ui.icons.loading` | `string`
The icon when the `loading` prop is `true`. | | `searchTerm` | `''` | `string` | | `ui` | | `{ root?: ClassNameValue; input?: ClassNameValue; close?: ClassNameValue; content?: ClassNameValue; viewport?: ClassNameValue; ... 17 more ...; itemLabelSuffix?: ClassNameValue; }` | ### [Slots](https://ui.nuxt.com/components/command-palette#slots) | Slot | Type | | --- | --- | | `empty` | `{ searchTerm?: string \| undefined; }` | | `close` | `{ ui: { root: (props?: Record
The element or component this component should render as. | | `light` | | `string` | | `dark` | | `string` | | `icon` | | `string` | | `size` | `'md'` | `"md" \| "xs" \| "sm" \| "lg" \| "xl" \| "3xs" \| "2xs" \| "2xl" \| "3xl"` | | `alt` | | `string` | | `chip` | | `boolean \| ChipProps`
Show properties
* `as?: any`
The element or component this component should render as. Defaults to `'div'`.
* `text?: string \| number`
Display some text inside the chip.
* `color?: "error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
Defaults to `'primary'`.
* `size?: "md" \| "xs" \| "sm" \| "lg" \| "xl" \| "3xs" \| "2xs" \| "2xl" \| "3xl"`
Defaults to `'md'`.
* `position?: "top-right" \| "bottom-right" \| "top-left" \| "bottom-left"`
The position of the chip. Defaults to `'top-right'`.
* `inset?: boolean`
When `true`, keep the chip inside the component for rounded elements.
* `standalone?: boolean`
When `true`, render the chip relatively to the parent.
* `class?: any`
* `ui?: { root?: ClassNameValue; base?: ClassNameValue; }` | | `text` | | `string` | | `ui` | | `{ root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; }` | [Collapsible\ \ A collapsible element to toggle visibility of its content.](https://ui.nuxt.com/components/collapsible) [ColorModeButton\ \ A Button to switch between light and dark mode.](https://ui.nuxt.com/components/color-mode-button) --- # Color Mode - Nuxt UI Color Mode ========== [nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes. [](https://ui.nuxt.com/getting-started/color-mode/vue) Looking for the **Vue** version? [Usage](https://ui.nuxt.com/getting-started/color-mode/nuxt#usage) ------------------------------------------------------------------- Nuxt UI automatically registers the [`@nuxtjs/color-mode`](https://github.com/nuxt-modules/color-mode) module for you, so there's no additional setup required. You can simply use the `useColorMode` composable to switch between light and dark modes: ColorModeButton.vue `
Right click here
Right click here
Right click here
Right click here
Right click here
Right click here
{{ loading ? 'Refreshing...' : 'Refresh the Page' }} Show properties
* `label?: string`
* `icon?: string`
* `color?: "error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
* `avatar?: AvatarProps`
* `content?: (ContextMenuContentProps & Partial
* `kbds?: (string )[] \| KbdProps[] \| undefined`
* `type?: "label" \| "separator" \| "link" \| "checkbox"`
The item type. Defaults to `'link'`.
* `slot?: string`
* `loading?: boolean`
* `disabled?: boolean`
* `checked?: boolean`
* `open?: boolean`
* `defaultOpen?: boolean`
* `children?: ArrayOrNested
* `onSelect?: ((e: Event) => void)`
* `onUpdateChecked?: ((checked: boolean) => void)`
* `class?: any`
* `ui?: Pick<{ content?: ClassNameValue; viewport?: ClassNameValue; group?: ClassNameValue; label?: ClassNameValue; separator?: ClassNameValue; ... 9 more ...; itemLabelExternalIcon?: ClassNameValue; }, "label" \| ... 10 more ... \| "itemLabelExternalIcon">`
* `to?: string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric`
Route Location the link should navigate to when clicked on.
* `as?: any`
The element or component this component should render as when not a link. Defaults to `'button'`.
* `active?: boolean`
Force the link to be active independent of the current route.
* `target?: "_blank" \| "_parent" \| "_self" \| "_top" \| (string & {}) \| null`
Where to display the linked URL, as the name for a browsing context. | | `checkedIcon` | `appConfig.ui.icons.check` | `string`
The icon displayed when an item is checked. | | `loadingIcon` | `appConfig.ui.icons.loading` | `string`
The icon displayed when an item is loading. | | `externalIcon` | `true` | `string \| false \| true`
The icon displayed when the item is an external link. Set to `false` to hide the external icon. | | `content` | | `ContextMenuContentProps & Partial
The content of the menu.
Show properties
* `alignOffset?: number`
An offset in pixels from the `start` or `end` alignment options. Defaults to `0`.
* `avoidCollisions?: boolean`
When `true`, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to `true`.
* `collisionBoundary?: Element \| (Element \| null)[] \| null`
The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check. Defaults to `[]`.
* `collisionPadding?: number \| Partial
The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }. Defaults to `0`.
* `sticky?: "partial" \| "always"`
The sticky behavior on the align axis. `partial` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to `"partial"`.
* `hideWhenDetached?: boolean`
Whether to hide the content when the trigger becomes fully occluded. Defaults to `false`.
* `positionStrategy?: "fixed" \| "absolute"`
The type of CSS position property to use.
* `disableUpdateOnLayoutShift?: boolean`
Whether to disable the update position for the content when the layout shifted. Defaults to `false`.
* `prioritizePosition?: boolean`
Force content to be position within the viewport.
Might overlap the reference element, which may not be desired. Defaults to `false`.
* `reference?: ReferenceElement`
The custom element or virtual element that will be set as the reference to position the floating element.
If provided, it will replace the default anchor element.
* `loop?: boolean`
When `true`, keyboard navigation will loop from last item to first, and vice versa. Defaults to `false`.
* `onEscapeKeyDown?: ((event: KeyboardEvent) => void)`
* `onPointerDownOutside?: ((event: PointerDownOutsideEvent) => void)`
* `onFocusOutside?: ((event: FocusOutsideEvent) => void)`
* `onInteractOutside?: ((event: PointerDownOutsideEvent \| FocusOutsideEvent) => void)`
* `onCloseAutoFocus?: ((event: Event) => void)` | | `portal` | `true` | `string \| false \| true \| HTMLElement`
Render the menu in a portal. | | `labelKey` | `'label'` | `string \| number`
The key used to get the label from the item. | | `disabled` | | `boolean` | | `modal` | `true` | `boolean`
The modality of the dropdown menu.
When set to `true`, interaction with outside elements will be disabled and only menu content will be visible to screen readers. | | `ui` | | `{ content?: ClassNameValue; viewport?: ClassNameValue; group?: ClassNameValue; label?: ClassNameValue; separator?: ClassNameValue; ... 9 more ...; itemLabelExternalIcon?: ClassNameValue; }` | ### [Slots](https://ui.nuxt.com/components/context-menu#slots) | Slot | Type | | --- | --- | | `default` | `{}` | | `item` | `{ item: ContextMenuItem; active?: boolean \| undefined; index: number; }` | | `item-leading` | `{ item: ContextMenuItem; active?: boolean \| undefined; index: number; }` | | `item-label` | `{ item: ContextMenuItem; active?: boolean \| undefined; index: number; }` | | `item-trailing` | `{ item: ContextMenuItem; active?: boolean \| undefined; index: number; }` | | `content-top` | `{}` | | `content-bottom` | `{}` | ### [Emits](https://ui.nuxt.com/components/context-menu#emits) | Event | Type | | --- | --- | | `update:open` | `[payload: boolean]` | [Theme](https://ui.nuxt.com/components/context-menu#theme) ----------------------------------------------------------- app.config.ts `export default defineAppConfig({ ui: { contextMenu: { slots: { content: 'min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col', viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1', group: 'p-1 isolate', label: 'w-full flex items-center font-semibold text-highlighted', separator: '-mx-1 my-1 h-px bg-border', item: 'group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75', itemLeadingIcon: 'shrink-0', itemLeadingAvatar: 'shrink-0', itemLeadingAvatarSize: '', itemTrailing: 'ms-auto inline-flex gap-1.5 items-center', itemTrailingIcon: 'shrink-0', itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0', itemTrailingKbdsSize: '', itemLabel: 'truncate', itemLabelExternalIcon: 'inline-block size-3 align-top text-dimmed' }, variants: { color: { primary: '', secondary: '', success: '', info: '', warning: '', error: '', neutral: '' }, active: { true: { item: 'text-highlighted before:bg-elevated', itemLeadingIcon: 'text-default' }, false: { item: [ 'text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50', 'transition-colors before:transition-colors' ], itemLeadingIcon: [ 'text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default', 'transition-colors' ] } }, loading: { true: { itemLeadingIcon: 'animate-spin' } }, size: { xs: { label: 'p-1 text-xs gap-1', item: 'p-1 text-xs gap-1', itemLeadingIcon: 'size-4', itemLeadingAvatarSize: '3xs', itemTrailingIcon: 'size-4', itemTrailingKbds: 'gap-0.5', itemTrailingKbdsSize: 'sm' }, sm: { label: 'p-1.5 text-xs gap-1.5', item: 'p-1.5 text-xs gap-1.5', itemLeadingIcon: 'size-4', itemLeadingAvatarSize: '3xs', itemTrailingIcon: 'size-4', itemTrailingKbds: 'gap-0.5', itemTrailingKbdsSize: 'sm' }, md: { label: 'p-1.5 text-sm gap-1.5', item: 'p-1.5 text-sm gap-1.5', itemLeadingIcon: 'size-5', itemLeadingAvatarSize: '2xs', itemTrailingIcon: 'size-5', itemTrailingKbds: 'gap-0.5', itemTrailingKbdsSize: 'md' }, lg: { label: 'p-2 text-sm gap-2', item: 'p-2 text-sm gap-2', itemLeadingIcon: 'size-5', itemLeadingAvatarSize: '2xs', itemTrailingIcon: 'size-5', itemTrailingKbds: 'gap-1', itemTrailingKbdsSize: 'md' }, xl: { label: 'p-2 text-base gap-2', item: 'p-2 text-base gap-2', itemLeadingIcon: 'size-6', itemLeadingAvatarSize: 'xs', itemTrailingIcon: 'size-6', itemTrailingKbds: 'gap-1', itemTrailingKbdsSize: 'lg' } } }, compoundVariants: [ { color: 'primary', active: false, class: { item: 'text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10', itemLeadingIcon: 'text-primary/75 group-data-highlighted:text-primary group-data-[state=open]:text-primary' } }, { color: 'primary', active: true, class: { item: 'text-primary before:bg-primary/10', itemLeadingIcon: 'text-primary' } } ], defaultVariants: { size: 'md' } } } })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' export default defineConfig({ plugins: [ vue(), ui({ ui: { contextMenu: { slots: { content: 'min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col', viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1', group: 'p-1 isolate', label: 'w-full flex items-center font-semibold text-highlighted', separator: '-mx-1 my-1 h-px bg-border', item: 'group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75', itemLeadingIcon: 'shrink-0', itemLeadingAvatar: 'shrink-0', itemLeadingAvatarSize: '', itemTrailing: 'ms-auto inline-flex gap-1.5 items-center', itemTrailingIcon: 'shrink-0', itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0', itemTrailingKbdsSize: '', itemLabel: 'truncate', itemLabelExternalIcon: 'inline-block size-3 align-top text-dimmed' }, variants: { color: { primary: '', secondary: '', success: '', info: '', warning: '', error: '', neutral: '' }, active: { true: { item: 'text-highlighted before:bg-elevated', itemLeadingIcon: 'text-default' }, false: { item: [ 'text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50', 'transition-colors before:transition-colors' ], itemLeadingIcon: [ 'text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default', 'transition-colors' ] } }, loading: { true: { itemLeadingIcon: 'animate-spin' } }, size: { xs: { label: 'p-1 text-xs gap-1', item: 'p-1 text-xs gap-1', itemLeadingIcon: 'size-4', itemLeadingAvatarSize: '3xs', itemTrailingIcon: 'size-4', itemTrailingKbds: 'gap-0.5', itemTrailingKbdsSize: 'sm' }, sm: { label: 'p-1.5 text-xs gap-1.5', item: 'p-1.5 text-xs gap-1.5', itemLeadingIcon: 'size-4', itemLeadingAvatarSize: '3xs', itemTrailingIcon: 'size-4', itemTrailingKbds: 'gap-0.5', itemTrailingKbdsSize: 'sm' }, md: { label: 'p-1.5 text-sm gap-1.5', item: 'p-1.5 text-sm gap-1.5', itemLeadingIcon: 'size-5', itemLeadingAvatarSize: '2xs', itemTrailingIcon: 'size-5', itemTrailingKbds: 'gap-0.5', itemTrailingKbdsSize: 'md' }, lg: { label: 'p-2 text-sm gap-2', item: 'p-2 text-sm gap-2', itemLeadingIcon: 'size-5', itemLeadingAvatarSize: '2xs', itemTrailingIcon: 'size-5', itemTrailingKbds: 'gap-1', itemTrailingKbdsSize: 'md' }, xl: { label: 'p-2 text-base gap-2', item: 'p-2 text-base gap-2', itemLeadingIcon: 'size-6', itemLeadingAvatarSize: 'xs', itemTrailingIcon: 'size-6', itemTrailingKbds: 'gap-1', itemTrailingKbdsSize: 'lg' } } }, compoundVariants: [ { color: 'primary', active: false, class: { item: 'text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10', itemLeadingIcon: 'text-primary/75 group-data-highlighted:text-primary group-data-[state=open]:text-primary' } }, { color: 'primary', active: true, class: { item: 'text-primary before:bg-primary/10', itemLeadingIcon: 'text-primary' } } ], defaultVariants: { size: 'md' } } } }) ] })` Expand code vite.config.ts `import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import uiPro from '@nuxt/ui-pro/vite' export default defineConfig({ plugins: [ vue(), uiPro({ ui: { contextMenu: { slots: { content: 'min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col', viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1', group: 'p-1 isolate', label: 'w-full flex items-center font-semibold text-highlighted', separator: '-mx-1 my-1 h-px bg-border', item: 'group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75', itemLeadingIcon: 'shrink-0', itemLeadingAvatar: 'shrink-0', itemLeadingAvatarSize: '', itemTrailing: 'ms-auto inline-flex gap-1.5 items-center', itemTrailingIcon: 'shrink-0', itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0', itemTrailingKbdsSize: '', itemLabel: 'truncate', itemLabelExternalIcon: 'inline-block size-3 align-top text-dimmed' }, variants: { color: { primary: '', secondary: '', success: '', info: '', warning: '', error: '', neutral: '' }, active: { true: { item: 'text-highlighted before:bg-elevated', itemLeadingIcon: 'text-default' }, false: { item: [ 'text-default data-highlighted:text-highlighted data-[state=open]:text-highlighted data-highlighted:before:bg-elevated/50 data-[state=open]:before:bg-elevated/50', 'transition-colors before:transition-colors' ], itemLeadingIcon: [ 'text-dimmed group-data-highlighted:text-default group-data-[state=open]:text-default', 'transition-colors' ] } }, loading: { true: { itemLeadingIcon: 'animate-spin' } }, size: { xs: { label: 'p-1 text-xs gap-1', item: 'p-1 text-xs gap-1', itemLeadingIcon: 'size-4', itemLeadingAvatarSize: '3xs', itemTrailingIcon: 'size-4', itemTrailingKbds: 'gap-0.5', itemTrailingKbdsSize: 'sm' }, sm: { label: 'p-1.5 text-xs gap-1.5', item: 'p-1.5 text-xs gap-1.5', itemLeadingIcon: 'size-4', itemLeadingAvatarSize: '3xs', itemTrailingIcon: 'size-4', itemTrailingKbds: 'gap-0.5', itemTrailingKbdsSize: 'sm' }, md: { label: 'p-1.5 text-sm gap-1.5', item: 'p-1.5 text-sm gap-1.5', itemLeadingIcon: 'size-5', itemLeadingAvatarSize: '2xs', itemTrailingIcon: 'size-5', itemTrailingKbds: 'gap-0.5', itemTrailingKbdsSize: 'md' }, lg: { label: 'p-2 text-sm gap-2', item: 'p-2 text-sm gap-2', itemLeadingIcon: 'size-5', itemLeadingAvatarSize: '2xs', itemTrailingIcon: 'size-5', itemTrailingKbds: 'gap-1', itemTrailingKbdsSize: 'md' }, xl: { label: 'p-2 text-base gap-2', item: 'p-2 text-base gap-2', itemLeadingIcon: 'size-6', itemLeadingAvatarSize: 'xs', itemTrailingIcon: 'size-6', itemTrailingKbds: 'gap-1', itemTrailingKbdsSize: 'lg' } } }, compoundVariants: [ { color: 'primary', active: false, class: { item: 'text-primary data-highlighted:text-primary data-highlighted:before:bg-primary/10 data-[state=open]:before:bg-primary/10', itemLeadingIcon: 'text-primary/75 group-data-highlighted:text-primary group-data-[state=open]:text-primary' } }, { color: 'primary', active: true, class: { item: 'text-primary before:bg-primary/10', itemLeadingIcon: 'text-primary' } } ], defaultVariants: { size: 'md' } } } }) ] })` Expand code [](https://github.com/nuxt/ui/blob/v3/src/theme/context-menu.ts "Compound variants") Some colors in `compoundVariants` are omitted for readability. Check out the source code on GitHub. [Container\ \ A container lets you center and constrain the width of your content.](https://ui.nuxt.com/components/container) [Drawer\ \ A drawer that smoothly slides in & out of the screen.](https://ui.nuxt.com/components/drawer) ---