# What's New Dialog

> A release-notes dialog on Base UI that pages through what changed. Each slide has a picture, a tag, a title and a few lines. Slides move the way you go, by Back and Next, the dots, arrow keys or a swipe, and the text keeps the tallest slide's height so the buttons never jump. Next becomes Got it on the last slide, with the full changelog and Don't show again below. Also exports WhatsNewBadge.

- Slug: `whats-new-dialog`
- Category: [Dialogs](https://www.assembli.design/category/dialogs.md)
- Type: component
- Tags: whats-new, changelog, release-notes, announcement, onboarding, dialog, slides, modal
- npm dependencies: @base-ui/react, lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/whats-new-dialog
- Page: https://www.assembli.design/components/whats-new-dialog

![What's New Dialog preview](https://www.assembli.design/thumbnails/whats-new-dialog-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `slides` (required) | `WhatsNewSlide[]` |  |  |
| `version` | `string` |  | Shown as a chip over the media, e.g. "4.2". |
| `date` | `string` |  | Release date as you want it shown, e.g. "Oct 28". |
| `heading` | `string` | `"What's new"` | The dialog's name, read out on open and shown beside the version. |
| `open` | `boolean` |  |  |
| `defaultOpen` | `boolean` | `false` |  |
| `onOpenChange` | `(open: boolean) => void` |  |  |
| `trigger` | `React.ReactElement` |  | The element that opens the dialog, e.g. a `WhatsNewBadge`. |
| `changelogHref` | `string` |  | Adds "Full changelog" to the footer. |
| `onDontShowAgainChange` | `(dontShowAgain: boolean) => void` |  | Shows a "Don't show again" checkbox. Store the answer and skip opening next time. |
| `onFinish` | `() => void` |  | Called when someone reaches the last slide and presses Got it. |
| `container` | `HTMLElement \| React.RefObject<HTMLElement \| null> \| null` |  | Where the dialog portals to. Pass a positioned element to keep it inside a frame. |
| `className` | `string` |  |  |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/whats-new-dialog/whats-new-dialog.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/whats-new-dialog
```

Registry item JSON: https://www.assembli.design/r/whats-new-dialog.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.