Timeline · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JTimeline, JTimelineItem } from '@juxtui/ui'

Usage #

<JTimeline>
  <JTimelineItem title="Order placed" time="Mon 9:14am" status="complete" />
  <JTimelineItem title="Shipped" time="Mon 4:02pm" status="complete" />
  <JTimelineItem title="Out for delivery" time="Today, 8:30am" status="current" />
  <JTimelineItem title="Delivered" status="upcoming" />
</JTimeline>

JTimeline is just the <ol> and rail context — it carries no props of its own.

The connecting line between markers is a ::before on each item’s rail, so items must stay direct children of JTimeline for it to line up.

Variants & examples #

Custom markers#

Replace the dot with an icon via the marker slot.

Build passed
10:02am
Deploy to staging
10:04am
Tests failed
10:11am
3 of 214 specs failed in checkout.spec.ts.

<script setup lang="ts">
import { Check, GitCommitHorizontal, X } from '@lucide/vue'
</script>

<template>
  <JTimeline>
    <JTimelineItem title="Build passed" time="10:02am">
      <template #marker><Check class="size-2.5 text-bg" /></template>
    </JTimelineItem>
    <JTimelineItem title="Deploy to staging" time="10:04am">
      <template #marker><GitCommitHorizontal class="size-2.5 text-bg" /></template>
    </JTimelineItem>
    <JTimelineItem title="Tests failed" time="10:11am" status="current">
      <template #marker><X class="size-2.5 text-bg" /></template>
      3 of 214 specs failed in checkout.spec.ts.
    </JTimelineItem>
  </JTimeline>
</template>

API #

JTimeline

Slots

Slot	Props	Description
default	—	One or more `JTimelineItem`.

JTimelineItem

Prop	Type	Default	Description
title	`string`	—	Event title. Use the `title` slot for richer content.
time	`string`	—	A timestamp or relative time, e.g. "2 hours ago".
status	`'complete' \| 'current' \| 'upcoming'`	`'complete'`	Styles the marker and, for `upcoming`, mutes the title.

Slots

Slot	Props	Description
default	—	Body text under the header.
title	—	Replaces the plain-text `title` prop.
marker	—	Replaces the default dot marker.

Accessibility #

Renders as an ordered list (<ol>/<li>) so assistive tech announces position and count, e.g. “2 of 4”.
The rail and marker are aria-hidden — order and status are carried by the visible text, not the graphic.