Timeline
Events connected by a fine thread, with the present kept distinct.
Live — this one is real
Foundations repaired
Keyboard and motion contracts checked.Package validated
Installed mizu-ui in a fresh app.Release review
Usage
import { Timeline } from "mizu-ui";
export function Example() {
return (
<Timeline
label="Illustrative release timeline"
items={[
{
id: "a",
title: "Foundations repaired",
time: "Monday",
state: "complete",
body: "Keyboard and motion contracts checked.",
},
{
id: "b",
title: "Package validated",
time: "Tuesday",
state: "current",
body: "Installed mizu-ui in a fresh app.",
},
{
id: "c",
title: "Release review",
time: "Wednesday",
state: "upcoming",
},
]}
/>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect data/Records.tsx
Source is included in the npm package under src/data/Records.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | TimelineEvent[] | — | Stable id, title, time, optional dateTime, body and state. |
| label | string | "Timeline" | List name. |
Accessibility
Ordered list and time elements preserve chronology. State is a visual aid, so include state information in the event content when essential.
Motion
Static connective geometry.