Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Desktop App Changelog Block for React Aria

A desktop-app release page: a framed download panel with system tabs, a Stable and Beta switch, the file, its size, a copyable checksum and a Shine Button download link, beside the release's version, date and three changes.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A desktop app changelog for React with React Aria, written for Deskbound, a fictional desktop notes app. A split puts a framed download panel first on a wide screen and just under the header on a phone. The panel has Tabs for macOS, Windows and Linux, a Segment Group for Stable and Beta, and for the chosen pair the version, the file name, its size, what it needs, a checksum with a Copy button and a Shine Button link, Download for macOS. Beside it the release's version, date and three changes carry a kind each. It's built from Guides, Tabs, Segment Group, Copy Button, Shine Button and Badge, with CSS transitions for the entrance. For release pages of apps people install. The builds and checksums are example values.

FAQ

What does the Copy button copy?

The full SHA-256 checksum of the chosen build, although the panel shows only its start. The button has a name that says which file it is for and announces when it has copied.

What happens when I change the system or the channel?

The panel shows that build's version, file, size, requirements and checksum, and the button's label follows the system. All six panels share one grid cell with the others unseen, so the page never moves.

How do I use it with a keyboard?

Tab reaches the system tabs, and the arrow keys move between them. The channel switch is a group of two options you move between the same way, and the button and the Copy button are ordinary tab stops.

How does it fit a phone and a right-to-left layout?

On a phone the panel comes straight after the header and the notes follow. File names and checksums keep their left-to-right order inside a right-to-left page.