Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dialog examples · Standard

Scrollable with Sticky Header Dialog for React

A changelog dialog whose header stays in place while the release notes scroll beneath it.

Framework
UI library

When the header scrolls away, people lose track of what they're reading. This React dialog keeps the Changelog title and its border in place while the release notes scroll in a Scroll Area beneath it. It's shadcn.io's Dialog on Base UI.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does the header stay in place?

Only the scroll area scrolls. DialogContent takes gap-0 p-0, the header gets its own padding and a border-b, and the scroll area sits between it and the footer.

Why the border under the header?

It marks where the fixed part ends and the scrolling part starts. The footer has a matching border-t.

Why remove the dialog's padding?

So the borders run edge to edge. Each section adds its own px-6.

Where do the releases come from?

A static array at module scope, each release mapped to a heading and a list. Load your own changelog instead.

Can the header show a shadow while scrolling?

Yes: listen to the scroll area's scroll position and add shadow-sm to the header when it's past the top.

All 17 dialog examples