Ink Timeline

A process timeline drawn in ink — the rail fills as you scroll, and each step ignites the moment its dot crosses the center of the viewport.

npx shadcn@latest add https://mellowui.com/r/ink-timeline.json

Step 01
Pick a component
Browse the registry and find the gesture your page is missing. Every entry ships with a live demo and full source.
Step 02
Install with the CLI
One shadcn command copies the file into your project. No package, no lock-in — the code is yours from the first second.
Step 03
Theme it with tokens
Components read the ink and background CSS variables, so they follow your light and dark themes without touching a line.
Step 04
Tune the motion
Spring stiffness, stagger, distance — every value is a prop or a constant at the top of the file. Make it yours.
Step 05
Ship it
Reduced-motion fallbacks and keyboard support are already in. Deploy without the accessibility audit surprise.

Scroll inside the frame — steps ignite as they cross the center

Installation

▸ Run the following command

npx shadcn@latest add https://www.mellowui.com/r/ink-timeline.json

▸ Or install manually

Prop	Type	Default	Description
steps	InkTimelineStep[]	—	Timeline entries — title, optional kicker and description.
scrollContainerRef	RefObject<HTMLElement \| null>	—	Scrollable ancestor when embedded; defaults to the window.
stiffness	number	240	Ignite spring stiffness — higher snaps the dot in harder.
damping	number	28	Ignite spring damping — lower overshoots more.
className	string	—	Additional CSS classes.