About
A compact avatar chip with a name and removable action.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Avatar Chip to your project and fits it to your theme.
Code
How Avatar Chip is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { AvatarChip, AvatarChipAvatar, AvatarChipLabel, AvatarChipRemove } from "@/components/ui/avatar-chip";
export const DEMO_PEOPLE = {
gagandeepKang: "Gagandeep Kang",
janakiAmmal: "Janaki Ammal",
kalpanaChawla: "Kalpana Chawla",
rajReddy: "Raj Reddy",
srinivasaRamanujan: "Srinivasa Ramanujan",
vikramSarabhai: "Vikram Sarabhai",
} as const;
const WHITESPACE_PATTERN = /\s+/;
export const getFirstName = (name: string): string =>
name.trim().split(WHITESPACE_PATTERN)[0] ?? name;
const BLUE_PALETTE = ["#dff4ff", "#38bdf8"] as const;
export function AvatarChipExample() {
return (
<div className="flex flex-wrap items-center gap-3">
<AvatarChip>
<AvatarChipAvatar
alt=""
name={getFirstName(DEMO_PEOPLE.janakiAmmal)}
palette={["#fff0e2", "#fa9769"]}
/>
<AvatarChipLabel>{DEMO_PEOPLE.janakiAmmal}</AvatarChipLabel>
</AvatarChip>
<AvatarChip variant="outline">
<AvatarChipAvatar
alt=""
name={getFirstName(DEMO_PEOPLE.vikramSarabhai)}
palette={BLUE_PALETTE}
/>
<AvatarChipLabel>{DEMO_PEOPLE.vikramSarabhai}</AvatarChipLabel>
<AvatarChipRemove aria-label={`Remove ${DEMO_PEOPLE.vikramSarabhai}`} />
</AvatarChip>
</div>
);
}
export default AvatarChipExample;
Dependencies
More by Saksham Kushwaha
View all
User Table
Group Chat
Avatar Team List
Avatar Select
Avatar Account Menu
Presence Avatar
Avatar Social Proof
Avatar Badge