# Pluck String: Changelog

> Faded strings between release notes, with a softer highlight.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/pluck-string-changelog-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/pluck-string-changelog-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/pluck-string-changelog-demo-light-23bf2a20f356287f.png
- Registry item: https://keyframeui.com/r/pluck-string-changelog-demo.json
- Categories: divider, interaction, svg
- Listed: 2026-10-14, source last changed 2026-10-15

## Install

```bash
npx shadcn@latest add https://keyframeui.com/r/pluck-string-changelog-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/pluck-string.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/pluck-string#pluck-string-changelog-demo

## Files

### `registry/demos/pluck-string-changelog-demo.tsx`

```tsx
import * as React from "react";

import { PluckString } from "@/components/ui/pluck-string";

const releases = [
  {
    version: "2.4.0",
    date: "Oct 2",
    title: "Springs, everywhere",
    body: "Every transition now runs on a spring, so interrupting one never snaps.",
  },
  {
    version: "2.3.1",
    date: "Sep 18",
    title: "Quieter dark mode",
    body: "Borders and dividers sit a step lower, so content leads.",
  },
  {
    version: "2.3.0",
    date: "Sep 4",
    title: "Reduced motion, by default",
    body: "Movement drops out for people who ask for less. Feedback stays.",
  },
];

export function PluckStringChangelogDemo() {
  return (
    <div className="w-full max-w-xl">
      <p className="font-mono text-xs uppercase tracking-widest text-zinc-500">Changelog</p>
      <div className="mt-4">
        {releases.map((release, index) => (
          <React.Fragment key={release.version}>
            {index > 0 ? (
              <PluckString
                fade
                pull={16}
                className="h-12 text-zinc-200 dark:text-zinc-800"
                highlightClassName="text-zinc-500 dark:text-zinc-400"
              />
            ) : null}
            <article className="grid gap-1 sm:grid-cols-[7rem_1fr] sm:gap-6">
              <div className="flex gap-3 font-mono text-xs text-zinc-500 sm:flex-col sm:gap-1 sm:pt-1">
                <span className="text-zinc-900 dark:text-zinc-100">v{release.version}</span>
                <span>{release.date}</span>
              </div>
              <div>
                <h4 className="font-medium text-zinc-900 dark:text-zinc-50">{release.title}</h4>
                <p className="mt-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
                  {release.body}
                </p>
              </div>
            </article>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}
```