Timeline

Display a list of events in chronological order with a visual connector line and dots.

Basic

Project Kickoff

Jan 15, 2024

Initial planning meeting with all stakeholders completed.

Design Phase

Feb 3, 2024

UI/UX wireframes and mockups approved by the team.

Development Started

Mar 1, 2024

Frontend and backend development sprints initiated.

Beta Release

Apr 20, 2024

Beta version deployed to staging for internal testing.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <VxTimelineItem label="Project Kickoff" timestamp="Jan 15, 2024">
      Initial planning meeting completed.
    </VxTimelineItem>
    <VxTimelineItem label="Design Phase" timestamp="Feb 3, 2024" type="primary">
      Wireframes and mockups approved.
    </VxTimelineItem>
    <VxTimelineItem label="Development Started" timestamp="Mar 1, 2024" type="success">
      Frontend and backend sprints initiated.
    </VxTimelineItem>
  </VxTimeline>
</template>

Numbered Dots

Add numbered to show step numbers (01, 02, 03...) inside the dots — great for process flows and step-by-step guides.

Requirements

Week 1

Gather business requirements and define project scope.

Design

Week 2

Create wireframes, mockups, and design system.

Development

Week 3–6

Build frontend and backend components.

Testing

Week 7

QA testing, bug fixes, and performance optimization.

Launch

Week 8

Deploy to production and monitor metrics.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "numbered" shows 01, 02, 03... inside each dot -->
  <VxTimeline numbered>
    <VxTimelineItem label="Requirements" timestamp="Week 1" type="primary">
      Gather business requirements and define project scope.
    </VxTimelineItem>
    <VxTimelineItem label="Design" timestamp="Week 2" type="primary">
      Create wireframes, mockups, and design system.
    </VxTimelineItem>
    <VxTimelineItem label="Development" timestamp="Week 3–6" type="success">
      Build frontend and backend components.
    </VxTimelineItem>
    <VxTimelineItem label="Testing" timestamp="Week 7" type="warning">
      QA testing, bug fixes, and performance optimization.
    </VxTimelineItem>
    <VxTimelineItem label="Launch" timestamp="Week 8" color="#8b5cf6">
      Deploy to production and monitor metrics.
    </VxTimelineItem>
  </VxTimeline>
</template>

Types

Color the dot using the type prop to indicate different event categories.

Default

Neutral event

Primary

Main event

Success

Completed

Warning

Needs attention

Danger

Failed

Info

Note

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <!-- "type" controls the dot color -->
    <VxTimelineItem label="Default" timestamp="Neutral event" />
    <VxTimelineItem label="Primary" timestamp="Main event" type="primary" />
    <VxTimelineItem label="Success" timestamp="Completed" type="success" />
    <VxTimelineItem label="Warning" timestamp="Needs attention" type="warning" />
    <VxTimelineItem label="Danger" timestamp="Failed" type="danger" />
    <VxTimelineItem label="Info" timestamp="Note" type="info" />
  </VxTimeline>
</template>

Hollow Dots

Add hollow for an outlined dot style — great for distinguishing incomplete or future events.

Order Placed

10:30 AM

Payment Confirmed

10:32 AM

Shipped

2:15 PM

Out for Delivery

Pending

Delivered

—

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <VxTimelineItem label="Order Placed" timestamp="10:30 AM" type="success" />
    <VxTimelineItem label="Payment Confirmed" timestamp="10:32 AM" type="success" />
    <VxTimelineItem label="Shipped" timestamp="2:15 PM" type="primary" />
    <!-- "hollow" makes the dot outlined instead of filled -->
    <VxTimelineItem label="Out for Delivery" timestamp="Pending" type="warning" hollow />
    <VxTimelineItem label="Delivered" timestamp="—" hollow />
  </VxTimeline>
</template>

Custom Dot

Use the dot slot to replace the default dot with any icon or element.

Commit pushed

2 hours ago

fix: resolve null pointer in auth middleware

PR Merged

1 hour ago

#142 — Add rate limiting to API endpoints

Deployment

30 min ago

