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

Orientation

Reverse

Basic Usage

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

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 icons to 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 are 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 indicator and text size.

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

Horizontal layout 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.

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 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

Each snippet receives item, index, and state as props.

Snippet	Props	Description
`indicator`	`item, index, state`	`Custom indicator — replaces 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 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
`items`	`TimelineItem[]`	`[]`	`Array of timeline items`
`value`	`string \| number`	`-`	`Active item value`
`color`	`'primary' \| ... \| 'surface'`	`'primary'`	`Color scheme`
`size`	`'3xs' \| ... \| '3xl'`	`'md'`	`Size of indicators and text`
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	`Layout direction`
`reverse`	`boolean`	`false`	`Reverse completion direction`
`as`	`keyof HTMLElementTagNameMap`	`'div'`	`HTML element to render as`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference to root element`
`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 matching`
`date`	`string`	`-`	`Date or time label`
`title`	`string`	`-`	`Title text`
`description`	`string`	`-`	`Description text`
`icon`	`string`	`-`	`Iconify icon name for indicator`
`avatar`	`AvatarProps`	`-`	`Avatar for indicator`
`class`	`string`	`-`	`CSS classes for this item`
`ui`	`Record<Slot, Class>`	`-`	`Per-item slot class overrides`

Skeleton User