Timeline

Follow what happened, newest first, grouped by day.

npx shadcn@latest add @silicon-ui/timeline
datafeedactivity
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/timeline

Manually

  1. Install the dependencies.

    npm install lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/timeline/timeline.tsx
    • components/silicon-ui/timeline/timeline.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { Timeline } from "@/components/silicon-ui/timeline/timeline";

API reference

PropTypeDefault
events*

Updates in any order; the newest shows first.

TimelineEvent[]—
now*

Reference time for relative labels and day groups, in epoch milliseconds. Pass a ticking clock to keep labels fresh.

number—
label*

Accessible name for the feed.

string—
timeZone

Time zone for day groups and clock times. Fixed by default so server and client agree.

string"UTC"
localestring"en-US"
maxHeight

Height of the scrolling area. Without it the feed grows with the page and reveals on page scroll.

number | string—
scrollToNew

Scroll back to the top when a new update arrives while the feed is scrolled down.

booleantrue
defaultExpandedstring[][]
headingLevel

Heading level for the day labels.

2 | 3 | 4 | 5 | 6

64532

3
classNamestring—

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens