Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

SDK Versions Changelog Block for Vue

Client libraries in one tabbed window: a tab per language with its latest version, then that version large, its day, a support state as a shape and a word, the install command in a code region with a Copy button, and a table of the last three versions.

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 SDK changelog for Vue with Ark UI, written for Libshelf, a fictional set of client libraries for a booking API. Under a centred headline sits an inset framed window on the page's lines, its tab list on the top rule: JavaScript, Python, Go and Ruby, each with its latest version. A panel gives that version in large type, the day it shipped and the library's support state as a shape and a word (a filled square for Current, a half one for Maintenance, an empty one for Deprecated, with a short hint); then the install command in a focusable code region with a Copy button that tells screen readers when it has copied; then a table of the language's last three versions with what changed in each. Every language's panel is stacked unseen under the open one, so switching tabs never moves the page. It's built from Tabs, Copy Button, Guides and a native table, with CSS transitions for the entrance and your theme's tokens for every colour. For client-library pages, SDK release notes and any product that ships in several languages. The shelf command, the packages and the versions are example data.

FAQ

How do I change the languages and versions?

Edit SDKS at the top of the file. A language is an id, a name, its install command, a support state and its three latest releases (a version, an ISO date and a one-line note). The latest version in the tab, the large figure and the table all come from the first release, and the dates are spelled out by a small helper, so they read the same on the server and in every browser.

How is support shown without colour?

A shape and a word: a filled square and "Current", a half-filled square and "Maintenance", an empty square and "Deprecated", with a short hint beside each ("Security fixes only", "Ends Dec 31, 2026"). No status colour is used, so it reads the same in a greyscale theme.

What does the Copy button do?

It copies the command to the clipboard, swaps its icon for a check and, through a polite status line, tells screen readers "Copied the Python install command". If the clipboard refuses (a page not served over HTTPS, no permission) it says it couldn't copy. The command is also plain text in a focusable region, so it can be selected by hand and scrolls on a narrow phone.

How do the tabs work with a keyboard?

Tab enters the tab list, the arrow keys move between languages and select them, and Home and End jump to the ends. On a phone the tab list scrolls sideways when the four tabs don't fit. In a right-to-left layout the arrows follow the reading direction.

Why doesn't the window change height between tabs?

An unseen copy of every panel sits in the same grid cell as the open one, so the window is always as tall as the tallest. On a phone the table folds each note under its version rather than adding a column, which keeps the panels close in height.

What moves, and what happens with reduced motion?

The header and the window fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears. Switching tabs swaps the panel at once, and the Copy button's icon swap has no scale with reduced motion.

All 200 changelog blocks