v2.4.1 deployed to production

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <VxTimelineItem label="Commit pushed" timestamp="2 hours ago" type="primary">
      <!-- The "dot" slot replaces the default dot circle -->
      <template #dot>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2">
          <circle cx="12" cy="12" r="4"/>
          <line x1="1.05" y1="12" x2="7" y2="12"/>
          <line x1="17.01" y1="12" x2="22.96" y2="12"/>
        </svg>
      </template>
      fix: resolve null pointer in auth middleware
    </VxTimelineItem>
  </VxTimeline>
</template>

Connected Cards

Add connected-cards to render each item's content as an elevated card with hover effects.

Design Review

10:00 AM

Reviewed the new dashboard mockups with the design team. Approved color palette and typography.

Code Review

11:30 AM

Reviewed PR #247 — refactored auth middleware. Left 3 comments, approved after fixes.

Deploy to Staging

2:00 PM

Deployed v2.5.0-rc1 to staging environment. Running smoke tests.

Incident Report

4:30 PM

Memory leak detected in staging. Rolled back to v2.4.2. Investigating root cause.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "connected-cards" wraps each item's content in a card -->
  <VxTimeline connected-cards>
    <VxTimelineItem label="Design Review" timestamp="10:00 AM" type="primary">
      Reviewed the new dashboard mockups.
    </VxTimelineItem>
    <VxTimelineItem label="Code Review" timestamp="11:30 AM" type="success">
      Reviewed PR #247 — refactored auth middleware.
    </VxTimelineItem>
    <VxTimelineItem label="Incident Report" timestamp="4:30 PM" type="danger">
      Memory leak detected in staging. Investigating.
    </VxTimelineItem>
  </VxTimeline>
</template>

Clickable Items

Add clickable on items to make them interactive with hover highlights and click events.

Signup Page

Q1 2024

Redesign the signup flow with social login options.

Dashboard v2

Q2 2024

New analytics dashboard with real-time data.

Mobile App

Q3 2024

React Native mobile app with push notifications.

vue

<script setup>
import { ref } from 'vue'
import { VxTimeline, VxTimelineItem } from 'veloxui'

const onItemClick = (label) => {
  console.log('Clicked:', label)
}
</script>

<template>
  <VxTimeline>
    <!-- "clickable" adds hover effect and emits "click" event -->
    <VxTimelineItem
      label="Signup Page"
      timestamp="Q1 2024"
      type="primary"
      clickable
      @click="onItemClick('Signup Page')"
    >
      Redesign the signup flow with social login options.
    </VxTimelineItem>
    <VxTimelineItem
      label="Dashboard v2"
      timestamp="Q2 2024"
      type="success"
      clickable
      @click="onItemClick('Dashboard v2')"
    >
      New analytics dashboard with real-time data.
    </VxTimelineItem>
  </VxTimeline>
</template>

Collapsible Items

Add collapsible to toggle the description body on click. Use default-expanded to control the initial state.

Sprint 1 — Auth Module

Jan 15

Implemented JWT authentication, session management, and OAuth2 integration. Added rate limiting to login endpoints. Wrote unit tests covering all auth flows including edge cases for token expiration and refresh.

Sprint 2 — Dashboard

Feb 1

Built real-time dashboard with WebSocket data feeds, interactive charts using D3.js, and customizable widget layout. Implemented drag-and-drop grid system for user-configurable panels.

Sprint 3 — API v2

Feb 15

Designed and implemented RESTful API v2 with OpenAPI spec, pagination, filtering, and field selection. Added versioned endpoints with backwards-compatible migration path from v1. Performance benchmarks show 40% improvement over v1.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <!-- "collapsible" adds a chevron toggle to expand/collapse the body -->
    <VxTimelineItem
      label="Sprint 1 — Auth Module"
      timestamp="Jan 15"
      type="success"
      collapsible
    >
      Implemented JWT authentication, session management, and OAuth2 integration.
    </VxTimelineItem>
    <VxTimelineItem
      label="Sprint 2 — Dashboard"
      timestamp="Feb 1"
      type="success"
      collapsible
      :default-expanded="false"
    >
      Built real-time dashboard with WebSocket feeds and interactive charts.
    </VxTimelineItem>
  </VxTimeline>
