shadcn.io is not affiliated with official shadcn/ui
Deployment Log Tabs Changelog Block for Svelte
Tabs by environment with counts over a framed table of deploys: environment, commit with Copy, message, deployer, a duration micro-bar and a status word.
Installation
Overview
A deployment-log changelog for Svelte with Ark UI, written for Pushlog, a fictional deploy service. A start-aligned header counts the deploys from the data ("8 deploys in three days, 1 failed at Test") and carries a tab list at its end: All, Production, Staging and Preview, each with its count. Under it an inset framed table with + marks on its corners: the environment as an icon and a word, the commit with a Copy button that tells screen readers when it has copied, the message, who deployed it (initials in an avatar), the time it took as a micro bar drawn against the longest deploy plus the time in text, and a status as a shape and a word. The one failed deploy says "Failed at Test" and carries the block's only status mark. It's built from Guides, Tabs, Avatar, Copy Button and Status, with CSS transitions for the entrance and your theme's tokens for every colour. For release pages, audit trails and dashboards that show what went live. The deploys are example data.
FAQ
How do I change the deploys?
Edit DEPLOYS at the top of the file. A deploy has an environment (one of the three constants), a short commit, a message, who deployed it with their initials, the seconds it took, a UTC start time written as an ISO string ("2026-03-28T14:02") and, for a failure, the stage it stopped at. The tab counts, the headline, the bars and the dates are computed from the list; the dates are spelled out by a small helper so they read the same on the server and in every browser.
How do the tabs keep the page from moving?
Each tab shows only its own rows, and a copy of the All panel sits unseen in the same grid cell, so the frame is always as tall as the longest tab. Arrow keys move between tabs and the panel follows.
What does Copy do?
It puts the commit hash on your clipboard and says so to screen readers through a polite status line. It does not link to a repository or run anything.
Why is there only one status mark?
A status colour should mean a real failure, so only the failed deploy takes one, beside "Failed at Test". Everything else is a check or a word in the foreground colour, so the table reads the same in greyscale.
How does it fit on a phone and in a right-to-left layout?
On a phone the environment, the commit and the time move under the message and the duration drops, so each row keeps its message and its status without scrolling sideways. In a right-to-left layout the table mirrors while hashes, times and counts keep their reading order.