shadcn.io is not affiliated with official shadcn/ui
CI/CD Pipeline Sidebar Block for Solid
A CI service window on a muted rail: four pipelines with a status glyph and word, a Run button on each that queues, runs and settles after 1.6 seconds per step, a branch select and the open run's log as text.
Installation
Overview
Give a build service its whole shell with this CI/CD pipeline sidebar for Solid with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar on a muted rail: four pipelines (Build web, Test api, Deploy edge and Lint docs), each with a status glyph and a word (passed, failed, running or queued) and a Run button at its end. A Select at the top picks the branch the pipelines are read on, and the group's label counts what is running. Press Run and the pipeline queues, then runs with a Spinner, then settles on the outcome typed for that branch, a step every 1.6 seconds, once and never in a loop. Beside it, the top bar names the open pipeline and holds Run all, a Shine Button and the only colored control. The page is the open run: its status in a Badge, its branch and its log as real lines of text with their timestamps. The rail collapses to a column of status glyphs with tooltips, and below the medium breakpoint it becomes a sheet. It's built from Sidebar, Select, Spinner, Badge, Avatar, Shine Button and Guides, with a CSS entrance only. For build and deploy tools, test runners and any list of jobs that change state.
FAQ
Where do the outcomes and the log come from?
From two typed lists at the top of the file. OUTCOMES holds, for each branch and pipeline, the result shown before anything runs and the result the next run settles on; PIPELINES holds the log lines of a passing and of a failing run. Changing the branch shows that branch's last results and stops anything in flight. Every run on a branch settles on the same typed outcome, and nothing is built, tested or deployed. In your app, replace both with your CI's API and keep the one rule: the rail and the log read the same run state.
How do the runs move, and do they loop?
One timer at a time. While any pipeline is queued or running, a single 1.6 second timeout advances every active run one step (queued becomes running, running settles) and is cleared when the state changes or the page unmounts. Nothing repeats: when every run has settled, no timer is left. The spinner stops turning under reduced motion and the word "Running" says the same thing. Pressing Run on a busy pipeline does nothing but say so.
What stays in the page, and how do I connect it?
Everything. Run and Run all change the block's own state and nothing leaves the page; reloading starts over. Run all queues every pipeline that is not already busy. The pipelines are links to # whose handler shows the run instead of navigating. Point them at your routes and mark the current one with isActive. The Run buttons are SidebarMenuActions, so they sit at the end of the row and give way when the rail folds.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The branch Select, the pipelines and their Run buttons are in it. Escape or choosing a pipeline closes the sheet and focus goes back to the menu button. The first screen is the open run's log, with Run all in the top bar, and the status line at the foot says what each step did. The window keeps its height and only the log scrolls.
What happens when the sidebar collapses?
The menu button or the rail along the sidebar's edge folds it to its icons, which here are the four status glyphs. Each keeps its link's full name for screen readers ("Test api, failed") and a tooltip shows the same on hover or focus. The branch Select and the Run buttons give way, so run things from the expanded rail or with Run all. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
Is it accessible?
The sidebar is a navigation landmark named after the product, its pipelines are named by their group and the open one is marked as the current page. Status is a glyph, a word and the link's name, never a color. Each Run button is named for its pipeline and, while busy, says so and stays focusable. The log is an ordered list with a name, and one polite status line reports each step that settles, so a run finishing in the background is announced once.