# Release Pill: Hero Badge

> An AI startup's hero with the pill above the headline. Hover it and the changelog opens over the headline; a couple of seconds after it scrolls into view it peeks at the second row once, and the version rolls from v2.3 to v2.4.

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

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/release-pill-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/release-pill-demo-light-0e1f781b6c5ff50a.png
- Registry item: https://keyframeui.com/r/release-pill-demo.json
- Categories: badge, hover, changelog
- Listed: 2026-10-14, source last changed 2026-10-15

## Install

```bash
npx shadcn@latest add https://keyframeui.com/r/release-pill-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/release-pill.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/release-pill#release-pill-demo

## Files

### `registry/demos/release-pill-demo.tsx`

```tsx
import { ReleasePill, type Release } from "@/components/ui/release-pill";

const releases: Release[] = [
  {
    version: "v2.4",
    title: "Agents 2.0",
    date: "Oct 10",
    href: "#agents-2",
    summary: "Agents that plan, act and check their own work.",
  },
  { version: "v2.3", title: "Slack approvals", date: "Sep 26", href: "#slack-approvals" },
  { version: "v2.2", title: "SOC 2 Type II", date: "Sep 12", href: "#soc-2" },
  { version: "v2.1", title: "Scheduled runs", date: "Aug 29", href: "#scheduled-runs" },
];

export function ReleasePillDemo() {
  return (
    <section className="relative flex w-full max-w-3xl flex-col items-center px-6 py-16 text-center text-foreground sm:py-24">
      <ReleasePill releases={releases} changelogHref="#changelog" peek />

      <h2 className="mt-7 max-w-[15ch] text-4xl/[1.05] font-semibold tracking-tight text-balance sm:text-6xl/[1.03]">
        The agent that does the busywork
      </h2>
      <p className="mt-5 max-w-md text-base/7 text-pretty text-muted-foreground">
        Hand it the weekly report, the expense chasing and the calendar tetris. It plans the steps,
        does them, and checks its own work before it tells you.
      </p>

      <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
        <a
          href="#start"
          className="inline-flex h-11 items-center rounded-full bg-foreground px-6 text-sm font-medium text-background outline-none hover:opacity-90 focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
        >
          Start for free
        </a>
        <a
          href="#demo"
          className="inline-flex h-11 items-center rounded-full px-6 text-sm font-medium ring-1 ring-foreground/15 outline-none hover:bg-foreground/5 focus-visible:ring-2 focus-visible:ring-foreground"
        >
          Watch a demo
        </a>
      </div>
    </section>
  );
}
```