Data Display

Timeline

Display a sequence of events in chronological order. Supports icons, avatars, active states, horizontal layout, and fully customizable content via snippets.

Playground

Experiment with different props in real-time.

Jan 10

Order placed

Your order has been confirmed

Jan 11

Processing

Being prepared for shipment

Jan 14

Delivered

Package has been delivered

Color

Size

Basic Usage

Pass an array of items with title, description, and date fields.

Jan 10

Order placed

Your order has been confirmed

Jan 11

Processing

Being prepared for shipment

Jan 14

Delivered

Package has been delivered

<script lang="ts">
  import { Timeline } from 'sv5ui';

  const items = [
    { value: 'placed', title: 'Order placed', description: 'Your order has been confirmed', date: 'Jan 10' },
    { value: 'processing', title: 'Processing', description: 'Being prepared for shipment', date: 'Jan 11' },
    { value: 'delivered', title: 'Delivered', description: 'Package has been delivered', date: 'Jan 14' }
  ];
</script>

<Timeline {items} value="processing" />

With Icons

Add Iconify icon names to display icons in the indicators.

Design

Create wireframes

Develop

Build features

Launch

Deploy to production

<script lang="ts">
  import { Timeline } from 'sv5ui';

  const items = [
    { value: 'design', title: 'Design', description: 'Create wireframes', icon: 'lucide:pen-tool' },
    { value: 'develop', title: 'Develop', description: 'Build features', icon: 'lucide:code' },
    { value: 'launch', title: 'Launch', description: 'Deploy to production', icon: 'lucide:rocket' }
  ];
</script>

<Timeline {items} value="develop" />

Active State

Set value to highlight the current step. Items before the active item are marked as completed.

Jan 10

Order placed

Confirmed

Jan 12

Shipped

In transit

Jan 14

Delivered

Awaiting delivery

<script lang="ts">
  import { Timeline } from 'sv5ui';

  const items = [
    { value: 'placed', title: 'Order placed', description: 'Confirmed', date: 'Jan 10' },
    { value: 'shipped', title: 'Shipped', description: 'In transit', date: 'Jan 12' },
    { value: 'delivered', title: 'Delivered', description: 'Awaiting delivery', date: 'Jan 14' }
  ];
</script>

<Timeline {items} value="shipped" />

Sizes

Control the size of indicators and text.

Step one

First step

Step two

Second step

Step one

First step

Step two

Second step

Step one

First step

Step two

Second step

Step one

First step

Step two

Second step

<Timeline {items} size="xs" />
<Timeline {items} size="sm" />
<Timeline {items} size="md" />
<Timeline {items} size="lg" />

Colors

Semantic color schemes with active state highlighting.

primary

Completed

In Progress

Upcoming

success

Completed

In Progress

Upcoming

warning

Completed

In Progress

Upcoming

error

Completed

In Progress

Upcoming

<Timeline {items} value="active" color="primary" />
<Timeline {items} value="active" color="success" />
<Timeline {items} value="active" color="warning" />
<Timeline {items} value="active" color="error" />

Horizontal

Set orientation="horizontal" for a horizontal layout, ideal for step wizards.

Account

Profile

Complete

<script lang="ts">
  import { Timeline } from 'sv5ui';

  const items = [
    { value: 'step-1', title: 'Account', icon: 'lucide:user-plus' },
    { value: 'step-2', title: 'Profile', icon: 'lucide:settings' },
    { value: 'step-3', title: 'Complete', icon: 'lucide:check-circle' }
  ];
</script>

<Timeline {items} orientation="horizontal" value="step-2" />

Reverse

Reverse the completion direction of items.

Today

Latest update

Bug fix deployed

Yesterday

Feature release

Added dark mode

1 week ago

Initial release

v1.0.0 launched

