Range Sparkline Tile

A stat tile with a headline figure, a range sparkline of vertical pills per period, and a signed delta with an icon.

TypeScript Source with Startup & Business plans Light & dark

Active sessions

48.2K

Hourly range · last 12 days

8.4%from last week

Checkout latency

412 ms

p50–p95 · last 12 days

3.1%from last week

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 { Activity } from 'lucide-react';
2import { RangeSparklineTile } from '@/components/component-kit/items/chart-range-sparkline-tile';
3
4export function Example() {
5  return (
6    <RangeSparklineTile
7      icon={Activity}
8      title="Active sessions"
9      value="48.2K"
10      delta={8.4}
11      ranges={[{ low: 30, high: 62 }, { low: 41, high: 70 }, { low: 25, high: 58 }, { low: 36, high: 64 }]}
12    />
13  );
14}

Props

Range Sparkline Tile properties
Prop	Type	Default	Description
`value`	`ReactNode`	`—`	The headline figure, already formatted.
`ranges`	`RangePoint[]`	`—`	Low and high per period.
`delta`	`number`	`—`	Signed percentage change.
`upIsGood`	`boolean`	`true`	Whether an increase should read as good.

Usage

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

example.tsx

1import { Activity } from 'lucide-react';
2import { RangeSparklineTile } from '@/components/component-kit/items/chart-range-sparkline-tile';
3
4export function Example() {
5  return (
6    <RangeSparklineTile
7      icon={Activity}
8      title="Active sessions"
9      value="48.2K"
10      delta={8.4}
11      ranges={[{ low: 30, high: 62 }, { low: 41, high: 70 }, { low: 25, high: 58 }, { low: 36, high: 64 }]}
12    />
13  );
14}

Prop

Type

Default

Description

value

ReactNode

—

The headline figure, already formatted.

ranges

RangePoint[]

—

Low and high per period.

delta

number

—

Signed percentage change.

upIsGood

boolean

true

Whether an increase should read as good.

Usage

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

example.tsx

1import { Activity } from 'lucide-react';
2import { RangeSparklineTile } from '@/components/component-kit/items/chart-range-sparkline-tile';
3
4export function Example() {
5  return (
6    <RangeSparklineTile
7      icon={Activity}
8      title="Active sessions"
9      value="48.2K"
10      delta={8.4}
11      ranges={[{ low: 30, high: 62 }, { low: 41, high: 70 }, { low: 25, high: 58 }, { low: 36, high: 64 }]}
12    />
13  );
14}

Prop

Type

Default

Description

value

ReactNode

—

The headline figure, already formatted.

ranges

RangePoint[]

—

Low and high per period.

delta

number

—

Signed percentage change.

upIsGood

boolean

true

Whether an increase should read as good.

Range Sparkline Tile

A stat tile with a headline figure, a range sparkline of vertical pills per period, and a signed delta with an icon.

TypeScript Source with Startup & Business plans Light & dark

Active sessions

48.2K

Hourly range · last 12 days

8.4%from last week

Checkout latency

412 ms

p50–p95 · last 12 days

3.1%from last week

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 { Activity } from 'lucide-react';
2import { RangeSparklineTile } from '@/components/component-kit/items/chart-range-sparkline-tile';
3
4export function Example() {
5  return (
6    <RangeSparklineTile
7      icon={Activity}
8      title="Active sessions"
9      value="48.2K"
10      delta={8.4}
11      ranges={[{ low: 30, high: 62 }, { low: 41, high: 70 }, { low: 25, high: 58 }, { low: 36, high: 64 }]}
12    />
13  );
14}

Props

Range Sparkline Tile properties
Prop	Type	Default	Description
`value`	`ReactNode`	`—`	The headline figure, already formatted.
`ranges`	`RangePoint[]`	`—`	Low and high per period.
`delta`	`number`	`—`	Signed percentage change.
`upIsGood`	`boolean`	`true`	Whether an increase should read as good.