PxTimeline

A vertical timeline connector. It's fully slot-driven — the component itself only lays out the connector line and a marker/content column per item; it doesn't render any date, title, description, or icon automatically. You supply that via the marker and content scoped slots.

Usage

Demo

2024-01-15

Account Created

Initial registration completed.

2024-02-01

Onboarding Call

Initial setup and walkthrough.

2024-03-10

Profile Completed

All required information provided.

<script setup>
import { PxTimeline } from 'praxis-vue-ui'
import { UserPlus, Calendar, CheckCircle } from '@lucide/vue'

const events = [
  { date: '2024-01-15', title: 'Account Created', description: 'Initial registration completed.', icon: UserPlus },
  { date: '2024-02-01', title: 'Onboarding Call', description: 'Initial setup and walkthrough.', icon: Calendar },
  { date: '2024-03-10', title: 'Profile Completed', description: 'All required information provided.', icon: CheckCircle },
]
</script>

<template>
  <PxTimeline :value="events">
    <template #marker="{ item }">
      <div class="marker-dot">
        <component :is="item.icon" />
      </div>
    </template>
    <template #content="{ item }">
      <div class="text-xs text-gray-500">{{ item.date }}</div>
      <div class="font-semibold">{{ item.title }}</div>
      <div class="text-sm text-gray-500">{{ item.description }}</div>
    </template>
  </PxTimeline>
</template>

Without a marker slot, each item falls back to a small colored dot; without a content slot, nothing renders for that item at all.

Props

Prop	Type	Default	Description
valuerequired	T[]	—	Array of items to render — shape is entirely up to you, since nothing is read from it directly by the component.

Slots

Slot	Props	Description
marker	{ item, index }	Custom marker/dot rendering for each item. Falls back to a plain colored dot if omitted.
content	{ item, index }	Main content for each item. Nothing renders here if omitted.