Stalk UI

Component

Timeline

Lists chronological events along a rail of toned dots and connectors.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/timeline

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Timeline.Root aria-label="Activity">
  <Timeline.Item tone="success">
    <Timeline.Content>
      <Timeline.Time dateTime="2026-07-03T14:10">Today, 14:10</Timeline.Time>
      <Timeline.Title>Deploy finished</Timeline.Title>
      <Timeline.Description>Build #424 promoted to production.</Timeline.Description>
    </Timeline.Content>
  </Timeline.Item>
  <Timeline.Item tone="danger">
    <Timeline.Content>
      <Timeline.Title>Alert raised</Timeline.Title>
    </Timeline.Content>
  </Timeline.Item>
</Timeline.Root>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`tone``TimelineTone`No-Colors the item's dot (accent default; status tones for event severity).
PropTypeRequiredDefaultDescription
`orientation``'vertical' \'horizontal'`No-

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`orientation``vertical`, `horizontal`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/timeline.json`
  • Recipe: `timeline`
  • Files: `src/components/ui/timeline.tsx`