# Changelog section (goodtabs UI)

A dated release log with a version, a title and short notes per entry.

## Install

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

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

## Usage

```tsx
import { ChangelogSection } from "@/components/changelog-section"

<ChangelogSection
  eyebrow="Changelog"
  title="What shipped"
  entries={[{ date: "2026-11-03", version: "v2.4", title: "Keyboard first tables", items: ["Arrow keys move between cells"] }]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| eyebrow | `string` |  | Small uppercase line above the title. |
| title | `ReactNode` |  | The section heading. |
| entries | `{ date: string; version?: string; title: string; items?: string[] }[]` |  | Newest first. date is ISO and also sets the time element. |
| size | `"sm" | "default"` | `"default"` | Spacing scale. sm fits a card. |

## When to use

- A public release log on a product or docs site
- When dates matter and readers scan for what is new

## When not to use

- For one announcement, use an announcement bar
- For long release notes with screenshots, link to a post

## Notes for agents

- Server component with no state
- Dates are ISO strings formatted in UTC as 5 Nov 2026, so server and client agree
- The section carries py-16 lg:py-24 and a max-w-3xl column; place it directly in main

Docs: https://ui.goodtabs.co/components/changelog-section