UI by hampton.io

Back to Components

Display

Timeline

Vertical timeline with animated steps and status styling for sequences or schedules.

1
Kickoff
Week 1
Align stakeholders and goals
2
Design
Week 2
Finalize interface and states
3
Launch
Week 3
Release to early adopters

Dependencies

clsx
tailwind-merge
framer-motion

Files

components/ui/timeline.tsx

Installation

Using shadcn CLI

npx shadcn add timeline --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge framer-motion