Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Changelog Carousel Block for React Aria

Nine release notes on a hairline track, one at a time with the next older peeking, a filter for new, improved and fixed with counts, and a foot that names the latest and oldest releases instead of looping.

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

Page through release notes without a wall of text, with this changelog carousel for React with React Aria. Shipsheet, a release-notes site, shows nine of its own releases newest first, one a slide with the next older one peeking. Each slide has the version in mono, a kind tag (New, Improved or Fixed), a fixed date, a title and four notes. A Toggle Group in the toolbar band filters the track: "All 9, New 3, Improved 4, Fixed 2", the counts worked out from the releases, and a filter goes back to the newest release it shows and says "Showing 4 of 9". The track does not loop. Under it, the foot holds the counter ("Release 3 of 9"), a line that names the ends ("Latest release", "Oldest release"), a window of five dots and Newer and Older buttons that stay in the tab order at the ends. The ruled bands come from Guides. It's built from Carousel, Toggle Group, Badge, Button and Guides, with CSS transitions only. The releases are made up.

FAQ

How do I use my own releases?

Edit RELEASES, newest first: each has an id, a version, an ISO date, a kind, a title and four bullets. The filter buttons come from KINDS and their counts from the list, so add a kind in both places. Keep four notes of similar length; the slide holds a fixed height so the panel does not move between releases.

Why does it not loop?

A loop hides the ends of a list and moves focus past them. Release notes have an order, so the track stops at the latest and the oldest release, the foot says which end you are on, and Newer and Older are marked as unavailable there (they stay in the tab order, so focus never disappears).

What does the filter do?

It rebuilds the track with the releases of one kind and goes back to the first of them. The counter and the dots recount, and the foot says how many releases the filter shows. Each kind has at least one release; if you add a kind that can have none, show an empty state in the track's frame so the panel keeps its height. Embla re-measures when the slides change, and the block lands on the first release.

How does it work with a keyboard?

Tab reaches the filter, Newer, Older and the dots. With focus inside the panel, the arrow keys move the track by one release (mirrored in a right-to-left layout) and Home and End jump to the newest and the oldest. Releases that are out of view are hidden from the tab order and from screen readers.

What stays local in the demo?

Everything. The releases are typed example data and nothing is fetched or saved. To wire it for real, load your release notes from your CMS or your repository's releases into RELEASES.

How does it look on a phone?

One release shows with the next older one peeking at the edge. The filter scrolls sideways if it is wider than the screen, and the foot puts the counter and the buttons on one line with the dots under them.

All 100 carousel blocks