About
A row of pill-shaped filter chips that behaves like a single-select radio group, with an accent ring on the active chip, for quick filters above lists and tables.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Chip Filter to your project and fits it to your theme.
Code
How Chip Filter is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import * as React from "react";
import { ChipFilter } from "@/components/ui/chip-filter";
export default function ChipFilterDemo() {
const [status, setStatus] = React.useState("all");
return (
<div className="flex w-full items-center justify-center p-10">
<ChipFilter
value={status}
onChange={setStatus}
options={[
{ value: "all", label: "All" },
{ value: "paid", label: "Paid" },
{ value: "pending", label: "Pending" },
{ value: "overdue", label: "Overdue" },
{ value: "draft", label: "Draft" },
]}
/>
</div>
);
}
More by amankaushik481
View all
Slash Command Menu
Emoji Picker