</template>

Animated Entrance

Add animated on the timeline to enable staggered fade-in entrance animations when items scroll into view.

Repository Created

Day 1

Initialized the monorepo with Turborepo.

CI/CD Pipeline

Day 2

Set up GitHub Actions with automated testing and deployment.

First Feature

Day 5

Shipped user authentication with magic link login.

Public Beta

Day 14

Opened beta access to 500 early adopters.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "animated" triggers staggered entrance animations via IntersectionObserver -->
  <VxTimeline animated>
    <VxTimelineItem label="Repository Created" timestamp="Day 1" type="primary">
      Initialized the monorepo with Turborepo.
    </VxTimelineItem>
    <VxTimelineItem label="CI/CD Pipeline" timestamp="Day 2" type="success">
      Set up GitHub Actions with automated testing.
    </VxTimelineItem>
    <VxTimelineItem label="Public Beta" timestamp="Day 14" color="#8b5cf6">
      Opened beta access to 500 early adopters.
    </VxTimelineItem>
  </VxTimeline>
</template>

Loading / Skeleton

Set loading on individual items to show a shimmer skeleton placeholder.

Data Loaded

Just now

This event is fully loaded and visible.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <VxTimelineItem label="Data Loaded" timestamp="Just now" type="success">
      This event is fully loaded and visible.
    </VxTimelineItem>
    <!-- "loading" shows a shimmer skeleton placeholder -->
    <VxTimelineItem loading />
    <VxTimelineItem loading />
  </VxTimeline>
</template>

Progress Line

Use the progress prop (0–100) to partially fill the connector line — useful for in-progress events.

Research

Complete

Market analysis and competitor research finished.

Prototyping

In Progress

Interactive prototype 65% complete.

Development

Upcoming

Waiting for prototype approval.

Launch

Planned

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <VxTimelineItem label="Research" type="success" :progress="100">
      Market analysis finished.
    </VxTimelineItem>
    <!-- "progress" fills a colored portion of the connector line (0–100) -->
    <VxTimelineItem label="Prototyping" type="primary" :progress="65">
      Interactive prototype 65% complete.
    </VxTimelineItem>
    <VxTimelineItem label="Development" hollow :progress="0">
      Waiting for prototype approval.
    </VxTimelineItem>
  </VxTimeline>
</template>

Gradient Line

Use gradient-color to create a smooth color transition on the connector line between events.

Start

Phase 1

Project kickoff with initial planning.

Build

Phase 2

Development and iteration.

Test

Phase 3

Quality assurance and testing.

Ship

Phase 4

Production deployment.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <!-- "gradient-color" blends the line from the dot color to the next color -->
    <VxTimelineItem label="Start" type="primary" gradient-color="#22c55e">
      Project kickoff.
    </VxTimelineItem>
    <VxTimelineItem label="Build" color="#22c55e" gradient-color="#f59e0b">
      Development and iteration.
    </VxTimelineItem>
    <VxTimelineItem label="Test" color="#f59e0b" gradient-color="#8b5cf6">
      Quality assurance.
    </VxTimelineItem>
    <VxTimelineItem label="Ship" color="#8b5cf6">
      Production deployment.
    </VxTimelineItem>
  </VxTimeline>
</template>

Expandable Content

Add expandable to truncate long descriptions with a "Show more" toggle. Control the visible lines with max-lines.

Architecture Decision

Mar 1

After extensive evaluation of microservices vs monolith architectures, we decided to go with a modular monolith approach. This gives us the benefit of clear module boundaries and independent deployability without the operational complexity of distributed systems. The decision was informed by our team size (12 engineers), current traffic patterns (50k RPM), and the need to iterate quickly on new features. We can always extract services later if specific modules need independent scaling.

Tech Stack Finalized

Mar 5

