Docs
Badge Group

Badge Group

A badge group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.

DocsAPI Reference

Installation

pnpm dlx cross-env REGISTRY_URL=https://ui-x.junwen-k.dev/r pnpm dlx shadcn@latest add badge-group

Usage

import { BadgeGroup, BadgeGroupItem } from "@/components/ui/badge-group"
<BadgeGroup type="single">
  <BadgeGroupItem value="chocolate">Chocolate</BadgeGroupItem>
  <BadgeGroupItem value="mint">Mint</BadgeGroupItem>
  <BadgeGroupItem value="strawberry">Strawberry</BadgeGroupItem>
  <BadgeGroupItem value="vanilla">Vanilla</BadgeGroupItem>
</BadgeGroup>

Examples

Default

Form

VirtualizerCalendar