Scroll timeline

Changelog with a sticky version rail.

Usage

import { ChangelogTimeline } from '@/components/blocks/changelog-01'


<ChangelogTimeline />


// Your own releases. Tags are 'new', 'improved' or 'fixed', and media takes any node.
<ChangelogTimeline
  heading="What’s new in Acme"
  entries={[
    {
      version: '2.4.0',
      date: '2026-09-10',
      tags: ['new', 'improved'],
      title: 'Shared inboxes',
      body: 'Route email to a team and assign threads in one click.',
      media: <img alt="The shared inbox" src="/changelog/inbox.png" />,
      changes: [{ tag: 'fixed', text: 'Drafts no longer lose their attachments' }],
    },
  ]}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/changelog-01

npx shadcn@latest add @pastaui-pro/changelog-01

yarn dlx shadcn@latest add @pastaui-pro/changelog-01

bunx --bun shadcn@latest add @pastaui-pro/changelog-01

Source

Props

Scroll timeline props
Prop	Type	Default	Description
eyebrow	string	= 'Changelog'	Small label above the heading. Pass an empty string to hide it.
heading	string	= 'What’s new in Orrery'	Section heading.
description	string	= A line about Orrery	Muted line under the heading. Pass an empty string to hide it.
entries	ChangelogEntry[]	= 5 sample releases	Releases, newest first. Each has a version, an ISO date, tags, a title and a body, plus optional media (any node) and changes ({ tag, text }[]) listed behind a toggle.
locale	string	= 'en-US'	Locale used to format the dates.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* color variables.