Frontend: Vue 3 + TypeScript + Vite. Backend: Go with Chi router. Database: PostgreSQL with pgx driver. Cache: Redis for sessions and hot data. Message queue: NATS for async processing. Infrastructure: Kubernetes on AWS EKS with Terraform IaC. Monitoring: Grafana + Prometheus + Loki stack. CI/CD: GitHub Actions with ArgoCD for GitOps deployments.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <!-- "expandable" truncates text, "max-lines" controls visible lines -->
    <VxTimelineItem
      label="Architecture Decision"
      timestamp="Mar 1"
      type="primary"
      expandable
      :max-lines="2"
    >
      After extensive evaluation of microservices vs monolith architectures,
      we decided to go with a modular monolith approach. This gives us the
      benefit of clear module boundaries without operational complexity...
    </VxTimelineItem>
  </VxTimeline>
</template>

Horizontal Mode

Set mode="horizontal" to lay out events in a left-to-right flow — ideal for process steps and roadmaps.

Ideation

Brainstorm and research

Design

Wireframes and prototypes

Build

Development sprints

Launch

Go to market

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "horizontal" lays out the timeline left-to-right -->
  <VxTimeline mode="horizontal">
    <VxTimelineItem label="Ideation" timestamp="Q1" type="primary">
      Brainstorm and research
    </VxTimelineItem>
    <VxTimelineItem label="Design" timestamp="Q2" type="info">
      Wireframes and prototypes
    </VxTimelineItem>
    <VxTimelineItem label="Build" timestamp="Q3" type="success">
      Development sprints
    </VxTimelineItem>
    <VxTimelineItem label="Launch" timestamp="Q4" color="#8b5cf6">
      Go to market
    </VxTimelineItem>
  </VxTimeline>
</template>

Horizontal + Numbered

Combine mode="horizontal" with numbered for a step-by-step process flow.

Upload

Select files

Process

Validate data

Review

Check results

Confirm

Finalize

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline mode="horizontal" numbered>
    <VxTimelineItem label="Upload" type="success">Select files</VxTimelineItem>
    <VxTimelineItem label="Process" type="success">Validate data</VxTimelineItem>
    <VxTimelineItem label="Review" type="primary">Check results</VxTimelineItem>
    <VxTimelineItem label="Confirm" hollow>Finalize</VxTimelineItem>
  </VxTimeline>
</template>

Dashed Line

Set line-style="dashed" on an item to show a dashed connector — useful for uncertain or pending events.

Sprint 1 Complete

Mar 15

Sprint 2 In Progress

Mar 29

Sprint 3 Planned

Apr 12

Release

Apr 26

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <VxTimelineItem label="Sprint 1 Complete" timestamp="Mar 15" type="success" />
    <!-- "line-style" controls the connector: "solid" (default) or "dashed" -->
    <VxTimelineItem label="Sprint 2 In Progress" timestamp="Mar 29" type="primary" line-style="dashed" />
    <VxTimelineItem label="Sprint 3 Planned" timestamp="Apr 12" hollow line-style="dashed" />
    <VxTimelineItem label="Release" timestamp="Apr 26" hollow />
  </VxTimeline>
</template>

Custom Color

Use the color prop to set any color on individual dots.

Design System

Purple milestone

Mobile App

Pink milestone

API v3

Cyan milestone

Launch

Orange milestone

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <!-- "color" overrides the dot color with any CSS color value -->
    <VxTimelineItem label="Design System" timestamp="Q1" color="#8b5cf6">
      Purple milestone
    </VxTimelineItem>
    <VxTimelineItem label="Mobile App" timestamp="Q2" color="#ec4899">
      Pink milestone
    </VxTimelineItem>
  </VxTimeline>
</template>

Sizes

Available in sm, md (default), and lg.

Small

Created

9:00 AM

Updated

11:30 AM

Closed

3:00 PM

Medium

Created

9:00 AM

Updated

11:30 AM

Closed

3:00 PM

Large

Created

9:00 AM

Updated

11:30 AM

Closed