<script lang="ts">
  import { Timeline } from 'sv5ui';

  const items = [
    { value: 'latest', title: 'Latest update', description: 'Bug fix deployed', date: 'Today' },
    { value: 'feature', title: 'Feature release', description: 'Added dark mode', date: 'Yesterday' },
    { value: 'initial', title: 'Initial release', description: 'v1.0.0 launched', date: '1 week ago' }
  ];
</script>

<Timeline {items} value="feature" reverse />

UI Slots

Use the ui prop to override classes on specific internal elements.

Slot	Description
`root`	Root container — controls layout direction, spacing
`item`	Individual timeline item wrapper
`container`	Container for indicator and separator
`indicator`	The dot or icon circle — shape, size, color
`separator`	Connecting line between items
`wrapper`	Content wrapper beside the indicator
`date`	Date label typography
`title`	Title text typography
`description`	Description text styles

Jan 10

Order placed

Your order has been confirmed

Jan 11

Processing

Being prepared for shipment

Jan 14

Delivered

Package has been delivered

<Timeline
  {items}
  value="processing"
  ui={{
    root: 'gap-6',
    indicator: 'ring-2 ring-primary/30',
    title: 'text-lg font-bold',
    description: 'italic',
    date: 'text-primary'
  }}
/>

Snippets

Fully customize the indicator or content rendering. Each snippet receives the item, index, and state.

Snippet	Args	Description
`indicator`	`{ item, index, state }`	Custom indicator — replaces the default dot/icon
`dateSlot`	`{ item, index, state }`	Custom date content
`titleSlot`	`{ item, index, state }`	Custom title content
`descriptionSlot`	`{ item, index, state }`	Custom description content
`content`	`{ item, index, state }`	Custom content after each item

Custom Indicator

Replace the default dot with numbered steps.

Jan 10

Order placed

Confirmed

Jan 12

Shipped

In transit

Jan 14

Delivered

Awaiting delivery

<Timeline {items} value="shipped">
  {#snippet indicator({ item, index, state })}
    <div class="flex h-8 w-8 items-center justify-center rounded-full {state === 'active' ? 'bg-primary text-on-primary' : 'bg-surface-container text-on-surface/50'}">
      {index + 1}
    </div>
  {/snippet}
</Timeline>

Custom Content

Render custom content with card-style items.

Jan 10

Order placed

Confirmed

Order placed

Confirmed

Jan 12

Shipped

In transit

Shipped

In transit

Jan 14

Delivered

Awaiting delivery

Delivered

Awaiting delivery

<Timeline {items} value="shipped">
  {#snippet content({ item, index, state })}
    <div class="rounded-lg border border-on-surface/15 p-3 {state === 'active' ? 'border-primary/30 bg-primary/5' : ''}">
      <p class="font-semibold">{item.title}</p>
      <p class="text-sm text-on-surface/60">{item.description}</p>
    </div>
  {/snippet}
</Timeline>

Props

Prop	Type	Default	Description
`as`	`keyof HTMLElementTagNameMap`	`'div'`	HTML element to render as
`items`	`TimelineItem[]`	`[]`	Array of timeline items to render
`color`	`'primary' \| ... \| 'surface'`	`'primary'`	Color scheme for indicators and active states
`size`	`'3xs' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'`	`'md'`	Size of indicators and text
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction of the timeline
`reverse`	`boolean`	`false`	Reverse the completion direction
`value`	`string \| number`	`-`	Value of the active item
`class`	`string`	`-`	Additional CSS classes
`ui`	`Record<Slot, Class>`	`-`	Override slot classes

Item Props

Each object in the items array accepts these properties.

Prop	Type	Default	Description
`value`	`string \| number`	`-`	Unique identifier for active state matching
`date`	`string`	`-`	Date or time label
`title`	`string`	`-`	Title text for the item
`description`	`string`	`-`	Description text below the title
`icon`	`string`	`-`	Iconify icon name for the indicator
`avatar`	`AvatarProps`	`-`	Avatar props for the indicator
`class`	`string`	`-`	Additional CSS classes for this item

Skeleton User