Tick Meter

A capacity meter drawn as a row of rounded ticks that segments fill in order, with a legend, the filled share and the scale end.

TypeScript Source with Startup & Business plans Light & dark

Seat allocation

How this plan’s seats are assigned across your workspace.

Members64%
Guest reserve12%

76%100%

Unused seats roll over monthly. Manage seats

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 { TickMeterChart } from '@/components/component-kit/items/chart-tick-meter';
2
3export function Example() {
4  return (
5    <TickMeterChart
6      title="Seat allocation"
7      description="How this plan's seats are assigned across your workspace."
8      segments={[
9        { id: 'members', label: 'Members', percent: 64 },
10        { id: 'guests', label: 'Guest reserve', percent: 12 },
11      ]}
12      footer={<span>Unused seats roll over monthly.</span>}
13    />
14  );
15}

Props

Tick Meter properties
Prop	Type	Default	Description
`segments`	`TickMeterSegment[]`	`—`	Segments as percentages, filled from the left in order.
`ticks`	`number`	`48`	Number of ticks across the meter.
`footer`	`ReactNode`	`—`	Help text or link under the meter.

Usage

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

example.tsx

1import { TickMeterChart } from '@/components/component-kit/items/chart-tick-meter';
2
3export function Example() {
4  return (
5    <TickMeterChart
6      title="Seat allocation"
7      description="How this plan's seats are assigned across your workspace."
8      segments={[
9        { id: 'members', label: 'Members', percent: 64 },
10        { id: 'guests', label: 'Guest reserve', percent: 12 },
11      ]}
12      footer={<span>Unused seats roll over monthly.</span>}
13    />
14  );
15}

Prop

Type

Default

Description

segments

TickMeterSegment[]

—

Segments as percentages, filled from the left in order.

ticks

number

48

Number of ticks across the meter.

footer

ReactNode

—

Help text or link under the meter.

Usage

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

example.tsx

1import { TickMeterChart } from '@/components/component-kit/items/chart-tick-meter';
2
3export function Example() {
4  return (
5    <TickMeterChart
6      title="Seat allocation"
7      description="How this plan's seats are assigned across your workspace."
8      segments={[
9        { id: 'members', label: 'Members', percent: 64 },
10        { id: 'guests', label: 'Guest reserve', percent: 12 },
11      ]}
12      footer={<span>Unused seats roll over monthly.</span>}
13    />
14  );
15}

Prop

Type

Default

Description

segments

TickMeterSegment[]

—

Segments as percentages, filled from the left in order.

ticks

number

48

Number of ticks across the meter.

footer

ReactNode

—

Help text or link under the meter.

Tick Meter

A capacity meter drawn as a row of rounded ticks that segments fill in order, with a legend, the filled share and the scale end.

TypeScript Source with Startup & Business plans Light & dark

Seat allocation

How this plan’s seats are assigned across your workspace.

Members64%
Guest reserve12%

76%100%

Unused seats roll over monthly. Manage seats

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 { TickMeterChart } from '@/components/component-kit/items/chart-tick-meter';
2
3export function Example() {
4  return (
5    <TickMeterChart
6      title="Seat allocation"
7      description="How this plan's seats are assigned across your workspace."
8      segments={[
9        { id: 'members', label: 'Members', percent: 64 },
10        { id: 'guests', label: 'Guest reserve', percent: 12 },
11      ]}
12      footer={<span>Unused seats roll over monthly.</span>}
13    />
14  );
15}

Props

Tick Meter properties
Prop	Type	Default	Description
`segments`	`TickMeterSegment[]`	`—`	Segments as percentages, filled from the left in order.
`ticks`	`number`	`48`	Number of ticks across the meter.
`footer`	`ReactNode`	`—`	Help text or link under the meter.