Default
- Done: TodayStart your free trial and get every feature.
- Next: Day 5We remind you that the trial is ending.
- Day 7Your plan starts. Cancel any time before.
Timeline
What happens when: a vertical list of dated steps (a trial: today, a reminder, the first charge) with done, current and upcoming nodes on a rail.
- Pro, mobile
- Version 2.0.0-rc.1
- APG pattern: List (ordered)
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Delivery
- Done: OrderedMonday 26 October
- Done: DispatchedTuesday 27 October
- Next: Out for delivery
- Delivered
Show the codeHide the code
Delivery, code
<Timeline
'aria-label'="Delivery progress"
items={[
{ title: 'Ordered', detail: 'Monday 26 October', state: 'done' },
{ title: 'Dispatched', detail: 'Tuesday 27 October', state: 'done' },
{ title: 'Out for delivery', state: 'current' },
{ title: 'Delivered', state: 'upcoming' },
]}
/>Tokens
The 12 design tokens Timeline reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.action.primary | … | --sd-color-action-primary |
| color.bg.brand-subtle | … | --sd-color-bg-brand-subtle |
| color.bg.canvas | … | --sd-color-bg-canvas |
| color.border.control | … | --sd-color-border-control |
| color.border.default | … | --sd-color-border-default |
| color.icon.brand | … | --sd-color-icon-brand |
| color.text.default | … | --sd-color-text-default |
| color.text.on-primary | … | --sd-color-text-on-primary |
| color.text.secondary | … | --sd-color-text-secondary |
| radius.full | … | --sd-radius-full |
| spacing.gap.md | … | --sd-spacing-gap-md |
| spacing.inset.md | … | --sd-spacing-inset-md |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/timelineThen import it
import { Timeline } from "@/components/ui/timeline"Props
| Prop | Type | What it does |
|---|---|---|
itemsrequired | TimelineItem[] | The steps, in order. |
aria-label | stringDefault 'Timeline' | Names the list. Default "Timeline". |
className | string |
When to use it
Use it for
- Explaining a free trial before someone starts it
- Delivery or onboarding progress people read, not act on
Use something else for
- Steps people move through: use Steps
- A history of events with times: use a list or Table
Accessibility
Screen readers announce "How your free trial works, list, 3 items. Done: Today, Start your free trial and get every feature. Next: Day 5, current step ...".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.3.2.
Not interactive: density changes nothing.
What your product still has to do
- Give the list a name (aria-label) that says what it times ("How your free trial works")
- Say the dates in the titles or details; the nodes only show order and state
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 60 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 235 text runs: 0 below 7:1, lowest 11.42:1 |
| Target size | 0 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 0 focus stops in 0 browser engines: all pass |
Manual passes with VoiceOver and NVDA haven’t been done yet.
In Figma
The Figma component is Timeline. The Figma library isn’t published yet.
Figma to code: Items → items; nested Item → items.