Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Desktop App Changelog Block for React

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A desktop app changelog for React with Base UI, 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.

  • Pro

    Release Page Changelog

    Spotlights and media

    A release page as a split: the tag, date, commit with a Copy button and contributors at the start, and the changes, new contributors and a collapsible assets table at the end.

  • Pro

    SDK Versions Changelog

    APIs and integrations

    Client libraries in one tabbed window: a tab per language with its latest version, then that version large, its day, a support state as a shape and a word, the install command in a code region with a Copy button, and a table of the last three versions.

  • Pro

    Announcement Banner Changelog

    Spotlights and media

    A release announcement for a product-announcement tool: the latest release as the headline with three audience tabs that change its highlights and a Shine Button, and behind a split divider an Earlier list of the three releases before it.

  • Pro

    CLI Output Changelog

    APIs and integrations

    One command in a terminal window whose output switches between text, JSON and Markdown over the same five releases, with a Copy button for the command and an exit status.

  • Pro

    Release Timeline Changelog

    Lists and timelines

    A release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.

  • Pro

    Export PDF Changelog

    Votes and sharing

    A printable release-notes sheet for a docs-publishing tool: pick a release, tick the types of change to include, watch the drawn paper sheet re-flow, and print it or save it as a PDF through the browser's print dialog.

All 200 changelog blocks