Timeline

Display a list of events in chronological order.

Component Features

↕️ Dual Direction: Supports vertical and horizontal direction.
📐 Centered Alternating: Supports position prop for alternating content on both sides of the axis.
🎨 Custom Styles: Supports variant and color props for custom dot and line styles.
🖼️ Icon Dots: Supports icon variant using custom icons as dots.
🔗 Line Styles: Supports solid, dashed, dotted, none line styles.
⏱️ Timestamps: Supports BrTimelineTime component for displaying timestamps or labels.

Basic Usage

<script setup lang="ts">
import {
  BrTimeline,
  BrTimelineItem,
  BrTimelineDot,
  BrTimelineConnector,
  BrTimelineContent,
  BrTimelineTime,
} from '@breezeui/vue'
</script>

<template>
  <BrTimeline>
    <BrTimelineItem>
      <BrTimelineTime>2024-01-01</BrTimelineTime>
      <BrTimelineDot color="primary" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Project Started</div>
        <div class="text-sm text-muted-foreground mt-1">Initial commit and setup.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem>
      <BrTimelineTime>2024-02-15</BrTimelineTime>
      <BrTimelineDot color="success" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Beta Release</div>
        <div class="text-sm text-muted-foreground mt-1">Released first beta version.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem :last="true">
      <BrTimelineTime>2024-03-10</BrTimelineTime>
      <BrTimelineDot color="warning" />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Feedback Collection</div>
        <div class="text-sm text-muted-foreground mt-1">Gathering user feedback.</div>
      </BrTimelineContent>
    </BrTimelineItem>
  </BrTimeline>
</template>

Horizontal

Use the direction="horizontal" prop to display the timeline horizontally.

<script setup lang="ts">
import {
  BrTimeline,
  BrTimelineItem,
  BrTimelineDot,
  BrTimelineConnector,
  BrTimelineContent,
  BrTimelineTime,
} from '@breezeui/vue'
</script>

<template>
  <BrTimeline direction="horizontal">
    <BrTimelineItem>
      <BrTimelineTime>Step 1</BrTimelineTime>
      <BrTimelineDot color="primary" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Order Placed</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem>
      <BrTimelineTime>Step 2</BrTimelineTime>
      <BrTimelineDot color="success" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Processing</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem>
      <BrTimelineTime>Step 3</BrTimelineTime>
      <BrTimelineDot color="warning" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Shipped</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem :last="true">
      <BrTimelineTime>Step 4</BrTimelineTime>
      <BrTimelineDot color="muted" />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Delivered</div>
      </BrTimelineContent>
    </BrTimelineItem>
  </BrTimeline>
</template>

Custom Styles & Variants

You can customize the dots and connectors using variant and color props. You can also use custom icons for dots.

<script setup lang="ts">
import {
  BrTimeline,
  BrTimelineItem,
  BrTimelineDot,
  BrTimelineConnector,
  BrTimelineContent,
  BrTimelineTime,
} from '@breezeui/vue'
import { Check, Clock, AlertTriangle, X } from 'lucide-vue-next'
</script>

<template>
  <BrTimeline>
    <BrTimelineItem>
      <BrTimelineTime>Done</BrTimelineTime>
      <BrTimelineDot color="success" variant="icon">
        <Check class="w-4 h-4" />
      </BrTimelineDot>
      <BrTimelineConnector variant="solid" color="success" />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Completed Step</div>
        <div class="text-sm text-muted-foreground mt-1">This step is fully complete.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem>
      <BrTimelineTime>In Progress</BrTimelineTime>
      <BrTimelineDot color="primary" variant="circle" />
      <BrTimelineConnector variant="dashed" color="primary" />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Current Step</div>
        <div class="text-sm text-muted-foreground mt-1">Working on this right now.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem>
      <BrTimelineTime>Pending</BrTimelineTime>
      <BrTimelineDot color="muted" variant="dot" />
      <BrTimelineConnector variant="dotted" color="muted" />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Upcoming Step</div>
        <div class="text-sm text-muted-foreground mt-1">Waiting for previous steps.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem :last="true">
      <BrTimelineTime>Failed</BrTimelineTime>
      <BrTimelineDot color="error" variant="square" />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Failed Step</div>
        <div class="text-sm text-muted-foreground mt-1">Something went wrong here.</div>
      </BrTimelineContent>
    </BrTimelineItem>
  </BrTimeline>
</template>

Center Position

Use the position="center" prop to display the timeline alternately on both sides.

<script setup lang="ts">
import {
  BrTimeline,
  BrTimelineItem,
  BrTimelineDot,
  BrTimelineConnector,
  BrTimelineContent,
  BrTimelineTime,
} from '@breezeui/vue'
</script>

<template>
  <BrTimeline position="center">
    <BrTimelineItem>
      <BrTimelineTime>2023</BrTimelineTime>
      <BrTimelineDot color="primary" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Company Founded</div>
        <div class="text-sm text-muted-foreground mt-1">Started with a small team of 3 people.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem>
      <BrTimelineTime>2024</BrTimelineTime>
      <BrTimelineDot color="success" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Series A Funding</div>
        <div class="text-sm text-muted-foreground mt-1">Secured $5M in Series A funding.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem>
      <BrTimelineTime>2025</BrTimelineTime>
      <BrTimelineDot color="warning" />
      <BrTimelineConnector />
      <BrTimelineContent>
        <div class="font-medium text-foreground">Global Expansion</div>
        <div class="text-sm text-muted-foreground mt-1">Opened offices in Europe and Asia.</div>
      </BrTimelineContent>
    </BrTimelineItem>

    <BrTimelineItem :last="true">
      <BrTimelineTime>2026</BrTimelineTime>
      <BrTimelineDot color="info" />
      <BrTimelineContent>
        <div class="font-medium text-foreground">IPO</div>
        <div class="text-sm text-muted-foreground mt-1">Successfully went public.</div>
      </BrTimelineContent>
    </BrTimelineItem>
  </BrTimeline>
</template>

API

BrTimeline

Props

Name	Type	Default	Description
direction	`'vertical' \| 'horizontal'`	`'vertical'`	The orientation of the timeline
position	`'left' \| 'right' \| 'center'`	`'right'`	The position of the timeline content relative to the axis
color	`string`	`'default'`	Default color for all dots and connectors in the timeline

BrTimelineItem

Props

Name	Type	Default	Description
last	`boolean`	`false`	Set to `true` for the last item to hide its connector line

BrTimelineDot

Props

Name	Type	Default	Description
variant	`'dot' \| 'circle' \| 'square' \| 'icon'`	`'circle'`	The visual style of the dot
color	`string`	`'default'`	The color of the dot

BrTimelineConnector

Props

Name	Type	Default	Description
variant	`'solid' \| 'dashed' \| 'dotted' \| 'none'`	`'solid'`	The style of the connector line
color	`string`	-	Custom color for the connector line

BrTimelineContent

A container for the main content of the timeline item.

BrTimelineTime

A container for the timestamp or label of the timeline item.

#Timeline

#Component Features

#Basic Usage

#Horizontal

#Custom Styles & Variants

#Center Position

#API

#BrTimeline

#Props

#BrTimelineItem

#Props

#BrTimelineDot

#Props

#BrTimelineConnector

#Props

#BrTimelineContent

#BrTimelineTime

Timeline

Component Features

Basic Usage

Horizontal

Custom Styles & Variants

Center Position

API

BrTimeline

Props

BrTimelineItem

Props

BrTimelineDot

Props

BrTimelineConnector

Props

BrTimelineContent

BrTimelineTime