Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Reorderable Digest Changelog Block for Radix UI

A list of five digest sections with Move up and Move down buttons and a pointer-drag grip; a drawn digest preview follows the order, and each move is announced.

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 reorderable digest for React with Radix UI, written for Shufflewell, a fictional digest tool. A split: at the start a header and an ordered list of five sections (New, Improved, Fixed, Security, Deprecated) with a position number, a name, a count and Move up and Move down buttons; at the end, past a divider, a drawn preview of the digest whose headings follow the order. The buttons are the whole interaction for a keyboard and announce "New moved to position 2 of 5"; the grip at each row's start also takes a pointer or touch drag, as an extra. Reset order restores the default. It's built from Guides and Button styles, with CSS transitions for the entrance and your theme's tokens for every colour. For digest builders, priority lists and any changelog a reader can order. The order lives in the block only.

FAQ

How does it work without a pointer?

Each row has two named buttons, Move up and Move down. Pressing one moves the row, keeps focus on that button (or on its partner when the row reaches an end of the list) and announces the new position in a polite live region.

How does the drag work?

Hold the grip and move up or down: the row follows the pointer and the others step aside when it crosses their middle, then it lands where you let go. It uses pointer events with pointer capture, so it works with a mouse, a pen and touch, with no drag-and-drop library. The announcement is the same as for the buttons.

Is the order saved?

No. It lives in the block's state and resets on reload; the block says "Kept in this demo only". To keep it, send order to your server from the move and drop handlers.

Why is the preview hidden from screen readers?

It repeats the list, so it's a drawing. The caption under it says the same thing as text: "Your digest opens with New, Improved, Fixed, Security and Deprecated, in that order."

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

Below lg the preview sits under the list, and rows drop their icon so the name and the two buttons fit at 320 pixels. In a right-to-left layout the split mirrors; the Up and Down arrows don't.

What moves?

The header and panels fade up once on load, with CSS transitions. A dragged row lifts with a shadow and follows the pointer; with reduced motion the entrance is off.

All 200 changelog blocks