All components (204)
Timeline
Dates and time · Timeline · .amset-timeline
What it is and when to use it
The work plan in bars: what goes from day such-and-such to day so-and-so and how much of it is done. A home-made Gantt, without dependencies between tasks. As in the rest of the charts in the library, the drawing is the adornment and the table is the data: below goes a real table with dates, duration and progress, hidden from view unless requested.
When to use it
- The plan for a launch, a collection, a construction job: a few tasks with a start date (
from) and an end date (to). progress(from 0 to 100) draws the finished part inside the bar;toneon a task colors it with the common vocabulary (accent,info,success,warning,errororneutral), andtoneon the timeline colors all those that do not bring their own.detailgoes in the table.rangeso that two timelines share a scale, andtableVisiblewhen the table also has to be seen.withToday={false}removes the today line.
When not to
- Events of one day in the month:
MonthAgenda. - A process in phases that advances in order:
Steps. - Comparing quantities:
BarChart.
Keyboard: it is not interactive and has no Tab stops. The bars cannot be pressed: they are part of an image.
Accessibility: the drawing is an image with the summary written in its name ("Autumn collection plan. 5 tasks, from September 1 to October 15. The longest, Casting, 16 days."). The table is always in the DOM with its caption, even if it is not seen. The months and the today line are decoration. The bars are measured in calendar days counted in UTC, so that the clock change does not introduce a 23-hour day and throw the width off.
Sizes: bars 20, 24 or 32 px tall, with the names column at 7, 9 or 11 rem and its font.
Dates on the bar: the span as the language writes it ("Sep 10–25", "Sep 21 – Oct 5", "Oct 15" if it is a single day). If it does not fit it ends in "…", and on a bar narrower than 3 rem it is not drawn; in full it is in the bar's title and in the table.
Motion: the bars enter growing from their start, what is done grows behind them and the today line appears once they have arrived. If the dates change, the bars slide to their place. With reduced motion, none of that.
Fine-tuning: --amset-timeline-name is the width of the names column: the month header, the bars and the today line are placed starting from it. Also -height (the bars), -slot (between rows), -font (the names), -description (months, dates and table), -radius, -track (the background of each row), -bar and -bar-ink (the fill and the color of its dates), -progress (what is done, on top of the bar), -today and -today-width.
Context: it goes inside LocaleProvider (or AmsetProvider), which decides how months and dates are written.
What it looks like
| Task | Starts | Ends | Days | Done |
|---|---|---|---|---|
| Design | Oct 1 | Oct 10 | 10 | — |
| Development | Oct 8 | Oct 28 | 21 | — |
| Tests | Oct 24 | Nov 4 | 12 | — |
<Timeline
label="Project plan"
tasks={[
{ key: 'dis', title: 'Design', from: '2026-10-01', to: '2026-10-10' },
{ key: 'dev', title: 'Development', from: '2026-10-08', to: '2026-10-28' },
]}
/>Props
Import it with import { Timeline } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
labelrequired | string | What the plan is about. Required: it names the whole drawing. |
tasksrequired | readonly TimelineTask[] | — |
className | string | Merged with the library classes; it does not replace them. |
empty | string | — |
range | DateRange | Manual range, so that two timelines share a scale. |
size | "sm" | "md" | "lg" | Bars of 20, 24 or 32 px, with their column of names and their font. |
tableVisible | boolean | Also shows the table. For the screen reader it is always there. |
today | Date | — |
tone | "neutral" | "accent" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | The color of the bars that do not bring their own `tone`. `accent` by default. |
withToday | boolean | Marks today's date with a line. |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
CSS variables
These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.
| Variable | Default |
|---|---|
--amset-timeline-name | 9rem |
--amset-timeline-height | 1.5rem |
--amset-timeline-slot | var(--amset-space-2) |
--amset-timeline-font | var(--amset-text-sm) |
--amset-timeline-description | var(--amset-text-xs) |
--amset-timeline-radius | var(--amset-radius-sm) |
--amset-timeline-track | var(--amset-surface-2) |
--amset-timeline-bar | var(--amset-accent) |
--amset-timeline-bar-ink | var(--amset-accent-ink) |
--amset-timeline-progress | color-mix(in oklab, var(--amset-highlight) 30%, transparent) |
--amset-timeline-today | var(--amset-error) |
--amset-timeline-today-width | 2px |
How to change it
.amset-timeline {
--amset-timeline-name: ...;
--amset-timeline-height: ...;
}In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: