Components

Chip

GitHub
Display a chip indicator on any component.

Usage

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

<template>
  <UChip>
    <UButton icon="i-heroicons-inbox" color="gray" />
  </UChip>
</template>

Size

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

<template>
  <UChip size="2xl">
    <UButton icon="i-heroicons-inbox" color="gray" />
  </UChip>
</template>

Color

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

<template>
  <UChip color="red">
    <UButton icon="i-heroicons-inbox" color="gray" />
  </UChip>
</template>

Position

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

<template>
  <UChip position="bottom-right">
    <UButton icon="i-heroicons-inbox" color="gray" />
  </UChip>
</template>

Text

Use the text prop to display text in the chip.

3
<template>
  <UChip text="3" size="2xl">
    <UButton icon="i-heroicons-inbox" color="gray" />
  </UChip>
</template>

Show

Use the show prop to conditionally display the chip.

<script setup lang="ts">
const items = [{
  name: 'messages',
  icon: 'i-heroicons-chat-bubble-oval-left',
  count: 3
}, {
  name: 'notifications',
  icon: 'i-heroicons-bell',
  count: 0
}]
</script>

<template>
  <div class="flex gap-3">
    <UChip v-for="{ name, icon, count } in items" :key="name" :show="count > 0">
      <UButton :icon="icon" color="gray" />
    </UChip>
  </div>
</template>

Inset

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

Avatar
<template>
  <UChip inset>
    <UAvatar
      src="https://avatars.githubusercontent.com/u/739984?v=4"
      alt="Avatar"
    />
  </UChip>
</template>

Slots

content

Use the #content slot to fully customize the chip.

AvatarAvatar
<template>
  <UChip size="md" position="bottom-right" inset :ui="{ base: '-mx-2 rounded-none ring-0', background: '' }">
    <UAvatar
      src="https://avatars.githubusercontent.com/u/739984?v=4"
      alt="Avatar"
      size="lg"
    />

    <template #content>
      <UAvatar
        src="https://avatars.githubusercontent.com/in/80442?v=4"
        alt="Avatar"
        size="xs"
        :ui="{ rounded: 'rounded-md' }"
        class="shadow-md"
      />
    </template>
  </UChip>
</template>

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
color
string
config.default.color
position
"top-right" | "bottom-right" | "top-left" | "bottom-left"
config.default.position
text
string | number
null
inset
boolean
config.default.inset
show
boolean
true

Config

{
  wrapper: 'relative inline-flex items-center justify-center flex-shrink-0',
  base: 'absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap',
  background: 'bg-{color}-500 dark:bg-{color}-400',
  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'
  },
  translate: {
    'top-right': '-translate-y-1/2 translate-x-1/2 transform',
    'bottom-right': 'translate-y-1/2 translate-x-1/2 transform',
    'top-left': '-translate-y-1/2 -translate-x-1/2 transform',
    'bottom-left': 'translate-y-1/2 -translate-x-1/2 transform'
  },
  size: {
    '3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
    '2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
    xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
    sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
    md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
    lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
    xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
    '2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
    '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
  },
  default: {
    size: 'sm',
    color: 'primary',
    position: 'top-right',
    inset: false
  }
}

Checkbox

Display a checkbox field.

CommandPalette

Add a customizable command palette to your app.