Nuxt UI v3 is officially released!

Components

Chip

GitHub
Display a chip indicator on any component.

Usage

Wrap any component with the Chip component to display a chip indicator.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Size

Use the size prop to change the size of the chip.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Color

Use the color prop to change the color of the chip.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Position

Use the position prop to change the position of the chip.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Text

Use the text prop to display text in the chip.

3
{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Show

Use the show prop to conditionally display the chip.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Inset

Use the inset prop to display the chip inside the component. This is useful when dealing with rounded components.

Avatar
{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Slots

content

Use the #content slot to fully customize the chip.

AvatarAvatar
{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Props

ui
{ wrapper?: string; base?: string; background?: string; position?: DeepPartial<{ 'top-right': string; 'bottom-right': string; 'top-left': string; 'bottom-left': string; }, any>; translate?: DeepPartial<...>; size?: DeepPartial<...>; default?: DeepPartial<...>; } & { ...; } & { ...; }
{}
size
"sm" | "2xs" | "xs" | "md" | "lg" | "xl" | "3xs" | "2xl" | "3xl"
config.default.size
position
"top-right" | "bottom-right" | "top-left" | "bottom-left"
config.default.position
color
string
config.default.color
text
string | number
null
inset
boolean
config.default.inset
show
boolean
true

Config

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Checkbox

Display a checkbox field.

CommandPalette

Add a customizable command palette to your app.