caliper uidocs
DemoSign inGet Pro

Changelog feed

Block

Versioned release notes with typed changes.

Installs components/ui/changelog-feed.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/changelog-feed.json

Changelog

What shipped and what changed.

  1. 2.4.0

    Faster tables

    Large tables now scroll without dropping frames.

    • NewColumn pinning
    • ImprovedRow virtualisation
    • FixedSorting kept stale rows

  2. 2.3.0

    Webhook retries

    • NewRetry from the delivery log
    • RemovedThe legacy signing header

When to use #

Use it for

  • Telling customers what has shipped.

Skip it when

  • Notes are internal only.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/changelog-feed.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { ChangelogFeed } from "@/components/ui/changelog-feed"

export function ChangelogFeedDemo() {
  return (
    <ChangelogFeed
      description="What shipped and what changed."
      entries={[
        { id: "e2", version: "2.4.0", date: "2025-10-14", title: "Faster tables", summary: "Large tables now scroll without dropping frames.", changes: [{ type: "new", text: "Column pinning" }, { type: "improved", text: "Row virtualisation" }, { type: "fixed", text: "Sorting kept stale rows" }] },
        { id: "e1", version: "2.3.0", date: "2025-09-30", title: "Webhook retries", changes: [{ type: "new", text: "Retry from the delivery log" }, { type: "removed", text: "The legacy signing header" }] },
      ]}
    />
  );
}

API reference #

ChangelogFeed

component
PropTypeDefault
entries *readonly ChangelogEntry[]—
titlestring"Changelog"
descriptionstring—
hasMoreboolean—
loadingboolean—
onLoadMore(() => void)—
classNamestring—

Accessibility #

It exposes group and status semantics, with aria-label, aria-pressed and aria-hidden kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.