shadcn.io is not affiliated with official shadcn/ui
Category Browser Changelog Block for Ark UI
A three-by-two browser of changelog topics: each cell has a drawn icon, the topic's name as its link, an entry count and its newest entry with version and date.
Installation
Overview
A changelog category browser for React with Ark UI, written for Stickerbook, a fictional chat app. A centred header sits over six cells, three by two, each a topic of the changelog: Stickers, Reactions, Groups, Search, Calls and Privacy. A cell has a line icon on a plate (never an emoji), the topic's name as its one link, how many entries it holds and the title, version and date of its newest entry. The whole cell takes the hover and the focus ring. It's built from Guides and lucide icons, with CSS transitions for the entrance and your theme's tokens for every colour. For apps with many kinds of change that want readers to pick a topic first. The topics and entries are example data.
FAQ
Why does a block named emoji use icons?
The slug keeps its URL. The cells use drawn line icons instead of emoji, so they look the same on every device and follow your theme's colour.
Where do the links go?
Each topic's name links to #; point href at the topic's page. The link covers the whole cell with a stretched ::after, so there's one tab stop per cell and the focus ring wraps the cell.
How do I change the topics?
Edit TOPICS: an id, a name, an icon from lucide, a count, and the newest entry's newest title, version and ISO date. The total in the header is computed from the counts. Dates are fixed, never computed from today.