Release Gate
Prov1.0.0A release checklist with manual, automatic and owner checks, and a hold-to-ship key.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { ReleaseGate } from "@/components/ui/notchset/blocks/release-gate";
export function Gate() {
return (
<ReleaseGate
title="Planner v15"
release="V15"
checks={[
{ id: "brief", kind: "manual", title: "Brief approved", detail: "SCOPE FINAL", action: "APPROVED" },
{ id: "evals", kind: "auto", title: "Evals pass", detail: "85% OR MORE", action: "RUN EVALS", running: "RUNNING", run: async () => "PASSED · 88.9%" },
]}
onShip={async (notify) => {
const r = await fetch("/api/releases/v15/ship", { method: "POST", body: JSON.stringify({ notify }) });
if (!r.ok) throw new Error("ship failed");
return "LIVE ON 5%";
}}
/>
);
}Props
checks–({ kind: 'manual', action } | { kind: 'auto', action, running, run } | { kind: 'pick', people, picked })[]Each with id, title and detail. Automatic checks resolve run() with their passed line.
title / when / release–stringThe header; release names the key (HOLD TO SHIP V15).
onShip–(notify) => Promise<string>Ship; resolve with the line to show (LIVE ON 5%), reject to stay unshipped.
defaultDone / channel / holdMs / onReset–string[] / string / number / () => voidChecks done at first, the notify channel, the hold length (1200ms) and an optional RESET.
Anatomy
- Ready means every check done and none running.
- The rail fills only through consecutive passes, so a gap shows where work stops.
- Shipping locks the checks until RESET.
ReleaseGatedata-slot="release-gate"The count, the checks on their rail and the ship row.
Source
components/ui/notchset/blocks/release-gate.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/release-gateNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- A release or deploy page that must not ship until checks pass
- Mixing human sign-offs with automated checks
Use something else when
- A simple to-do list: use a checklist
- Live rollout control after shipping: use your rollout view
Mistakes to avoid
- Run the automatic checks on your server and return their real result
- Keep the hold short (about a second): it is a pause, not a test of patience
Agents find it by
- release checklist, deploy gate, ship checklist, go live, launch checklist, pre-flight, rollout gate, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/release-gate.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- Tab
- Through the checks and the ship row
- Space / Enter (hold)
- Ship once every check passes; release early to cancel
Accessibility
- Manual checks are checkboxes, the owner is a radio group of named people, and NOTIFY is a switch
- The ship key is aria-disabled until every check passes and says why when pressed; it holds with the pointer or Space / Enter
- The count and every result are announced (aria-live)
Motion
- Rail
- The ink traces down to the last consecutive pass (620ms)
- Checks
- Nodes fill and their checks draw in; the ruler cells fill 30ms apart
- Ship
- Held, the key sinks onto its plate while a fill grows; then the scanner and the shipped line
Responsive
- Under 520px (container width) each check's action moves under its text.
Performance
- The hold steps every 16ms only while held; nothing runs while idle.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
