Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Staging Environments Dashboard Block for React

Five preview slots for eight branches with memory and CPU bars, an idle ranking that proposes an eviction, a waiting list, and Evict and Assign that move branches in and out.

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

Decide which branch loses its preview with this slot panel for React with Base UI. A hairline frame with a plus mark on each corner draws five Branchyard environment slots as cards on shared hairlines, each with its branch in mono, a state word, memory and CPU as two thin bars, the day of its last activity and the author's initials. Below, an idle ranking lists the running slots from the idlest and proposes the first for eviction, and a waiting list at the end holds the branches without a slot. Evict opens an Alert Dialog and frees the slot; the Shine Button Assign gives it to the first waiting branch, which reads Building and then Running. It's built from Alert Dialog, Avatar, Badge, Button, Empty and Guides. For platform consoles and pull request preview tools.

FAQ

How do I fill it with my slots and branches?

Edit START_SLOTS (the branch, state, memory and CPU percent, last activity day and author initials) and START_WAITING. The idle days come from the activity day and one AS_OF date, never the clock, and every count in the header and the foot is worked out from the two lists.

What does Evict do?

It asks first, then frees the idlest running slot and puts its branch at the back of the waiting list. The slot reads Free and its bars drop to zero. Only Running slots can be proposed; a slot that is Building is never evicted.

What does Assign do?

It gives the first free slot to the first waiting branch. The slot reads Building for a couple of seconds and then Running, and the waiting count drops. With no free slot or nobody waiting it says so and changes nothing.

Can the waiting list be emptied?

Yes, with Remove on each branch. The list then shows an empty state in the same box, so the panel does not change height.

What stays local, and how do I wire it for real?

Everything: no environment is created or deleted, and the build is a timer. To make it real, call your platform from evict and assign and set the slot to Building until its health check passes.

How does it look on a phone?

The slots go two across with the fifth spanning the row, and the waiting list sits under the idle ranking.

All 200 dashboard blocks