Klyv Filter Bar

Component

About

A control strip above a data list combining quick-toggle filter chips, a slot for extra controls like a select or search field, a live-announced result count, and a clear-all action.

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

Code

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

Usage.tsx

"use client";

import { FilterBar } from "@/components/ui/klyv-filter-bar";
import { Card } from "@/components/ui/klyv-filter-bar-utils/card";
import { Surface } from "@/components/ui/klyv-filter-bar-utils/surface";
import { Text } from "@/components/ui/klyv-filter-bar-utils/text";

const filters = [
  { value: "subscriptions", label: "Subscriptions", count: 5 },
  { value: "transfers", label: "Transfers", count: 12 },
  { value: "cashback", label: "Cashback", count: 3 },
  { value: "bills", label: "Bills", count: 7 },
];

export default function FilterBarDemo() {
  const active = ["subscriptions"];
  const count = filters
    .filter((filter) => active.includes(filter.value))
    .reduce((total, filter) => total + filter.count, 0);

  return (
    <Card className="w-full max-w-xl gap-3">
      <FilterBar
        label="Transaction filters"
        filters={filters}
        value={active}
        onValueChange={() => undefined}
        resultCount={count}
        resultLabel="transactions"
        onClear={() => undefined}
      />
      <Surface variant="sunken" padding="md">
        <Text size="caption" tone="faint">
          The list below would now show{" "}
          <strong className="font-bold text-ink">{count}</strong> rows. The
          count is a live region, so the change is announced.
        </Text>
      </Surface>
    </Card>
  );
}