Timeline
Arrange events along a chronological line.
Preview
Import
import { Timeline } from "@sigil-ui/components";Usage
<Timeline
entries={[
{ date: "JAN 08", title: "Token schema", description: "The design contract was defined." },
{ date: "FEB 14", title: "Preset compiler", description: "All themes began sharing one pipeline." },
{ date: "MAR 22", title: "Stable release", description: "Docs and packages shipped together." },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
entries | TimelineEntry[] | — | Timeline entries. |
variant | "vertical" | "horizontal" | vertical | Layout variant. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-full | Radius full |
--s-primary | Primary |
--s-border | Border |
--s-font-mono | Font mono |
--s-text-muted | Text muted |
--s-text | Text |