# Product Update Card

> Product update announcement card with a New badge and version label, feature headline, supporting detail, release date, and a link button.

A shadcn/ui block from the [@7ovr](https://7ovr.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/7ovr/announcement-2).

- Page, with a live preview: https://shadcn.exchange/r/7ovr/announcement-2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/7ovr/announcement-2-light-bbeacc9c870f74ce.png
- Registry item: https://7ovr.com/r/announcement-2.json
- Categories: announcement
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://7ovr.com/r/announcement-2.json
```

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

## Dependencies

- npm packages: `@base-ui/react`
- Registry items: `badge`, `button`, `card`

## Notes from the registry

Requires a `base-*` style in components.json (the `shadcn init` default). Legacy `new-york`/`radix-*` styles install Radix primitives, which reject the `render` prop this block uses.

## Files

### `registry/blocks/announcement/2/announcement-block.tsx`

```tsx
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { IconPlaceholder } from "@/components/icons/icon-placeholder"

const UPDATE = {
  label: "New",
  version: "v2.5",
  headline: "Acme Workflows just got a major upgrade",
  detail:
    "Parallel branching, conditional logic, and real-time run history are now generally available, with no feature flag required.",
  cta: "See What's New",
  date: "Released June 12, 2026",
  platform: "Acme Platform",
}

export default function AnnouncementBlock() {
  return (
    <section className="flex w-full items-center justify-center bg-background px-6 py-12 text-foreground">
      <Card className="w-full max-w-md">
        <CardHeader className="pb-0">
          <div className="flex items-center gap-2">
            <Badge variant="default">
              <IconPlaceholder
                lucide="Sparkles"
                tabler="IconSparkles"
                hugeicons="SparklesIcon"
                phosphor="Sparkle"
                remixicon="RiSparklingLine"
                data-icon="inline-start"
              />
              {UPDATE.label}
            </Badge>
            <span className="text-xs font-medium text-muted-foreground">
              {UPDATE.version}
            </span>
          </div>
        </CardHeader>

        <CardContent className="flex flex-col gap-3 pt-3">
          <h2 className="font-heading text-base leading-snug font-semibold text-foreground">
            {UPDATE.headline}
          </h2>
          <p className="text-xs/relaxed text-muted-foreground">
            {UPDATE.detail}
          </p>
        </CardContent>

        <CardFooter className="flex items-center justify-between gap-4">
          <div className="flex min-w-0 flex-col">
            <span className="truncate text-xs text-muted-foreground">
              {UPDATE.date}
            </span>
            <span className="truncate text-xs font-medium text-foreground/80">
              {UPDATE.platform}
            </span>
          </div>
          <Button size="sm" render={<a href="#" />} nativeButton={false}>
            {UPDATE.cta}
            <IconPlaceholder
              lucide="ArrowRight"
              tabler="IconArrowRight"
              hugeicons="ArrowRightIcon"
              phosphor="ArrowRight"
              remixicon="RiArrowRightLine"
              data-icon="inline-end"
            />
          </Button>
        </CardFooter>
      </Card>
    </section>
  )
}
```