Timeline

Vertical timeline with connecting line and dot variants

Default

Usage

import { Timeline } from '@tryvienna/ui'

<div className="w-96">
<ContentProvider density="default">
  <Timeline
    items={[
      {
        title: 'Project created',
        description: 'Repository initialized with base configuration',
        timestamp: '2 hours ago',
        variant: 'success',

Examples

Default

Default

<div className="w-96">
<ContentProvider density="default">
  <Timeline
    items={[
      {
        title: 'Project created',
        description: 'Repository initialized with base configuration',
        timestamp: '2 hours ago',
        variant: 'success',

With Icons

With Icons

<div className="w-96">
<ContentProvider density="default">
  <Timeline
    items={[
      {
        title: 'Deployment successful',
        description: 'v2.1.0 deployed to production',
        timestamp: '3 hours ago',
        icon: <CheckCircleIcon className="text-emerald-500" />,

Compact Density

Compact Density

<div className="w-96">
  <ContentProvider density="compact">
    <Timeline
      items={[
        { title: 'Step 1', description: 'Initialize repository', variant: 'success' },
        { title: 'Step 2', description: 'Install dependencies', variant: 'success' },
        { title: 'Step 3', description: 'Configure environment', variant: 'active' },
        { title: 'Step 4', description: 'Run tests', variant: 'default' },
      ]}
    />
  </ContentProvider>
</div>

Relaxed Density

Relaxed Density

<div className="w-96">
<ContentProvider density="relaxed">
  <Timeline
    items={[
      { title: 'Created', description: 'Issue was opened by Alice', timestamp: 'Jan 15' },
      {
        title: 'Assigned',
        description: 'Assigned to Bob',
        timestamp: 'Jan 16',
        variant: 'active',

API Reference

Timeline

Prop	Type	Default	Description
items	TimelineItem[]	-

Data Attributes

Component	data-slot
Timeline	"timeline"