Timeline
Timeline component displays a sequence of events or steps in chronological order with customizable styling and layout options.
Source
LLM docs
Package
Examples
5
Properties
40
Playground
Basics
Use
Timeline.Item components to communicate major project milestones alongside short descriptions.Loading demo…
import { Text, Timeline } from '@plocks/ui';
const events = [
{
title: 'Discovery',
description: 'Ran stakeholder interviews and confirmed the project scope.',
timestamp: '3 weeks ago',
},
{
title: 'Design',
description: 'Delivered the initial design system and screen mocks.',
timestamp: '2 weeks ago',
},
{
title: 'Development',
description: 'Implementing core flows while gathering early feedback.',
timestamp: 'Last week',
},
{
title: 'Validation',
description: 'QA pass is underway with regression tracking in place.',
timestamp: 'In progress',
},
];
export function Demo() {
return (
<Timeline active={2}>
{events.map((event) => (
<Timeline.Item key={event.title} title={event.title}>
<Text c="secondary" size="xs">
{event.timestamp}
</Text>
<Text size="sm">{event.description}</Text>
</Timeline.Item>
))}
</Timeline>
);
}Alignment Options
Showcase left, right, and centered layouts by toggling
align or centerMode on the timeline.Loading demo…
import { Block, Text, Timeline } from '@plocks/ui';
const phases = [
{ title: 'Kickoff', description: 'Establish scope, goals, and responsible stakeholders.' },
{ title: 'Execution', description: 'Track feature work and unblock contributors.' },
{ title: 'Review', description: 'Collect feedback and iterate on the release candidate.' },
];
export function Demo() {
return (
<Block fullWidth gap="lg">
<Block>
<Text fw="semibold">Left</Text>
<Timeline>
{phases.map((phase) => (
<Timeline.Item key={phase.title} title={phase.title}>
<Text size="sm">{phase.description}</Text>
</Timeline.Item>
))}
</Timeline>
</Block>
<Block>
<Text fw="semibold">Right</Text>
<Timeline align="right">
{phases.map((phase) => (
<Timeline.Item key={phase.title} title={phase.title}>
<Text size="sm">{phase.description}</Text>
</Timeline.Item>
))}
</Timeline>
</Block>
<Block>
<Text fw="semibold">Center</Text>
<Timeline centerMode>
{phases.map((phase) => (
<Timeline.Item key={phase.title} title={phase.title}>
<Text size="sm">{phase.description}</Text>
</Timeline.Item>
))}
</Timeline>
</Block>
</Block>
);
}Bullet Customization
Swap bullet content or adjust bullet sizing using the
bullet and bulletSize props.Loading demo…
import { Block, Icon, Text, Timeline } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Timeline bulletSize={28}>
<Timeline.Item title="Default" />
<Timeline.Item title="Numbered" bullet={<Text size="xs" fw="semibold">1</Text>} />
<Timeline.Item title="Completed" bullet={<Icon name="check" size={12} color="#0E8A16" />} />
<Timeline.Item title="Pending" bullet={<Icon name="clock" size={12} color="#F59E0B" />} />
</Timeline>
</Block>
);
}Line Styling
Demonstrate how
color and lineWidth affect the connector line.Loading demo…
import { Block, Text, Timeline } from '@plocks/ui';
const launches = [
{ title: 'Announcement', description: 'Introduced the roadmap to stakeholders.' },
{ title: 'Preview', description: 'Shared early access resources with champions.' },
{ title: 'Release', description: 'Rolled the feature out to everyone.' },
];
export function Demo() {
return (
<Block fullWidth gap="lg">
<Block>
<Text fw="semibold">Theme color</Text>
<Timeline color="primary.6">
{launches.map((milestone) => (
<Timeline.Item key={milestone.title} title={milestone.title}>
<Text size="sm">{milestone.description}</Text>
</Timeline.Item>
))}
</Timeline>
</Block>
<Block>
<Text fw="semibold">Thicker connector</Text>
<Timeline lineWidth={4}>
{launches.map((milestone) => (
<Timeline.Item key={milestone.title} title={milestone.title}>
<Text size="sm">{milestone.description}</Text>
</Timeline.Item>
))}
</Timeline>
</Block>
<Block>
<Text fw="semibold">Combined styling</Text>
<Timeline color="success.6" lineWidth={3}>
{launches.map((milestone) => (
<Timeline.Item key={milestone.title} title={milestone.title}>
<Text size="sm">{milestone.description}</Text>
</Timeline.Item>
))}
</Timeline>
</Block>
</Block>
);
}Line Variants
Compare solid, dashed, and dotted connectors, including mixed variants within a single flow.
Loading demo…
import { Block, Text, Timeline } from '@plocks/ui';
const phases = ['Start', 'Plan', 'Build'];
const variantExamples = [
{ label: 'Solid (default)', variant: undefined },
{ label: 'Dashed', variant: 'dashed' as const },
{ label: 'Dotted', variant: 'dotted' as const },
];
const releaseFlow = [
{ title: 'Planning', variant: 'solid' as const },
{ title: 'Design', variant: 'dashed' as const },
{ title: 'Development', variant: 'dotted' as const },
{ title: 'QA', variant: 'dashed' as const },
{ title: 'Launch', variant: 'solid' as const },
];
export function Demo() {
return (
<Block direction="row" justify="space-between" fullWidth>
{variantExamples.map((example) => (
<Block key={example.label}>
<Text fw="semibold">{example.label}</Text>
<Timeline>
{phases.map((title) => (
<Timeline.Item key={`${example.label}-${title}`} title={title} lineVariant={example.variant} />
))}
</Timeline>
</Block>
))}
<Block>
<Text fw="semibold">Mix line variants</Text>
<Timeline>
{releaseFlow.map((step) => (
<Timeline.Item key={step.title} title={step.title} lineVariant={step.variant} />
))}
</Timeline>
</Block>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources