Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Hover Details Changelog Block for React

Release titles only, until you rest on a row or tab to it: the sentence that explains it then opens with a CSS height transition. Every sentence is open on phones and in the page for screen readers.

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 hover-reveal changelog for React with Base UI, written for Peekdeck, a fictional note-linking app. A centred header over five rows rail to rail, newest first. Each row shows the version, the day, the title (a link to the release) and a type tag. From lg the sentence that explains the release stays folded until the pointer rests on its row or keyboard focus lands inside it, then a CSS grid-row transition opens it and a chevron turns. The text is in the page from the start, so a screen reader reads every sentence and nothing waits for a hover; below lg every sentence is open. The list reserves the height of one open row, so opening a row never moves what follows the block. It needs no state and no script. It's built from Guides and Badge, with your theme's tokens for every colour. The releases are example data.

FAQ

How do I change the releases?

Edit RELEASES at the top of the file, newest first: each has a version, a date as an ISO day, a title, a detail (the sentence that opens) and a kind. If your sentences are much longer or shorter, change the lg:min-h-88 on the list so it still holds one open row.

How does it work without a mouse?

Each title is a real link, so tabbing to it puts focus inside the row and the row opens (group-focus-within); tabbing on closes it. Nothing needs a hover, and below lg (phones and tablets) every sentence is already open, so touch never depends on hover.

What does a screen reader hear?

Every row in full: version, day, the title as a link, the type tag and the sentence, in that order, whether or not it is folded on screen. The folded sentence is clipped, not removed. The chevron is decoration.

Doesn't opening a row move the page?

Inside the block the rows below the opened one slide down. The block itself keeps its height, because the list reserves room for one open row, so the blocks after it stay where they are.

What moves, and what happens with reduced motion?

The header and rows fade up once on load, and a row's height and chevron animate for 300 ms when it opens. With reduced motion all of that is off: the row opens at once.

  • Pro

    Expandable Release Entries

    Lists and timelines

    Four release rows that each open to a sentence and a copyable migration snippet in a focusable code region; the newest is open on load and any number can be open.

  • Pro

    Accordion Changelog

    Lists and timelines

    A release list for release-notes software: five releases as accordion rows, each with its version, date, one-line summary and change count, the newest open on a list of typed changes, and a foot band that links to every release.

  • Pro

    Condensed Feed Changelog

    Lists and timelines

    Twelve releases of a news reader as a single-line ledger: the day, a type word, the headline and the version on one row, month rows between, and the older rows opening in place.

  • Pro

    Compact Badges Changelog

    Lists and timelines

    The eight latest releases of a ticketing tool as one dense framed table: a mono version badge, a type tag with an icon and a word, what changed and the day it shipped.

  • Pro

    Quiet Mono Release Log

    Lists and timelines

    A quiet release log of five single mono lines: an inverted version chip, a plain date, a sigil and a word for the kind of change, and the change itself, between hairlines.

  • Pro

    Image Preview Changelog

    Spotlights and media

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

All 200 changelog blocks