Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Copyable URL Preview Deployments Block for React

An inset framed table of preview environments: branch, pull request, a state shape and word, the preview URL with a Copy button that announces itself, and age, with a building row and a failed row with its log link.

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 table of preview deployments for React with Base UI, written for Prevue, a fictional preview-environment service. The header counts them from the data ("6 previews: 3 ready, 1 building, 1 queued, 1 failed") and an inset framed table, with + marks on its corners, lists one row per pull request: the branch in mono, the pull request number, the state as a shape and a word (a checked filled square for Ready, a half-filled one for Building, an empty one for Queued), the preview URL with a Copy button, and its age. The building row draws a short bar that sweeps four times and rests; the one failed row carries the block's only status dot, the word Failed and a "View the log" link. Copy puts the full https:// address on the clipboard and a polite status line says which one was copied; a refusal is announced too. On a phone the pull request number and the age drop, the state moves under the branch and each URL truncates on its own line with Copy beside it. It's built from Copy Button, Status and Guides, with your theme's tokens for every colour. The addresses use a reserved example domain, and the previews are example data.

FAQ

How do I change the previews?

Edit PREVIEWS at the top of the file: each has a branch, a pull request number, a state (ready, building, queued or failed), the preview URL without the scheme and an age with its ISO duration for the time element. The summary in the header counts the states from that list. The data is example data and the domain is a reserved example one.

What does Copy do, and how is it announced?

It writes https:// plus the row's URL to the clipboard, swaps its icon for a check for three seconds and a polite status line reads "Copied the preview URL for feat/checkout-v2". If the browser refuses (no permission, or a page not served over HTTPS), the icon shows a cross and the status says it couldn't copy. Each button's name includes the branch, so the six are told apart.

How are the states told apart without colour?

By a shape and a word: Ready is a checked filled square, Building a half-filled square with a bar under it, Queued an empty square, and Failed the status dot with the word and a link to its log. The bar is decoration; the word says what is happening. It sweeps four times and stops, and with reduced motion it does not move.

What changes on a phone?

The table becomes a list of stacked rows: the branch, then its state, then the truncated URL with its Copy button. The pull request and age columns are hidden and the column headings are kept only for screen readers.

Is it a real table for assistive technology?

Yes. It has a caption, column headers with scope, and the branch as the row header, so a screen reader announces each cell with its branch.

  • Pro

    Deployment Log Tabs Changelog

    Deploys and rollouts

    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.

  • Pro

    Release Blockers Changelog

    Deploys and rollouts

    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.

  • Pro

    Build Pipeline Matrix Changelog

    Deploys and rollouts

    A run-by-stage matrix of the last six builds with a result and a time in every cell, a failed run that explains itself, and a stage lens that tints a column.

  • Pro

    Lanes With Gates Release Train

    Deploys and rollouts

    A release-train table: a lane per train, a column per station (Dev, Staging, Canary, Production), each cell a gate shape and word with a hover card of its checks, and the departure time at the end of the lane.

  • Pro

    Blue Green Swap Zero Downtime Deploy

    Deploys and rollouts

    A blue-green swap for a deploy tool: two environment cells with instance dots, a 0, 10, 50 and 100 percent traffic toggle that redraws the split bar, the dots and the phase list, and a fixed Downtime 0 s.

  • Pro

    Rollback History Changelog

    Deploys and rollouts

    A table of rollbacks that runs rail to rail and ends the block: the day, the version it came from and the one restored, a reason badge, a sortable time to revert and how each ended, with a summary counted from the rows.

All 200 changelog blocks