A vertical or horizontal timeline for listing a sequence of dated moments, each with a marker dot and freeform content.
import Timeline from "@/components/ui/timeline";
const moments = [
{
title: "The ground is laid",
body: "Warm paper, ambient shade — the page rests before it speaks.",
},
{
title: "Ink is set",
body: "Type carries the hierarchy; pigment waits for meaning.",
},
{
title: "Light is timed",
body: "Shadows trail their fills — light needs time.",
},
];
export default function TimelineDemo() {
return (
<div
style={{
background: "var(--bs-color-surface-1)",
color: "var(--bs-color-text-primary)",
padding: "2rem",
borderRadius: "var(--bs-radius-lg)",
}}
>
<Timeline.Root style={{ maxWidth: "34rem" }}>
{moments.map((moment) => (
<Timeline.Item key={moment.title}>
<Timeline.Marker />
<Timeline.Content>
<p style={{ margin: 0, fontWeight: 600 }}>{moment.title}</p>
<p style={{ margin: 0 }}>{moment.body}</p>
</Timeline.Content>
</Timeline.Item>
))}
</Timeline.Root>
</div>
);
}
