Sleep timeline

Displays supplied sleep, wake, and unknown intervals with explicit time labels, monochrome segments, and a complete text record.

Preview

Last night

22:3006:30

Asleep22:30 to 02:00
Awake02:00 to 02:15
Asleep02:15 to 06:30

In action

A record of the night

6–7 September 2026

Recorded sleepLocal time, including a gap in the recording

22:3006:30

Asleep22:30 to 02:15
Awake02:15 to 02:30
Unrecorded02:30 to 02:45
Asleep02:45 to 06:30

When to use

Use it for

Display-only sleep records from a caller-owned source, using minute offsets on a single timeline.
Explicit boundary labels that include the date and timezone when needed.
Gaps remain unrecorded; supplied unknown intervals retain their unknown state.

Not for

Inferring sleep stages, diagnosis, or sleep quality from the supplied intervals.
Silently clipping out-of-window records, merging overlaps, or filling missing time with sleep.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { SleepTimeline } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/sleep-timeline.

2. Vendor the source

npx @noorddev/vlak-cli add sleep-timeline

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/sleep-timeline.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { SleepTimeline } from "@noorddev/vlak-react";

<SleepTimeline label="Last night" description="Recorded intervals, local time" start={0} end={480} startLabel="22:30" endLabel="06:30" intervals={[
  { id: "sleep-1", start: 0, end: 240, startLabel: "22:30", endLabel: "02:30", state: "asleep" },
  { id: "wake-1", start: 240, end: 255, startLabel: "02:30", endLabel: "02:45", state: "awake" },
  { id: "sleep-2", start: 270, end: 480, startLabel: "03:00", endLabel: "06:30", state: "asleep" },
]} />

Props

SleepTimeline

Supplied sleep and wake intervals, with gaps exposed as unrecorded time.

Prop	Type	Description
`label`required	`ReactNode`
`description`	`ReactNode`
`intervals`required	`SleepInterval[]`
`start`required	`number`	Visible window in minutes. All intervals must fit within it.
`end`required	`number`
`startLabel`required	`string`
`endLabel`required	`string`

Also accepts HTMLAttributes<HTMLElement>.

Accessibility

A native figure and caption introduce the record. The decorative chart is hidden from assistive technology.
Every supplied interval and unrecorded gap has a visible text equivalent with start and end labels.
Overlapping, invalid, or out-of-window intervals produce a visible explanation and suppress the chart while preserving supplied text.
Sleep, wake, and unknown segments use distinct monochrome fills and boundaries; forced-colors retains a dotted unknown marker.
The forwarded ref and native attributes reach the figure.

Markup

<figure class="rs-sleep-timeline"><figcaption class="rs-sleep-timeline-caption"><span class="rs-sleep-timeline-label">Last night</span></figcaption><div class="rs-sleep-timeline-chart" aria-hidden="true"><span class="rs-sleep-timeline-segment rs-sleep-timeline-asleep" style="width:75%"></span><span class="rs-sleep-timeline-segment rs-sleep-timeline-awake" style="width:25%"></span></div><div class="rs-sleep-timeline-axis"><span>22:30</span><span>06:30</span></div><ul class="rs-sleep-timeline-list"><li class="rs-sleep-timeline-interval"><span>Asleep</span><span class="rs-sleep-timeline-period">22:30 to 04:30</span></li><li class="rs-sleep-timeline-interval"><span>Awake</span><span class="rs-sleep-timeline-period">04:30 to 06:30</span></li></ul></figure>

Classes

.rs-sleep-timeline.rs-sleep-timeline-caption.rs-sleep-timeline-label.rs-sleep-timeline-description.rs-sleep-timeline-chart.rs-sleep-timeline-segment.rs-sleep-timeline-asleep.rs-sleep-timeline-awake.rs-sleep-timeline-unknown.rs-sleep-timeline-axis.rs-sleep-timeline-list.rs-sleep-timeline-interval.rs-sleep-timeline-period