Funnel Stages

Stages that taper with their values, each a rounded trapezoid with a surface gap, the value inside and a legend below.

TypeScript Source with Startup & Business plans Light & dark

Hiring pipeline

Applied
Screened
Interviewed
Offer
Hired

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Users } from 'lucide-react';
2import { FunnelStagesChart } from '@/components/component-kit/items/chart-funnel-stages';
3
4export function Example() {
5  return (
6    <FunnelStagesChart
7      icon={Users}
8      title="Hiring pipeline"
9      stages={[
10        { id: 'applied', label: 'Applied', value: 1860 },
11        { id: 'screened', label: 'Screened', value: 940 },
12        { id: 'interview', label: 'Interviewed', value: 410 },
13        { id: 'offer', label: 'Offer', value: 96 },
14      ]}
15    />
16  );
17}

Props

Funnel Stages properties
Prop	Type	Default	Description
`stages`	`FunnelStage[]`	`—`	Stages in order, widest first.
`stageHeight`	`number`	`52`	Height of each stage in pixels.
`minWidth`	`number`	`0.45`	Narrowest stage as a fraction of the widest.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Users } from 'lucide-react';
2import { FunnelStagesChart } from '@/components/component-kit/items/chart-funnel-stages';
3
4export function Example() {
5  return (
6    <FunnelStagesChart
7      icon={Users}
8      title="Hiring pipeline"
9      stages={[
10        { id: 'applied', label: 'Applied', value: 1860 },
11        { id: 'screened', label: 'Screened', value: 940 },
12        { id: 'interview', label: 'Interviewed', value: 410 },
13        { id: 'offer', label: 'Offer', value: 96 },
14      ]}
15    />
16  );
17}

Prop

Type

Default

Description

stages

FunnelStage[]

—

Stages in order, widest first.

stageHeight

number

52

Height of each stage in pixels.

minWidth

number

0.45

Narrowest stage as a fraction of the widest.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Users } from 'lucide-react';
2import { FunnelStagesChart } from '@/components/component-kit/items/chart-funnel-stages';
3
4export function Example() {
5  return (
6    <FunnelStagesChart
7      icon={Users}
8      title="Hiring pipeline"
9      stages={[
10        { id: 'applied', label: 'Applied', value: 1860 },
11        { id: 'screened', label: 'Screened', value: 940 },
12        { id: 'interview', label: 'Interviewed', value: 410 },
13        { id: 'offer', label: 'Offer', value: 96 },
14      ]}
15    />
16  );
17}

Prop

Type

Default

Description

stages

FunnelStage[]

—

Stages in order, widest first.

stageHeight

number

52

Height of each stage in pixels.

minWidth

number

0.45

Narrowest stage as a fraction of the widest.

Funnel Stages

Stages that taper with their values, each a rounded trapezoid with a surface gap, the value inside and a legend below.

TypeScript Source with Startup & Business plans Light & dark

Hiring pipeline

Applied
Screened
Interviewed
Offer
Hired

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Users } from 'lucide-react';
2import { FunnelStagesChart } from '@/components/component-kit/items/chart-funnel-stages';
3
4export function Example() {
5  return (
6    <FunnelStagesChart
7      icon={Users}
8      title="Hiring pipeline"
9      stages={[
10        { id: 'applied', label: 'Applied', value: 1860 },
11        { id: 'screened', label: 'Screened', value: 940 },
12        { id: 'interview', label: 'Interviewed', value: 410 },
13        { id: 'offer', label: 'Offer', value: 96 },
14      ]}
15    />
16  );
17}

Props

Funnel Stages properties
Prop	Type	Default	Description
`stages`	`FunnelStage[]`	`—`	Stages in order, widest first.
`stageHeight`	`number`	`52`	Height of each stage in pixels.
`minWidth`	`number`	`0.45`	Narrowest stage as a fraction of the widest.