Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Build Status Re-run Notification Block for Solid

A CI service's five latest builds in a table: branch, commit and start time, a status word and glyph, duration, a failed build that opens to the last lines of its log, and a Re-run that walks a build from Queued to Running to Passed.

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

Tell a team what its builds did and let them act on a red one, with this build status notification for Solid with Ark UI. It is Buildmoor, a CI service, as a table in a hairline frame with a plus mark on each corner: five runs of one repository, each with its commit message, its branch and short commit in mono, when it started, a status as a glyph and a word (Failed is heavier, a running build has a Spinner) and how long it took. A failed build opens to the last four lines of its log in a numbered Syntax Text window that follows the theme. Re-run is an outline Button on every row: it turns the build to Queued, then Running, then Passed, one timeout apart, and the counts above the table follow ("2 passed, 2 failed, 1 running"). Lines come from Guides. For CI dashboards, release channels and any list of runs with a retry.

FAQ

How do I fill it with my builds?

Edit BUILDS: each has an id, a title (the commit message), a branch, a short hash, an ISO started time, a state of passed, failed, running or queued, took in seconds and, for a failed one, the last lines of its log as text. AS_OF is the page's fixed now in UTC, so "Yesterday" and the weekdays read the same for everyone. In your app pass the runs your CI returns and format the start time in the viewer's zone if you prefer.

What really happens when I press Re-run?

Only this page changes. The build goes to Queued for a moment, then Running with a spinner, then Passed with a typed duration (RERUN_TOOK), and the status line says so, including "nothing is built". A build that is already queued or running answers that it is, and the button stays in place. A reload brings the five builds back. In your app call your CI's rebuild endpoint from rerun and take the states from its events.

Where do the log lines come from?

They are typed text in BUILDS, shown in a read-only code window with line numbers; nothing is fetched or parsed. A build that passed since has no failure to show, so its log closes. In your app pass the last lines of the run's log as text.

How does it look on a phone?

Each build becomes a card: its name, a line with its branch, commit and start, the duration, then its status and Re-run side by side. The table is one set of elements that changes layout, so the keyboard order and names are the same.

Does anything loop or move on its own?

Only the spinner of a running build, and it stops under reduced motion. The table has no timers of its own: the two steps of a re-run are single timeouts that start from your press and are cleared if you leave the page.

Is it accessible?

The table has a caption, column headers and row headers; the chevron says whether a log is open and names its build; Re-run names the commit it re-runs. Status is a word as well as a glyph, and one polite status line says each change.

All 100 notification blocks