Skip to content
CodeAtlas UI

Display

Timeline

Chronological list of events with colored markers.

<script>
  import { Timeline } from "@codeatlasdev/ui";
</script>

<Timeline items={[{ label: "Order created", date: "Today", variant: "success" }]} />

With variants

Markers take the color of the item `variant`.

  1. Order created

    Order #1234 received.

  2. Payment confirmed

    Card ending 4242 approved.

  3. Picking

    Items are being collected from stock.

  4. Awaiting shipment

    Package ready for pickup.

  5. Delivered
Code
svelte 
<script lang="ts">
  import { Timeline } from '@codeatlasdev/ui';

  const events = [
    { label: 'Order created', description: 'Order #1234 received.', date: 'Today, 14:32', variant: 'success' as const },
    { label: 'Payment confirmed', description: 'Card ending 4242 approved.', date: 'Today, 14:35', variant: 'success' as const },
    { label: 'Picking', description: 'Items are being collected from stock.', date: 'Today, 15:10', variant: 'info' as const },
    { label: 'Awaiting shipment', description: 'Package ready for pickup.', date: 'Today, 16:00', variant: 'default' as const },
    { label: 'Delivered', date: 'Expected tomorrow', variant: 'default' as const },
  ];
</script>

<div class="wrap"><Timeline items={events} /></div>

<style>
  .wrap { max-width: 440px; width: 100%; }
</style>

Simple

Only a label and a date.

  1. Project started
  2. Alpha released
  3. Public beta
  4. v1.0 stable
Code
svelte 
<script lang="ts">
  import { Timeline } from '@codeatlasdev/ui';

  const items = [
    { label: 'Project started', date: 'Jan 2025' },
    { label: 'Alpha released', date: 'Mar 2025' },
    { label: 'Public beta', date: 'Jun 2025' },
    { label: 'v1.0 stable', date: 'Sep 2025' },
  ];
</script>

<div class="wrap"><Timeline {items} /></div>

<style>
  .wrap { max-width: 440px; width: 100%; }
</style>

Props

PropTypeDefaultDescription
itemsTimelineItem[]–Events: `{ label, description?, date?, variant? }`. `variant` is `'default' | 'success' | 'error' | 'warning' | 'info'`. Required.
classstring''Extra class names.