3:00 PM

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <VxTimeline size="sm">
    <VxTimelineItem label="Created" timestamp="9:00 AM" type="primary" />
    <VxTimelineItem label="Updated" timestamp="11:30 AM" type="success" />
  </VxTimeline>

  <VxTimeline size="lg">
    <VxTimelineItem label="Created" timestamp="9:00 AM" type="primary" />
    <VxTimelineItem label="Updated" timestamp="11:30 AM" type="success" />
  </VxTimeline>
</template>

Right Aligned

Set mode="right" to position content on the right side of the timeline.

Application Received

Jan 10, 2024

Phone Screen

Jan 18, 2024

Technical Interview

Jan 25, 2024

Final Decision

Pending

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "mode" controls content placement: "left" (default), "right", "alternate", or "horizontal" -->
  <VxTimeline mode="right">
    <VxTimelineItem label="Application Received" timestamp="Jan 10, 2024" type="primary" />
    <VxTimelineItem label="Phone Screen" timestamp="Jan 18, 2024" type="success" />
    <VxTimelineItem label="Final Decision" timestamp="Pending" type="warning" hollow />
  </VxTimeline>
</template>

Alternate

Set mode="alternate" to alternate items left and right.

Founded

2020

Company established with seed funding.

Series A

2021

Raised $12M to expand the engineering team.

Product Launch

2022

V1.0 launched with 10,000 beta users.

Series B

2023

Raised $45M for international expansion.

IPO

2024

Listed on NASDAQ with $2B valuation.

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "alternate" places items on alternating sides of the line -->
  <VxTimeline mode="alternate">
    <VxTimelineItem label="Founded" timestamp="2020" type="primary">
      Company established with seed funding.
    </VxTimelineItem>
    <VxTimelineItem label="Series A" timestamp="2021" type="success">
      Raised $12M to expand engineering.
    </VxTimelineItem>
    <VxTimelineItem label="Product Launch" timestamp="2022" type="info">
      V1.0 launched with 10,000 beta users.
    </VxTimelineItem>
  </VxTimeline>
</template>

Pending

Add pending to show a loading spinner at the end — indicates more events are coming.

User signed in

10:00:12

Viewed dashboard

10:00:15

Clicked 'Reports'

10:00:23

Recording...

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "pending" adds a spinner at the end, "pending-text" shows optional text -->
  <VxTimeline pending pending-text="Recording...">
    <VxTimelineItem label="User signed in" timestamp="10:00:12" type="primary" />
    <VxTimelineItem label="Viewed dashboard" timestamp="10:00:15" type="info" />
    <VxTimelineItem label="Clicked 'Reports'" timestamp="10:00:23" type="info" />
  </VxTimeline>
</template>

Reverse

Add reverse to display events in reverse order (newest first).

Latest event

Apr 2024

Third event

Mar 2024

Second event

Feb 2024

First event

Jan 2024

vue

<script setup>
import { VxTimeline, VxTimelineItem } from 'veloxui'
</script>

<template>
  <!-- "reverse" shows items in reverse order -->
  <VxTimeline reverse>
    <VxTimelineItem label="First event" timestamp="Jan 2024" type="primary" />
    <VxTimelineItem label="Second event" timestamp="Feb 2024" type="success" />
    <VxTimelineItem label="Latest event" timestamp="Apr 2024" type="warning" />
  </VxTimeline>
</template>

Custom Title & Description

Use title and description as props or slots to fully customize each item's content. The title and description slots let you put any markup — tags, avatars, links, buttons — inside the timeline.

Olivia Martinauthor

2 hours ago

Pushed 3 commits to main

 fix: resolve auth middleware null pointer
 feat: add rate limiting to API
 docs: update changelog 

Jackson Lee

5 hours ago

Merged PR #142 — Add rate limiting to API endpoints

CI Pipeline

5 hours ago

All 47 tests passed in 2m 34s

vue

<script setup>
import { VxTimeline, VxTimelineItem, VxTag } from 'veloxui'
</script>

