Timeline
An ember line that draws itself as you scroll, with each entry rising into view.
- Category: Display
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Timeline
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | { date: string; title: string; body?: ReactNode }[] | — | |
container | RefObject<HTMLElement> | — |
About Timeline
Timeline draws an accent line as you scroll down the page, with each entry rising into view as it arrives. Histories and roadmaps finally feel like a journey.
Timeline is a display component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Timeline
- Company history on about pages.
- Product roadmaps.
- Changelogs.
- Case-study steps.
How it works
The line's scale follows scroll progress through the section and each entry uses a whileInView reveal. It is an ordered list underneath.
Interactive parts are buttons or links with accessible names, decorative layers are hidden from assistive tech, and everything is reachable by keyboard. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Timeline
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
Style it with className like any other element. It only uses your theme's tokens, so it follows light and dark mode without extra work.
- items.
- container (RefObject<HTMLElement>).
Goes well with Timeline
Timeline is already composed into a ready-made section, so you can see it in context or install the whole block.
- Team Founders: Team section
- Accordion: An animated React accordion: height springs open, the chevron flips, content fades in
- Number Ticker: An animated React number ticker: each digit rolls on its own wheel
- Marquee: A CSS-only infinite React marquee with faded edges and pause on hover
- Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
- Theme Toggle: A React dark mode toggle: the sun eclipses into a moon and the theme spreads out
Install Timeline
npx shadcn@latest add https://charcoalui.com/r/timeline.jsonTimeline is free and MIT licensed. The command copies timeline.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Scroll Text, a Pro piece: Words light up one by one as the paragraph scrolls through the viewport.
Frequently asked questions
- Does the timeline line draw on scroll?
- Yes. The accent line scales with your scroll through the section and each entry rises into view as it arrives.
- How do I install Timeline?
- Run npx shadcn@latest add https://charcoalui.com/r/timeline.json. The shadcn CLI copies timeline.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Timeline free for commercial use?
- Yes. Timeline is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Timeline work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Timeline?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Timeline's props and source and get_install_command returns the exact command.