Time Stack
betaCards receding in depth, stepped through with a timeline scrubber, the mouse wheel or the arrow keys.
- Display
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add time-stacknpm packages installed: class-variance-authority.
import { TimeStack } from "@/components/ui/time-stack";Default
Gallery
Controlled
Right To Left
<TimeStack>
| Prop | Type | Default |
|---|---|---|
items (required)Newest first: index 0 is the front of the stack and the bottom of the timeline. | TimeStackItem[] | — |
defaultIndex | number | 0 |
hoverScrubSelect as the pointer moves over the timeline, as in the source, rather than on press. | boolean | false |
index | number | — |
onIndexChange | (index: number) => void | — |
scrubberLabelAccessible name of the scrubber. | string | "Timeline" |
size | "sm" | "md" | "lg" | "md" |
tone | "media" | "mono" | "media" |
wheelStep through with the mouse wheel over the stack. | boolean | true |
Plus every attribute of <section> except children.
The scrubber is a vertical role="slider" whose aria-valuetext names the moment ("1w ago: Forest Trail"). Newest is at the bottom, so ArrowUp/ArrowRight go back in time as a vertical slider requires; ArrowDown/Left, Page Up/Down, Home and End work too. Only the current card is exposed (a labelled group); the cards behind and before it are inert. Wheel steps are announced through a polite status, and the wheel only captures scrolling while there is a card to step to. Motion stops under reduced motion.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes