shadcn.io is not affiliated with official shadcn/ui
Before After Changelog Block for React
A compare slider for a design-handoff tool's release: one drawn editor window, its fourteen cramped toolbar icons before and three labelled groups after, under a draggable divider that also answers the arrow keys, with a short table of what changed.
Installation
Overview
A before-and-after changelog for React with Base UI, written for Specwise, a fictional design-handoff tool, and its 2.8 release. One greyscale editor window (a toolbar over a canvas with a selected card and a sidebar of fields) is drawn twice under a compare slider. On the start side of the divider it is the old window: fourteen small icons crowded along the toolbar, none named. On the other side it is the new one: nine larger icons in three labelled groups (Draw, Arrange, Share) and a More button. A native range input lies over the stage, so a mouse drag, a tap and the arrow keys all move the divider, and a round handle and a Before and After chip show where you are. Under the frame, two captions say what each drawing is. In the end column, the headline, the release's version, date and Improved tag, and a short table of what changed in numbers (icons in view, group labels, click target), with a link to the release notes. The frame sits in a split with its divider running from the page's top rule to the block's end; on a phone the title comes first, then the slider, then the table. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Badge, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For redesign announcements, UI changelogs and any release where seeing the change beats describing it. The release and its numbers are example data; the drawing is never a screenshot.
FAQ
How do I swap in my own before and after?
The two drawings are BeforePanel and AfterPanel, each an absolutely positioned layer that fills the stage and shares the same canvas and sidebar (AppBody); the second is clipped from the divider's position to the end. Replace either with your own markup or a screenshot (give a picture a text alternative if it carries information; here the drawings are decoration, hidden from assistive technology, because the captions and the table say the same). The numbers in the table come from CHANGES, and the captions are plain text under the frame: keep them true to the drawings.
How does the slider work with a keyboard, a touch screen and a screen reader?
It is a native range input named Compare before and after, laid over the stage with its track as wide as the stage. A mouse drag or a tap anywhere on the stage moves the divider; on a touch screen a vertical swipe still scrolls the page. Tab focuses it (the whole stage gets a focus ring), the arrow keys move the divider by one percent and Page Up and Down by ten, and a screen reader hears the value as, for example, "50% before, 50% after". In a right-to-left layout the figure keeps its direction, so Before stays on the same side as the drawing it labels.
Why a table of numbers beside the slider?
The slider is for seeing, the table for checking: each row names a measure and shows the old value struck through, an arrow and the new one, with "Before:" and "After:" spoken by a screen reader. Edit CHANGES to match your own redesign, and drop a row rather than invent a number.
Where does the link go?
Read the release notes is a link (href="#"): point it at the release's page. It is a ghost button, so the block has no primary action.
The button renders the link it's given with render, with nativeButton={false}.
What moves, and what happens with reduced motion?
The headline, the frame and the table fade up once on load, with CSS transitions (below the first screen on a phone, the table simply appears). With reduced motion the entrances are off and the block simply appears. The divider moves only when you move it, and it has no animation of its own.
How does it fit on a phone?
Below the lg breakpoint the parts stack: the title and sentence, the slider, then the table under a rule with + marks. The sidebar of fields is hidden, the toolbar in the old drawing wraps onto a second row (which is how crowded it was) and the new one wraps its groups; the two captions sit side by side under the frame. Nothing scrolls sideways at 320 pixels.
Related
- Pro
Feature Spotlight Changelog
Spotlights and mediaOne release with its headline feature in the spotlight: a drawn greyscale editor with two named cursors beside the title and why it matters, and a band of four smaller changes underneath.
- Pro
Image Preview Changelog
Spotlights and mediaSix releases as figures, each with a drawn greyscale thumbnail of what shipped (a table, a dialog, a chart, a menu, a calendar, a settings form) and a caption; resting on a thumbnail opens a larger copy in a card.
- AaAaPro
Design System Changelog
Packages and versionsA framed table of design-token changes where each old and new value is drawn as its kind (a corner, a gap, a shadow, a type sample) with the value as text, a New, Updated or Deprecated word, and a filter that dims instead of hiding.
- Pro
Component Library Changelog
Packages and versionsSix components of a React library as rows with a version ladder of chips (solid for a major step, outlined for minor and patch, each with a word), a Breaking mark, and a collapsible list of the changes.
- 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.
- Pro
Changelog Hero
Updates and timelinesA compact centred hero for a build platform that ships weekly, over three release cells with hairlines that overshoot their corners.