import {
Pill,
PillAvatar,
PillButton,
PillStatus,
PillIndicator,
PillDelta,
PillIcon,
PillAvatarGroup,
} from "@/components/ui/pill";
import {
ArrowUpRightIcon,
XIcon,
CheckCircleIcon,
UsersIcon,
} from "lucide-react";
function Demo() {
return (
<div className="flex flex-wrap gap-2 items-center justify-center">
<Pill>
<PillAvatar
src="https://cdn.21st.dev/assets/localized/760921add96cda047fb9d92050b00b3697e3f9436fb8b4276c4303623dad9188.jpg"
fallback="HB"
/>
@haydenbleasel
</Pill>
<Pill>
<PillStatus>
<CheckCircleIcon size={12} className="text-emerald-500" />
Passed
</PillStatus>
Approval Status
</Pill>
<Pill>
#kibo-ui
<PillButton variant="ghost" size="icon">
<XIcon size={12} />
</PillButton>
</Pill>
<Pill>
<PillIndicator variant="success" pulse />
Active
</Pill>
<Pill>
<PillIndicator variant="error" />
Error
</Pill>
<Pill>
<PillDelta delta={10} />
Up 10%
</Pill>
<Pill>
<PillDelta delta={-5} />
Down 5%
</Pill>
<Pill>
<PillDelta delta={0} />
No change
</Pill>
<Pill>
<PillIcon icon={UsersIcon} />
17 users
</Pill>
<Pill>
<PillAvatarGroup>
<PillAvatar
src="https://cdn.21st.dev/assets/localized/760921add96cda047fb9d92050b00b3697e3f9436fb8b4276c4303623dad9188.jpg"
fallback="HB"
/>
<PillAvatar
src="https://cdn.21st.dev/assets/mirror/e9/e941f86e0ca2b1c9eefd47618a92040443f85598470bad47399cee7f259c0756.jpg"
fallback="SC"
/>
<PillAvatar
src="https://cdn.21st.dev/assets/mirror/ee/ee27a8a550eaa8658cae673aa17a1bf4f9111dd65a44c0540ffa52a46dee5a65.jpg"
fallback="LR"
/>
</PillAvatarGroup>
Loved by millions
</Pill>
</div>
);
}
export default Demo;
Part of Kibo UI — browse the full library on 21st.dev.