Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Hover Details Changelog Block for Vue

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 Vue with Ark 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.

All 200 changelog blocks