Nuxt UI v4 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": {},
  "excerpt": false,
  "tag": "div"
}

Size

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

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

Color

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

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

Position

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

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

Text

Use the text prop to display text in the chip.

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

Show

Use the show prop to conditionally display the chip.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "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": {},
  "excerpt": false,
  "tag": "div"
}

Slots

content

Use the #content slot to fully customize the chip.

AvatarAvatar
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "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<{ 'top-right': string; 'bottom-right': string; 'top-left': string; 'bottom-left': string; }, any>; size?: DeepPartial<{ '3xs': string; '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; '3xl': string; }, any>; default?: DeepPartial<{ size: string; color: string; position: string; inset: boolean; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
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
ChipColor
config.default.color
"primary""gray""red""orange""amber""yellow""lime""green""emerald""teal""cyan""sky""blue""indigo""violet""purple""fuchsia""pink""rose"
text
string | number
null
inset
boolean
config.default.inset
show
boolean
true

Config

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

Checkbox

Display a checkbox field.

CommandPalette

Add a customizable command palette to your app.