Sign-off Request Card React component
A formal approval in one card: the facts that matter, who signs in what order, a press-and-hold approve button, and a one-line way to send it back.
About the Sign-off Request Card component
Sign-off Request Card gives a decision the weight it deserves. The facts sit next to the list of people signing, so anyone can see what they're agreeing to and who comes next.
Approving takes a short press and hold, which stops accidental taps. Sending it back takes one line, and either choice can be undone straight away.
When to use it
Use it for pricing changes, contracts, budgets and releases that need named approval in a set order.
For quick everyday yes-or-no questions, a lighter prompt will feel less heavy.
Installation
Add the Sign-off Request Card component to your project with the shadcn CLI. It lands in components/sign-off-request-card.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/sign-off-request-cardProps
<SignOffRequestCard /> accepts 10 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Raise the Team plan to $14 a seat" |
| reference A short id, e.g. "CR-2041". | string | "CR-2041" |
| requester | string | "Requested by Lena Ortiz, Pricing" |
| summary | string | "New signups move on 1 February. Existing customers keep their price for twelve months." |
| facts | { label: string; value: string }[] | DEFAULT_FACTS |
| approvers In signing order. The person using the card is the one marked current. | { name: string; role: string; status: SignOffStatus; time?: string }[] | DEFAULT_APPROVERS |
| holdMs How long to hold the button, in milliseconds. Use 0 for a plain click. | number | 900 |
| onApprove | () => void | — |
| onRequestChanges | (note: string) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Raise the Team plan to $14 a seat"
- reference
A short id, e.g. "CR-2041".
stringDefault: "CR-2041" - requesterstringDefault: "Requested by Lena Ortiz, Pricing"
- summarystringDefault: "New signups move on 1 February. Existing customers keep their price for twelve months."
- facts{ label: string; value: string }[]Default: DEFAULT_FACTS
- approvers
In signing order. The person using the card is the one marked current.
{ name: string; role: string; status: SignOffStatus; time?: string }[]Default: DEFAULT_APPROVERS - holdMs
How long to hold the button, in milliseconds. Use 0 for a plain click.
numberDefault: 900 - onApprove() => void
- onRequestChanges(note: string) => void
Sign-off Request Card FAQ
- Why press and hold?
- It makes approval a deliberate act. Set holdMs to 0 if you'd rather use a plain click.
- Can it be used from the keyboard?
- Yes. Enter or Space on the button approves straight away.
- What happens after I sign?
- Your row is marked as signed and the next person becomes the one needed now.
- Does the card change height?
- No. Every footer state shares one grid cell.
