The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!

Timeline

A component for displaying a series of events in chronological order.

First Event
This is a basic timeline event
Second Event
This is the last event in the timeline

Usage

Import the Timeline components from @bun-ui/react and use them in your project:

import {
  Timeline,
  TimelineItem,
  TimelineSeparator,
  TimelineIndicator,
  TimelineConnector,
  TimelineContent,
  TimelineTitle,
  TimelineDescription,
} from "@bun-ui/react"

<Timeline>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineIndicator />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>
      <TimelineTitle>Event Title</TimelineTitle>
      <TimelineDescription>Event Description</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
</Timeline>

Examples

Project Timeline

A timeline showing project milestones and progress.

Project Kickoff
January 15, 2024
Design Phase
February 1, 2024
Development Started
March 1, 2024
Launch
April 15, 2024

Custom Indicators

Customize the timeline indicators with different styles and colors.

Completed
Task completed successfully
In Progress
Currently working on this task
Blocked
Task is blocked by dependencies

Left-Aligned Timeline

Project Kickoff
January 15, 2024
Initial project setup and team formation. Defined project scope and objectives.
Design Phase
February 1, 2024
Completed UI/UX design and created component library. Established design system.
Development Started
March 1, 2024
Core features implementation. Set up CI/CD pipeline and development environment.
Testing Phase
April 1, 2024
Comprehensive testing and bug fixes. Performance optimization and security audit.
Production Launch
May 1, 2024
Successfully deployed to production. Monitoring and maintenance phase begins.

Alternating Timeline

Morning Standup
9:00 AM
Team sync completed. Discussed sprint goals and blockers.
Break Time
10:30 AM
Coffee break and team social time.
Documentation Review
11:00 AM
Updated API documentation and reviewed pull requests.
Client Meeting
2:00 PM
Weekly sync with client team to discuss progress.
End of Day Review
5:00 PM
Daily progress review and planning for tomorrow.

Activity Timeline

A timeline showing development activities with custom indicators and rich content.

Sarah Johnson
2 hours ago
Created a new branch feature/timeline-component
featuretimeline
Sarah Johnson
1 hour ago
Added Timeline component with support for different positions and custom indicators
packages/react/src/components/timeline/timeline.tsx
+120 lines added, -0 lines removed
Sarah Johnson
45 minutes ago
Opened pull request #42: Add Timeline component
Pull Request Description
Added a new Timeline component with support for different positions (left, right, alternate) and custom indicators. Includes documentation and examples.
Alex Thompson
30 minutes ago
Added CI checks for the Timeline component
.github/workflows/timeline.yml
+45 lines added, -0 lines removed
Mike Chen
15 minutes ago
Approved and merged pull request #42
Review Comment
Great work on the Timeline component! The implementation is clean and the documentation is thorough. Ready to merge.

Tabs Toast