Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

AI Generated Summary Changelog Block for Vue

A release summarised in three sentences, each ending in numbered citation chips that open the changelog entry they came from, with a sources list, three counted figures and an honest note on who reviewed it.

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

An AI-generated summary changelog for Vue with Ark UI, written for Gistbox, a fictional release-notes writer. A split shows a three-sentence summary of v3.2.0 on one side; every sentence ends in numbered citation chips ([1], [2]) that are buttons opening a popover with the changelog entry the claim came from. On the other side three figures (entries, breaking, security) are counted from 14 typed entries, a numbered list gives the sources in the order they are first cited, and a note says who reviewed the summary. It's built from Guides, Popover, Data List and Badge, with CSS transitions for the entrance. For release pages that show their working. The entries, the summary and the reviewer are example text.

FAQ

How are the citation numbers decided?

The sources list is built from the sentences: each cited entry appears once, in the order it is first cited, and a chip's number is its place in that list. The chips and the list cannot disagree, and adding a citation renumbers both.

Where do the three figures come from?

They are counted from the 14 typed entries: how many there are, how many are marked breaking, and how many are security changes. Edit the entries and the figures follow.

Is this really written by a model?

No. This is example text. The note under the summary shows the shape of an honest disclosure, who summarised it and who reviewed it and when, which you replace with your own process. Nothing in the block calls a model.

How do the citations work with a keyboard?

Each chip is a button in the text. Tab reaches it, Enter or Space opens the popover, Escape closes it and returns focus to the chip. A screen reader hears the number and the entry's title.

What happens on a phone and in a right-to-left layout?

The sources move under the summary and the popover stays inside the screen. Chip numbers, versions and dates keep their own direction inside a right-to-left page.

All 200 changelog blocks