shadcn.io is not affiliated with official shadcn/ui
Reorderable Digest Changelog Block for React
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.
Installation
Overview
A reorderable digest for React with Base 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."
Related
- Pro
Filterable Changelog
Filters and browsingThe plainest filtered release list: one row of choices with counts (All, New, Improved, Fixed, Security) over nine releases, a live count of what is showing, and a height that never changes.
- Pro
Checklist Style Changelog
Votes and sharingA "tried it" checklist of the six latest things a task board shipped: a real checkbox per feature with its version and day, a count in the header and a meter that fills as you tick.
- Pro
Category Sections Changelog
Filters and browsingA changelog for a file organiser grouped under Added, Improved and Fixed headings, with a sticky index of the three sections beside them and every change tagged with the release it shipped in.
- Pro
Color Coded Changelog
Lists and timelinesA changelog for a palette tool whose five kinds of change are coded without colour: a pattern strip, an icon and a word each, with a legend that dims the other rows in place.
- Pro
Bookmark Saves Changelog
Votes and sharingA release list you can save from: six releases as hairline rows in a framed list, each with a bookmark toggle, under a header with All and Saved tabs whose counts follow your saves and an empty state when nothing is saved.
- Pro
Release Timeline Changelog
Lists and timelinesA 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.