Skip to content
MIZU.

Timeline

Events connected by a fine thread, with the present kept distinct.

View .md

Live — this one is real

  1. Foundations repaired

    Keyboard and motion contracts checked.

  2. Package validated

    Installed mizu-ui in a fresh app.

  3. Release review

Usage

tsx
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

Add this component to your project with the shadcn CLI. The command copies its source into your configured UI directory, with base.css, Mizu’s tokens, and the stylesheets that hold its rules. Each rule lives in one stylesheet, so components you add together never repeat CSS. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.

sh
npx shadcn@latest add 0xuser64bit/mizu/timeline

Every component imports from its own path, its name in kebab case. Its source, data/Records.tsx, also holds DescriptionList, Stat and ComparisonTable. Each has its own command and path; adding one after this copies only its small entry file. To paste the example, replace its mizu-ui import with:

tsx
import { Timeline } from "@/components/ui/mizu/timeline";

For npm imports, 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. A Server Component: it renders on the server, with no client JavaScript of its own.

Inspect data/Records.tsx

Source is included in the npm package under src/data/Records.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
itemsTimelineEvent[]—Stable id, title, time, optional dateTime, body and state.
labelstring"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.

Works alongside

DataTableDescriptionListStatBarChart