# Release card (goodtabs UI)

A changelog entry with a version eyebrow, a title, grouped changes and a link.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/release-card.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/release-card`

## Usage

```tsx
import { ReleaseCard } from "@/components/ui/release-card"

<ReleaseCard
  version="v1.4.0"
  date="29 Oct 2026"
  title="Saved items sync"
  changes={[{ kind: "added", items: ["Saves sync across devices"] }]}
  href="/changelog/1-4-0"
>
  <p>Saves now follow you between devices.</p>
</ReleaseCard>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| version | `string` |  | The version, shown first in the mono eyebrow. |
| date | `string` |  | The date, already formatted, shown after the version. |
| title | `string` |  | The headline of the release. |
| children | `ReactNode` |  | Short body under the title. |
| changes | `{ kind: "added" | "changed" | "fixed" | "removed"; items: string[] }[]` |  | Changes grouped by kind. Each group gets a small mono label. |
| href | `string` |  | Link to the full notes, shown as a plain arrow link. |

## When to use

- A changelog page, one card per release
- A what's new panel inside an app or a docs sidebar
- Release notes in an email or a blog post rendered as cards

## When not to use

- A single line per release, where a table or a plain list scans faster
- Commit logs; the groups assume human written notes
- Marketing announcements that need an image or a call to action

## Notes for agents

- Server component. Format the date before passing it; the card does not know about locales
- Groups render in the order given and empty groups are skipped; kinds are added, changed, fixed and removed
- The link is a plain anchor; wrap or replace it with your router's Link by passing href and handling navigation yourself
- For a timeline, put cards in a list with border-l and a dot per item; see the timeline demo

Docs: https://ui.goodtabs.co/components/release-card