Pill

Composable pill badge with status indicators, avatars, and delta arrows for React

Information-dense status badges. Compose avatars, status dots with pulse animation, up/down delta arrows, icons, and dismiss buttons. PillIndicator supports success/error/warning/info colors. Great for user status tags, metric displays, or task assignments.

Pill preview

Scroll to load preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/pill.json

npx shadcn@latest add https://www.shadcn.io/r/pill.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/pill.json

bunx shadcn@latest add https://www.shadcn.io/r/pill.json

Banner

Full-width alerts

Avatar Group

Stacked avatars

FAQ

Was this page helpful?

Avatar Group

Overlapping avatar stack with hover effects and tooltips for React

Pill

Pill preview

Installation

Related Components

Banner

Avatar Group

FAQ

How do I compose subcomponents?

How do I show animated status?

How do I show trend arrows?

How do I show overlapping avatars?