# Release Pill: Launch Week

> The closed pill cycles through the week's announcements. Opened, it lists the days and ends on a dimmed, locked Day 4 row with a live countdown.

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

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/release-pill-launch-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/release-pill-launch-demo-light-e8c29235d0599dcf.png
- Registry item: https://keyframeui.com/r/release-pill-launch-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-launch-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-launch-demo

## Files

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

```tsx
"use client";

import * as React from "react";

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

const releases: Release[] = [
  {
    version: "Day 3",
    title: "Usage-based pricing",
    date: "Wed",
    href: "#day-3",
    summary: "Pay for the runs you make. Nothing else, no seats.",
  },
  { version: "Day 2", title: "Slack approvals", date: "Tue", href: "#day-2" },
  { version: "Day 1", title: "Agents 2.0", date: "Mon", href: "#day-1" },
];

// Day 4 unlocks 14h 32m after the demo loads.
const UNLOCK_SECONDS = 14 * 3600 + 32 * 60;

function Countdown() {
  const [left, setLeft] = React.useState(UNLOCK_SECONDS);
  React.useEffect(() => {
    const timer = window.setInterval(() => setLeft((s) => Math.max(0, s - 1)), 1000);
    return () => window.clearInterval(timer);
  }, []);
  const minutes = Math.ceil(left / 60);
  return (
    <span className="tabular-nums">
      in {Math.floor(minutes / 60)}h {String(minutes % 60).padStart(2, "0")}m
    </span>
  );
}

function LockedDay() {
  return (
    <div aria-disabled="true" className="flex items-center gap-3 text-muted-foreground opacity-60 select-none">
      <svg
        aria-hidden
        viewBox="0 0 16 16"
        className="size-3.5 shrink-0"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <rect x="3" y="7" width="10" height="7" rx="2" />
        <path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" />
      </svg>
      <span className="sr-only">Locked.</span>
      <span className="font-medium">Day 4 · Tomorrow</span>
      <span className="ml-auto text-xs">
        <Countdown />
      </span>
    </div>
  );
}

export function ReleasePillLaunchDemo() {
  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}
        tag="Launch week"
        changelogHref="#launch-week"
        cycle
      >
        <LockedDay />
      </ReleasePill>

      <h2 className="mt-7 max-w-[14ch] text-4xl/[1.05] font-semibold tracking-tight text-balance sm:text-6xl/[1.03]">
        One new thing, every morning
      </h2>
      <p className="mt-5 max-w-md text-base/7 text-pretty text-muted-foreground">
        Launch week is here. Three days in, three things shipped, and the best one is still to
        come.
      </p>

      <a
        href="#remind"
        className="mt-9 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"
      >
        Remind me tomorrow
      </a>
    </section>
  );
}
```