shadcn.io is not affiliated with official shadcn/ui
Release Blockers Changelog Block for Svelte
A verdict header counted from the data with a cleared bar, a toggle group (Open, Cleared, All) and an inset framed table of blockers with owners, states as shapes and words, and the day each was opened.
Installation
Overview
A release-blockers list for Svelte with Ark UI, written for Gatekeel, a fictional release-management tool. The header gives the verdict counted from the data ("2 blockers remain before v6.1.0 can ship") with a bar at its end that says how many are cleared ("4 of 6 cleared"). A toggle group chooses Open, Cleared or All, each with its count, and a polite line reads how many rows are showing. The rows sit in an inset framed table with + marks on its corners and hairlines between rows: the id in mono, the blocker's title, its owner (initials in an avatar), the state as a shape and a word (a ring for open, a filled square for cleared) and the day it was opened. The one open critical blocker carries the block's only status dot and a "Critical" badge with an icon. On a phone the owner and the day are dropped and the id moves above the title. It's built from Guides, Toggle Group, Progress, Avatar, Badge and Status, with CSS transitions for the entrance and your theme's tokens for every colour. For release dashboards, launch checklists and changelogs that say what is still in the way. The blockers are example data.
FAQ
How do I change the blockers?
Edit BLOCKERS at the top of the file. A blocker is an id, a title, an owner with initials, an opened day as an ISO date ("2026-07-06") and a cleared flag; add critical to the one that stops the release outright. The headline's count, the "4 of 6 cleared" line, the bar and the filter counts are all computed from the list, and the day on screen ("Jul 6, 2026") is spelled out from the ISO day by a small helper, so it reads the same on the server and in every browser. Dates are fixed, never computed from today.
Why is there only one status dot?
A status colour should mean a real alert, so only the open critical blocker gets one, with the word "Critical" beside it. Every other state is a shape and a word in the foreground colour: a ring and "Open", a filled square and "Cleared". Colour is never the only signal, and in a greyscale or high-contrast theme nothing is lost.
How does the filter work?
The toggle group chooses one view and the table shows only those rows. Pressing the chosen item again does nothing, so the table is never empty. The table's height follows the filter, since two rows are shorter than six. A polite status line announces how many rows are showing.
Is it a real table?
Yes: a native table with a caption, column headers with scope, and the blocker's title as the row header. The caption is visually hidden because the heading above already introduces the list. The states are words as well as shapes, so a screen reader hears "Open" or "Cleared" for each row.
How does it fit on a phone and in a right-to-left layout?
Below sm the Owner and Opened columns are dropped and the id sits above the title, so each row keeps its title and state without scrolling sideways at 320 pixels. The toggles wrap onto a second line if they must. In a right-to-left layout the table mirrors, while ids, dates and counts stay in reading order.