Filter Chip

A filter chip with a live count and an optional status dot.

demos.tsx

import { useState } from "react";
import { FilterChip } from "@/components/ui/hiip-ui/filter-chip";

function FilterChipDemo() {
  const [active, setActive] = useState("all");
  const chips = [
    { id: "all", label: "All", count: 40, dot: undefined },
    { id: "ok", label: "Imported", count: 31, dot: "bg-emerald-500" },
    { id: "skip", label: "Skipped", count: 6, dot: "bg-amber-500" },
    { id: "fail", label: "Failed", count: 3, dot: "bg-destructive" },
  ];
  return (
    <div className="flex flex-wrap gap-2">
      {chips.map((c) => (
        <FilterChip
          key={c.id}
          count={c.count}
          dot={c.dot}
          active={active === c.id}
          onClick={() => setActive(c.id)}
        >
          {c.label}
        </FilterChip>
      ))}
    </div>
  );
}

Install — needs @hiip registered in components.json

bunx shadcn@latest add @hiip/filter-chip

Or by URL, with the token in the query

bunx shadcn@latest add "https://ui.hiip.ai/r/filter-chip.json?token=$HIIP_REGISTRY_TOKEN"

Both need a token — set one up.

Anatomy

Import from components/ui/hiip-ui/filter-chip.

<FilterChip count={40} dot="bg-emerald-500" active onClick={…}>
  Imported
</FilterChip>

API Reference

Generated from the source. Props forwarded to the underlying element are not listed.

FilterChip

A filter chip: a label, an optional status dot, an optional count.

Prop	Type	Default
`active`	`boolean \| undefined`	`false`
`count` Shown after the label.	`number \| undefined`	—
`dot`	`string \| undefined`	—

Type

registry:ui

Files written

components/ui/hiip-ui/filter-chip.tsx