Skip to content

Timeline card

Compact changelog timeline in a rounded card.

Usage

Usage
import { ChangelogTimelineCard } from '@/components/blocks/changelog-02'


<ChangelogTimelineCard />


// Your own releases. Types are 'new', 'fix', 'performance', 'security', 'deprecation', 'docs' or 'release'.
<ChangelogTimelineCard
  title="What shipped in Acme"
  entries={[
    {
      id: 'v2-4-0',
      date: '2026-09-10',
      version: '2.4.0',
      type: 'performance',
      title: 'Faster search',
      subtitle: 'Search · 2 changes',
      defaultOpen: true,
      details: [
        { label: 'Results stream in as you type', meta: '3× quicker' },
        { label: 'Smaller index on disk', meta: '−40%' },
      ],
    },
    {
      id: 'v2-3-0',
      date: '2026-08-28',
      version: '2.3.0',
      type: 'release',
      title: 'Acme 2.3',
      href: '/releases/2-3-0',
      tags: [
        { type: 'new', count: 4 },
        { type: 'fix', count: 7 },
      ],
    },
  ]}
/>

Install

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

Source

Props

Timeline card props
PropTypeDefaultDescription
eyebrowstring= 'Changelog'Small label above the title. Pass an empty string to hide it.
titlestring= 'What shipped in Zomi'Heading at the top of the card. Pass an empty string to hide it.
descriptionstring= A line about ZomiMuted line under the title. Pass an empty string to hide it.
entriesChangelogTimelineEntry[]= 10 sample entriesEntries, newest first. Each has an id (used for the anchor), an ISO date, a version, a type, a title and an optional subtitle, plus optional details ({ label, meta }[]) that make it expandable, defaultOpen, tags ({ type, count }[]) shown as lettered chips, and an href for “View release”.
localestring= 'en-US'Locale used to format the dates.
classNamestring= —Additional classes for the section.
styleCSSProperties= —Inline styles, handy for overriding the --pp-* color variables.