@usevyre/react @usevyre/vue

Timeline

A vertical activity feed for audit logs and history — status-colored markers, timestamps, and a connector line. Pass an items array for plain logs, or compose TimelineItem children for rich content. Timeline doesn’t reorder — items render in the order you give them.

Audit log (items array)

The quickest form: an array of entries. status colors each dot — success green, info accent, danger red, default grey.

Deployed v2.1.02m ago
Build passed5m ago
Tests failed (retry)8m ago
Pushed to main10m ago

import { Timeline } from "@usevyre/react";

<Timeline
  items={[
    { title: "Deployed v2.1.0", time: "2m ago", status: "success" },
    { title: "Build passed", time: "5m ago", status: "info" },
    { title: "Tests failed (retry)", time: "8m ago", status: "danger" },
    { title: "Pushed to main", time: "10m ago" },
  ]}
/>

<script setup>
import { Timeline } from "@usevyre/vue";

const items = [
  { title: "Deployed v2.1.0", time: "2m ago", status: "success" },
  { title: "Build passed", time: "5m ago", status: "info" },
  { title: "Tests failed (retry)", time: "8m ago", status: "danger" },
  { title: "Pushed to main", time: "10m ago" },
];
</script>
<template>
  <Timeline :items="items" />
</template>

Rich content (composable)

Use TimelineItem children when each entry needs more than text — badges, links, or any markup go in the body.

Invoice paidApr 2
$1,200 — Acme Inc.
Plan upgradedMar 28
Starter
→
Pro
Account createdMar 1

import { Timeline, TimelineItem, Stack, Text, Badge } from "@usevyre/react";

<Timeline>
  <TimelineItem title="Invoice paid" time="Apr 2" status="success">
    <Text size="sm" color="muted">$1,200 — Acme Inc.</Text>
  </TimelineItem>
  <TimelineItem title="Plan upgraded" time="Mar 28" status="info">
    <Stack direction="row" gap="sm" align="center">
      <Badge variant="default">Starter</Badge>
      <Text size="sm" color="muted">→</Text>
      <Badge variant="accent">Pro</Badge>
    </Stack>
  </TimelineItem>
  <TimelineItem title="Account created" time="Mar 1" />
</Timeline>

<script setup>
import { Timeline, TimelineItem, Stack, Text, Badge } from "@usevyre/vue";
</script>
<template>
  <Timeline>
    <TimelineItem title="Invoice paid" time="Apr 2" status="success">
      <Text size="sm" color="muted">$1,200 — Acme Inc.</Text>
    </TimelineItem>
    <TimelineItem title="Plan upgraded" time="Mar 28" status="info">
      <Stack direction="row" gap="sm" align="center">
        <Badge variant="default">Starter</Badge>
        <Text size="sm" color="muted">→</Text>
        <Badge variant="accent">Pro</Badge>
      </Stack>
    </TimelineItem>
    <TimelineItem title="Account created" time="Mar 1" />
  </Timeline>
</template>

Timeline props

Props

Prop	Type	Default	Description
`items`	`TimelineItemData[]`	`—`	{ title, time?, description?, status?, icon? }[] — alternative to children.
`children`	`ReactNode`	`—`	TimelineItem elements (use for rich per-item content).

TimelineItem props

Props

Prop	Type	Default	Description
`title`	`ReactNode`	`—`	Entry title (required).
`time`	`ReactNode`	`—`	Timestamp, right-aligned.
`status`	`"default" \| "success" \| "warning" \| "danger" \| "info"`	`"default"`	Colors the marker dot.
`icon`	`ReactNode`	`—`	Custom marker — overrides the status dot (Vue: #icon slot).
`children`	`ReactNode`	`—`	Rich content under the title.

AI Context

Common AI mistakes

Building an activity log with a <ul> + manual dots/lines→ Use <Timeline items={[...]} /> or TimelineItem children
Using Stepper for a history/audit feed→ Use <Timeline> for logs/history; Stepper for wizards
Expecting Timeline to sort by time→ Sort the array yourself (newest- or oldest-first)

Quick examples

Plain audit log via items

<Timeline
  items={[
    { title: "Deployed v2.1", time: "2m ago", status: "success" },
    { title: "Build started", time: "5m ago", status: "info" },
    { title: "Push to main", time: "6m ago" },
  ]}
/>

Rich content via children

<Timeline>
  <TimelineItem title="Invoice paid" time="Apr 2" status="success">
    <Text size="sm">$1,200 — <a href="#">view receipt</a></Text>
  </TimelineItem>
  <TimelineItem title="Invoice sent" time="Mar 28" status="info" />
</Timeline>

← Tags Input Toast →