# Checkout Funnel

> bklit's layered funnel chart walking visitors to paid: switch weeks to compare, hover a stage to see how many it kept and lost, and the biggest drop-off is called out underneath.

- Page: https://devl.dev/components/bklit-funnel-chart
- Kind: component · Charts
- Install: `npx shadcn@latest add https://ui.bklit.com/r/funnel-chart.json`
- coss ui: segmented-control
- By bklit (MIT): https://ui.bklit.com

## Usage

```tsx
import { CheckoutFunnelCard, type FunnelPeriod } from "@/components/bklit-funnel-chart";

const periods: FunnelPeriod[] = [
  {
    id: "week",
    label: "This week",
    stages: [
      { label: "Visits", value: 48210 },
      { label: "Product", value: 21480 },
      { label: "Cart", value: 6920 },
      { label: "Checkout", value: 2870 },
      { label: "Paid", value: 1964 },
    ],
  },
  {
    id: "last",
    label: "Last week",
    stages: [
      { label: "Visits", value: 45130 },
      { label: "Product", value: 19020 },
      { label: "Cart", value: 5410 },
      { label: "Checkout", value: 2010 },
      { label: "Paid", value: 1268 },
    ],
  },
];

export default function BklitFunnelChartDemo() {
  return <CheckoutFunnelCard periods={periods} />;
}
```