Approval flowadmin
Approval rail with steps, approvers, per-step state, current step, comments and watchers in horizontal or vertical layout.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/approval-flowDefault
approval-flow-demo.tsx
import { ApprovalFlow, type ApprovalStep } from "@/components/ui/approval-flow";
export const demoSteps: ApprovalStep[] = [ { key: "draft", label: "Requester", approvers: [{ id: "u1", name: "Ada Lovelace", state: "approved", note: "Submitted" }] }, { key: "review", label: "Review", approvers: [ { id: "u2", name: "Grace Hopper", state: "approved" }, { id: "u3", name: "Alan Turing", state: "pending" }, ], }, { key: "final", label: "Final approval", approvers: [{ id: "u4", name: "Linus Torvalds", state: "pending" }] },];
const commentAt = Date.UTC(2026, 0, 5, 9, 30);
export default function ApprovalFlowDemo() { return ( <ApprovalFlow steps={demoSteps} watchers={[{ id: "w1", name: "Margaret Hamilton" }]} comments={[{ id: "c1", author: "Grace Hopper", at: commentAt, text: "Looks good to me." }]} /> );}