Mirrored Pill Bars

A shadcn chart card where each slot grows up and down from a center line as stacks of small pills, for paired flows like sent and received.

TypeScript Source with Startup & Business plans Light & dark

Webhook traffic

Events today

828

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 { MirroredBarsChart } from '@/components/component-kit/items/chart-mirrored-bars';
2
3export function Example() {
4  return (
5    <MirroredBarsChart
6      title="Webhook traffic"
7      summaryLabel="Events today"
8      series={{ up: { label: 'Delivered' }, down: { label: 'Retried' } }}
9      data={[
10        { label: '6a', up: 40, down: 12 },
11        { label: '9a', up: 95, down: 30 },
12        { label: '12p', up: 120, down: 48 },
13      ]}
14    />
15  );
16}

Props

Mirrored Pill Bars properties
Prop	Type	Default	Description
`data`	`MirroredBarsDatum[]`	`—`	One row per slot with up and down magnitudes.
`series`	`{ up, down }`	`Outbound / Inbound`	Labels and light/dark colors for the two directions.
`pill`	`{ height, gap }`	`5 / 3`	Pill height and spacing in pixels.

Usage

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

example.tsx

1import { MirroredBarsChart } from '@/components/component-kit/items/chart-mirrored-bars';
2
3export function Example() {
4  return (
5    <MirroredBarsChart
6      title="Webhook traffic"
7      summaryLabel="Events today"
8      series={{ up: { label: 'Delivered' }, down: { label: 'Retried' } }}
9      data={[
10        { label: '6a', up: 40, down: 12 },
11        { label: '9a', up: 95, down: 30 },
12        { label: '12p', up: 120, down: 48 },
13      ]}
14    />
15  );
16}

Prop

Type

Default

Description

data

MirroredBarsDatum[]

—

One row per slot with up and down magnitudes.

series

{ up, down }

Outbound / Inbound

Labels and light/dark colors for the two directions.

pill

{ height, gap }

5 / 3

Pill height and spacing in pixels.

Usage

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

example.tsx

1import { MirroredBarsChart } from '@/components/component-kit/items/chart-mirrored-bars';
2
3export function Example() {
4  return (
5    <MirroredBarsChart
6      title="Webhook traffic"
7      summaryLabel="Events today"
8      series={{ up: { label: 'Delivered' }, down: { label: 'Retried' } }}
9      data={[
10        { label: '6a', up: 40, down: 12 },
11        { label: '9a', up: 95, down: 30 },
12        { label: '12p', up: 120, down: 48 },
13      ]}
14    />
15  );
16}

Prop

Type

Default

Description

data

MirroredBarsDatum[]

—

One row per slot with up and down magnitudes.

series

{ up, down }

Outbound / Inbound

Labels and light/dark colors for the two directions.

pill

{ height, gap }

5 / 3

Pill height and spacing in pixels.

Mirrored Pill Bars

A shadcn chart card where each slot grows up and down from a center line as stacks of small pills, for paired flows like sent and received.

TypeScript Source with Startup & Business plans Light & dark

Webhook traffic

Events today

828

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 { MirroredBarsChart } from '@/components/component-kit/items/chart-mirrored-bars';
2
3export function Example() {
4  return (
5    <MirroredBarsChart
6      title="Webhook traffic"
7      summaryLabel="Events today"
8      series={{ up: { label: 'Delivered' }, down: { label: 'Retried' } }}
9      data={[
10        { label: '6a', up: 40, down: 12 },
11        { label: '9a', up: 95, down: 30 },
12        { label: '12p', up: 120, down: 48 },
13      ]}
14    />
15  );
16}

Props

Mirrored Pill Bars properties
Prop	Type	Default	Description
`data`	`MirroredBarsDatum[]`	`—`	One row per slot with up and down magnitudes.
`series`	`{ up, down }`	`Outbound / Inbound`	Labels and light/dark colors for the two directions.
`pill`	`{ height, gap }`	`5 / 3`	Pill height and spacing in pixels.