<template>
  <VxTimeline>
    <!-- Use title/description slots for rich content -->
    <VxTimelineItem timestamp="2 hours ago" type="primary">
      <template #title>
        <div style="display: flex; align-items: center; gap: 8px;">
          <img src="/avatar.jpg" style="width: 24px; height: 24px; border-radius: 50%;" />
          <span>Olivia Martin</span>
          <VxTag type="primary" size="sm" rounded>author</VxTag>
        </div>
      </template>
      <template #description>
        Pushed 3 commits to <code>main</code>
      </template>
    </VxTimelineItem>

    <!-- Or use title/description as simple string props -->
    <VxTimelineItem
      title="CI Pipeline"
      description="All 47 tests passed in 2m 34s"
      timestamp="5 hours ago"
      type="success"
    />
  </VxTimeline>
</template>

API

VxTimeline Props

Prop	Type	Default	Description
`mode`	`'left' \| 'right' \| 'alternate' \| 'horizontal'`	`'left'`	Layout direction and content placement
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Dot and text sizing
`pending`	`boolean`	`false`	Show a loading spinner at the end
`pendingText`	`string`	`''`	Text next to the pending spinner
`reverse`	`boolean`	`false`	Reverse item order
`numbered`	`boolean`	`false`	Show step numbers (01, 02...) inside dots
`animated`	`boolean`	`false`	Enable staggered entrance animations
`connectedCards`	`boolean`	`false`	Render all items as elevated cards

VxTimelineItem Props

Prop	Type	Default	Description
`type`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'default'`	Dot color type
`color`	`string`	—	Custom dot color (overrides type)
`title`	`string`	—	Event title (alias for `label`)
`label`	`string`	—	Event title (alias for `title`)
`description`	`string`	—	Event body text
`timestamp`	`string`	—	Time or date text
`hollow`	`boolean`	`false`	Outlined dot style
`lineStyle`	`'solid' \| 'dashed'`	`'solid'`	Connector line style
`clickable`	`boolean`	`false`	Enable click interaction with hover effect
`collapsible`	`boolean`	`false`	Toggle body visibility on title click
`defaultExpanded`	`boolean`	`true`	Initial expanded state (when collapsible)
`card`	`boolean`	`false`	Render this item as an elevated card
`loading`	`boolean`	`false`	Show shimmer skeleton placeholder
`progress`	`number`	—	Partial line fill (0–100)
`gradientColor`	`string`	—	Gradient end color for the connector line
`expandable`	`boolean`	`false`	Truncate body with "Show more" toggle
`maxLines`	`number`	`3`	Max visible lines when expandable

VxTimelineItem Events

Event	Payload	Description
`click`	`MouseEvent`	Emitted when a clickable item is clicked

VxTimelineItem Slots

Slot	Description
`default`	Event body content (fallback for `description` slot)
`title`	Custom title markup (replaces `title`/`label` prop)
`label`	Alias for `title` slot
`description`	Custom body markup (replaces `description` prop and default slot)
`dot`	Custom dot element (replaces the entire dot circle)
`icon`	Icon content rendered inside the dot circle
`timestamp`	Custom timestamp content

Timeline ​

Basic ​

Numbered Dots ​

Types ​

Hollow Dots ​

Custom Dot ​

Connected Cards ​

Clickable Items ​

Collapsible Items ​

Animated Entrance ​

Loading / Skeleton ​

Progress Line ​

Gradient Line ​

Expandable Content ​

Horizontal Mode ​

Horizontal + Numbered ​

Dashed Line ​

Custom Color ​

Sizes ​

Right Aligned ​

Alternate ​

Pending ​

Reverse ​

Custom Title & Description ​

API ​

VxTimeline Props ​

VxTimelineItem Props ​

VxTimelineItem Events ​

VxTimelineItem Slots ​

Timeline

Basic

Numbered Dots

Types

Hollow Dots

Custom Dot

Connected Cards

Clickable Items

Collapsible Items

Animated Entrance

Loading / Skeleton

Progress Line

Gradient Line

Expandable Content

Horizontal Mode

Horizontal + Numbered

Dashed Line

Custom Color

Sizes

Right Aligned

Alternate

Pending

Reverse

Custom Title & Description

API

VxTimeline Props

VxTimelineItem Props

VxTimelineItem Events

VxTimelineItem Slots