Skip to content
Twentyfirst UIPro

Sleep Chart

Life · SleepChart, Panel

View as Markdown

A night as sleep stages over time, one lane per stage (awake, REM, light, deep), with the time asleep and the time per stage.

  • segments are { stage, start, end } in order; times as Date, ISO string or timestamp.
  • The chart has one accessible description with every total; summary={false} hides the totals.

Last night

Thu 12 → Fri 13 Nov

Asleep 7 h 22 min
  • Awake33 min
  • REM1 h 45 min
  • Light3 h 52 min
  • Deep1 h 45 min

Props

SleepChart

PropTypeNotes
segmentsSleepSegment[]The night in order, from falling asleep to getting up.
label?stringAccessible name (default "Sleep stages").
summary?booleanHide the totals per stage under the chart.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Panel

PropTypeNotes
side?boolean
title?string
subtitle?string
action?ReactNode
children?ReactNode
surface?Surface`"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.