Components

Timeline

A Gantt-style chart: one bar per item from its start to its end date, on a week or month scale, with a today marker. Bars open on click or Enter and move with drag or the arrow keys.

Usage

Use it for:

  • Roadmaps and project plans: phases, milestones, tasks with dates.
  • Seeing overlap and what is late against today.

Avoid it when:

  • Picking a date: use DatePicker.
  • Events in a month grid: use Calendar.
  • Items without dates, moving through stages: use KanbanBoard.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Examples

Movable roadmap

By week
  • Website relaunch
  • WEB-4Information architecture
  • WEB-12Pricing page
  • WEB-11Accessibility review
Enter opens. Left and right arrows move by a day, with Shift by a week.

Click a bar, or focus it and press Enter. ← / → move it.

Month scale, read-only

By month
  • Website relaunch
  • WEB-4Information architecture
  • WEB-12Pricing page
  • WEB-11Accessibility review

API Reference

Timeline

A focusable scroll region (role="region"); other <div> props are forwarded.

PropTypeDefault
items
TimelineItem[]
scale
"week""month"
"week"
today
Date
onOpen
(item) => void
onChange
(change: TimelineChange) => void
label
string
"Timeline"
corner
ReactNode
className
string

Accessibility

Keyboard:

  • Tab: moves through the bars in row order (focusing a bar scrolls it into view).
  • Enter / Space on a bar: onOpen.
  • ← / → on a bar: moves it a day; with Shift, a week (only with onChange; the bar’s description says so).

ARIA and semantics:

  • Bars are buttons named “WEB-12 Pricing page: Oct 6 to Oct 24, In progress”; the visible date text is hidden to avoid repeating it.
  • Moves are announced in a polite live region (“Moved Pricing page to Oct 7 – Oct 25.”).
  • The scale, week lines and today marker are decorative (aria-hidden); the today label is red text on the page background (AA contrast).
  • The label column stays visible while the chart scrolls sideways; at 320px it is 144px wide.
© 2026 Motion. Internal documentation.