Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Platform Specific Changelog Block for Solid

A band of four tabs (Web, iOS, Android, API) with an entry count each, over the chosen platform's releases as rows that end the block, the first row applying to every platform.

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 per-platform changelog for Solid with Ark UI, written for Fourways, a fictional cross-platform task app. A compact header carries the title and one sentence. Under a band rule, a band of four tabs (Web, iOS, Android, API) runs from rail to rail, each tab with the number of entries it holds, and the chosen platform's releases sit under it as rows that end the block. A row gives the version and the day, one line saying what changed and a type tag, an outline badge with an icon and a word (New, Improved, Fixed, Deprecated). The release that applies to every platform is the first row of all four tabs and says so with a badge. Every platform's list sits unseen in the same cell, so changing tab never moves the page. On a phone the tab band scrolls sideways. It's built from Guides, Badge and Tabs, with CSS transitions for the entrance and your theme's tokens for every colour. For products that ship on several platforms on different schedules, and for SDK and API release pages. The releases are example data.

FAQ

How do I change the platforms and entries?

Edit PLATFORMS at the top of the file. A platform has an id, a name and its entries, newest first. An entry has a version, an ISO date, a kind, one text sentence and shared, true for the one that applies to every platform. EVERYWHERE is that entry, and it is placed first in each list. The count on each tab is the length of its list, so it stays true when you edit.

How do the tabs work?

They are the catalog's Tabs: arrow keys move between the tabs, Home and End go to the first and last, and the chosen tab's panel is the only one the reader can reach. A visually hidden polite line says which platform is showing and how many entries it has. Each tab's name includes its count ("Web 4 entries"), so the number is spoken with it.

Why does the page not move when I change tab?

Platforms have different numbers of entries, so every list is also laid out unseen in the same grid cell, and the tallest sets the cell's height. The unseen copies are hidden from assistive technology and the keyboard.

How are the change types told apart without colour?

Each type is an outline badge with an icon and the word: sparkles for New, a rising line for Improved, a wrench for Fixed and an archive box for Deprecated. The icons are decoration, so a screen reader hears the word.

How does it fit on a phone?

Below lg the tab band scrolls sideways inside its own box, so the tabs keep a readable width, and each row puts the version and day on one line above the sentence. Nothing else on the page moves sideways at 320 pixels.

What moves, and what happens with reduced motion?

The header and the band fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears. Changing tab swaps the rows at once.

All 200 changelog blocks