Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Markdown Preview Changelog Block for React

One set of release notes shown two ways in a framed panel: a Preview and Markdown toggle switches between the rendered notes and their source, and Copy markdown copies the source.

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 release-notes changelog for React with Base UI, written for Markwell, a fictional release-note editor. A start-aligned header has a two-button toggle at its end, Preview and Markdown. Under it a framed panel shows one set of notes for version 2.9.0: in Preview the notes as readers see them, with a heading, a sentence with bold text and inline code, a list and a link; in Markdown the same notes as source, in a focusable region of pre and code, with the markers dimmed. A Copy markdown button in the panel's bar copies the source from either view. Both views are drawn from one typed list of spans, so they cannot drift, and they share one grid cell so the panel keeps its height when you switch. It's built from Toggle Group, Copy Button, Prose and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For editors, publishing tools and any changelog that ships notes as Markdown. The notes are example data.

FAQ

How do I change the notes?

Edit NOTES at the top of the file. It is a list of blocks, each a heading, a paragraph or a list, and each made of spans written with four small helpers: text, bold, code and link. The preview, the Markdown on screen and the text that Copy markdown copies are all produced from that one list. A link keeps its address in the Markdown; in the preview it points to #, so set the real address where you use it.

Does it parse Markdown?

No. It prints one typed list twice, once as notes and once as source, which is what keeps the two honest. To show Markdown a user typed, swap the preview for a Markdown renderer you trust and keep the source view as it is.

How does the toggle work, and why does the panel not change height?

It is a single-choice toggle group, so one view is always on, and it starts on Preview. Both views sit in one grid cell, one over the other, and the one that is not shown is invisible, hidden from assistive technology and out of the tab order. The source region is focusable, so a keyboard user can scroll it.

What does Copy markdown copy?

The exact source, the same text the Markdown view prints, from either view, with the Clipboard API, which needs a secure page. The button announces "Copied" politely, or says the copy failed. Nothing is sent anywhere.

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

On a phone the toggle sits under the title and the source wraps instead of scrolling. In a right-to-left layout the frame mirrors, while the source stays left to right, as code should.

What moves, and what happens with reduced motion?

The header and the panel fade up once on load, with CSS transitions. Switching views swaps the text at once. With reduced motion the entrance is off and the block simply appears.

  • Pro

    Release Notes Changelog

    Spotlights and media

    One release written as a long article behind a split divider, with a sticky contents list that marks the section on screen and turns into a row of chips on a phone.

  • 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

    Code Diff Changelog

    Code and commits

    A diffstat header with a drawn five-square glyph and a chip per file, over a framed code window that plays one function's change once and a Copy patch button.

  • Pro

    Inline Code Changelog

    APIs and integrations

    Three releases of an API client whose routes, flags and headers are code chips that copy their own text on click, with a tooltip, a polite Copied line and one key shown as a Kbd.

  • 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

    AI Generated Summary Changelog

    Spotlights and media

    A release summarised in three sentences, each ending in numbered citation chips that open the changelog entry they came from, with a sources list, three counted figures and an honest note on who reviewed it.

All 200 changelog blocks