# Checkpoint Feature
> An approvals section for a payments product: three points down the left, and on the right payouts clearing a policy one barrier at a time. A large payout waits for sign-off, so a visitor can approve or deny it, and one to a bank outside the allowlist is turned away.
A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/checkpoint-feature).
- Page, with a live preview: https://shadcn.exchange/r/keyframeui/checkpoint-feature
- Screenshot: https://shadcn.exchange/shot/keyframeui/checkpoint-feature/light.png
- Registry item: https://keyframeui.com/r/checkpoint-feature.json
- Categories: blocks, feature-sections
- Listed: 2026-11-02, source last changed 2026-11-02
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/checkpoint-feature.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Dependencies
- Registry items: `https://keyframeui.com/r/checkpoint.json`
## Notes from the registry
Live preview and the components it's built with: https://keyframeui.com/blocks/feature-sections/checkpoint-feature
## Files
### `registry/blocks/checkpoint-feature.tsx`
```tsx
"use client";
import * as React from "react";
import { Checkpoint, type CheckpointRequest, type CheckpointRule } from "@/components/ui/checkpoint";
/* ── Content ─────────────────────────────────────────────────
* Everything you'd change to make the section yours: the copy,
* the points down the left, and the payouts policy the requests
* on the right have to clear. A rule a request doesn't mention
* passes; "hold" waits for sign-off and "block" turns it away.
* ─────────────────────────────────────────────────────────── */
/** The one accent: the checks, the barriers' token, the primary link. */
const ACCENT = "#ff3b1f";
const ACCENT_DARK = "#ff5a3c";
const EYEBROW = "Approvals";
const HEADLINE = "Payouts wait for the right yes.";
const SUBLINE =
"Write your money-movement policy once. Every payout and refund clears it before it runs, and anything over the line waits for a second approver.";
const POINTS = [
{ title: "Rules in plain words", body: "Amounts, payees, countries and limits, set per team and per environment." },
{ title: "Sign off where you work", body: "Approve or deny from the dashboard, Slack or email, with the reason attached." },
{ title: "Every decision on the record", body: "Who asked, which rule stopped it and who said yes, exported for your auditors." },
];
const CTA = { label: "See the policy builder", href: "#policies" };
const PANEL = { title: "Payouts policy", scope: "Production · 4 rules" };
const APPROVER = "Marta, CFO";
/** ms a held payout waits before the demo approves it. Visitors can approve or deny first. */
const APPROVE_AFTER = 3200;
const RULES: CheckpointRule[] = [
{ id: "payee", label: "Payee", detail: "A verified business", value: "VERIFIED" },
{ id: "amount", label: "Amount", detail: "Over $10,000 needs a second approver", value: "≤ $10K" },
{ id: "country", label: "Bank country", detail: "On your allowlist", value: "ALLOWLIST" },
{ id: "velocity", label: "Velocity", detail: "Three payouts a day per payee", value: "≤ 3 / DAY" },
];
const REQUESTS: CheckpointRequest[] = [
{ id: "po1", label: "payout po_7Kd1", meta: "$2,480.00 to Lindqvist Design AB" },
{ id: "po2", label: "payout po_8Qw3", meta: "$18,600.00 to Harbor Freight Co.", verdicts: { amount: "hold" } },
{
id: "po3",
label: "payout po_2Zc9",
meta: "$940.00 to a new bank account",
verdicts: { country: "block" },
reason: "Bank country isn't on your allowlist",
},
];
/* ── Bits ── */
function Tick({ className }: { className?: string }) {
return (
);
}
function Arrow({ className }: { className?: string }) {
return (
);
}
/* ── Section ── */
export function CheckpointFeature() {
return (