Components
Timeline
Display events in chronological order with visual connection
Preview
Project started
Initial project setup and planning phase completed.
Design phase
UI/UX design mockups and wireframes created.
Development
Core application development and feature implementation.
Testing & Launch
Quality assurance testing and production deployment.
Installation
Usage
Examples
Horizontal
Display timeline events horizontally.
Planning
Research and planning
Development
Build core features
Testing
Quality assurance
Launch
Production release
Stepper
Use timeline as a step progress indicator.
Setup Process
Complete the following steps to set up your account
Account Setup
Create your account and verify your email address
Profile Information
Complete your profile with personal details
Preferences
Set your preferences and notification settings
Review & Confirm
Review your information and confirm your setup
Step 1 of 4
API Reference
The Timeline component is a custom implementation. It does not extend Base UI.
Timeline Props
- defaultValue:
number(default:1) - Initial active step (uncontrolled) - value:
number- Active step (controlled) - onValueChange:
(value: number) => void- Callback when active step changes - orientation:
"horizontal" | "vertical"(default:"vertical") - Timeline layout direction
TimelineItem Props
- step:
number(required) - Step number for this timeline item