Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Markdown Preview Changelog Block for Radix UI

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 Radix 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.

All 200 changelog blocks