Pill

Component 124

About

Pill UI component.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pill to your project and fits it to your theme.

Code

How Pill is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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;