Timeline
A compound component timeline with center/left/right alignment, motion animations, and server-compatible skeleton. Features iconPosition prop to show icons on timeline dots or in cards. Uses Timeline.Item, Timeline.Card, Timeline.Header, and Timeline.Dot sub-components.
Installation
$ npx shadcn@latest add @orecus/timelineComponent
Timeline component for displaying chronological events with cards, icons, and customizable layouts.
Center Alignment (Compound API)
Leading frontend development for enterprise applications.
- •Architected a new component library
- •Mentored junior developers
Built and maintained web applications from scratch.
- •Launched 3 products
- •Reduced load time by 40%
Bachelor's degree with focus on software engineering.
Left Alignment
Leading frontend development for enterprise applications.
- •Architected a new component library
- •Mentored junior developers
Built and maintained web applications from scratch.
- •Launched 3 products
- •Reduced load time by 40%
Props
| Prop | Type | Default | Description |
|---|---|---|---|
alignment | 'center' | 'left' | 'right' | 'center' | Timeline line position |
color | ThemeColor | 'primary' | Theme color for line, dots, and connectors |
iconPosition | 'dot' | 'card' | 'card' | Where icons are displayed - on timeline dot or in card header |
cardType | CardType | 'normal' | Default card style for Timeline.Card |
cardHoverEffect | HoverEffect | 'lift' | Default hover effect for Timeline.Card |
animation | 'slide' | 'fade' | 'none' | 'slide' | Animation style for items appearing |
className | string | — | Additional CSS classes for the container |
itemClassName | string | — | Additional CSS classes for each timeline item wrapper |
lineClassName | string | — | Additional CSS classes for the vertical line |
Compound Components
Timeline.Item
A timeline entry that positions content relative to the timeline line.
| Prop | Type | Default | Description |
|---|---|---|---|
data | TimelineItemData | — | Item data for default card rendering |
index | number | 0 | Item index for animation stagger and alternating layout in center mode |
color | ThemeColor | — | Override color for this item's dot |
className | string | — | Additional CSS classes |
children | ReactNode | — | Custom content (Timeline.Card, Timeline.Header, etc.) |
Timeline.Card
The card component that wraps timeline item content. Integrates with the Card component.
| Prop | Type | Default | Description |
|---|---|---|---|
data | TimelineItemData | — | Item data for default content rendering |
type | CardType | — | Card type override (inherits from Timeline root) |
hoverEffect | HoverEffect | — | Hover effect override (inherits from Timeline root) |
showIcon | boolean | — | Override whether to show icon in card header |
className | string | — | Additional CSS classes |
children | ReactNode | — | Custom card content (overrides data rendering) |
Timeline.Header
Header component for use inside Timeline.Card. Wraps the Header component with timeline-specific additions.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | The main title text |
description | string | — | The description text |
icon | ReactNode | LucideIcon | — | Icon to display |
date | string | — | Date/time display |
duration | string | — | Duration display |
className | string | — | Additional CSS classes |
Timeline.Dot
The dot/marker on the timeline. Automatically rendered by Timeline.Item but can be customized.
| Prop | Type | Default | Description |
|---|---|---|---|
color | ThemeColor | — | Override the dot color |
icon | ReactNode | LucideIcon | — | Icon to display when iconPosition='dot' |
className | string | — | Additional CSS classes |
Timeline.Skeleton
Server-compatible loading skeleton for the timeline.
| Prop | Type | Default | Description |
|---|---|---|---|
items | number | 3 | Number of skeleton items to display |
alignment | 'center' | 'left' | 'right' | 'center' | Timeline alignment to match |
showIcon | boolean | true | Show icon skeleton in card header |
showTags | boolean | true | Show tags skeleton |
showHighlights | boolean | true | Show highlights skeleton |
className | string | — | Additional CSS classes |