KQ-689 · KYC/STEPS
KYC Steps
A verification stepper whose steps unlock in sequence: only the current step is open, its body gliding open on glide from a measured height, and every later one stays locked until the step above is approved. Approval stamps the node on recoil, draws its tick on flick and fills the connector on glide as the next step unlocks; rejection shakes the card on a symmetric tween with no spring and reopens it with the reason. The only control is the open step's real button, reached by Tab and pressed with Enter or Space; every state arrives through the status prop, so the stepper never invents time.
- Identity document
A passport or national ID card, all four corners in frame.
- Selfie
- Proof of address
step 1 of 3 · Identity document
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/kyc-steps
Props
- steps
- KycStep[]
- default —
- { id, title, description } in order; later steps stay locked until every earlier one is approved.
- status / defaultStatus
- Record<string, KycStepStatus>
- default {}
- Per-step status, review, approved or rejected; a step absent from the map is pending.
- onStatusChange
- (status: Record<string, KycStepStatus>) => void
- default —
- Fires from the Submit press with the step moved to review.
- onSubmit
- (id: string) => void
- default —
- Fires from the Submit or Resubmit press; the host does the work and sets status.
- reasons
- Record<string, string>
- default {}
- Rejection reason per step id, shown under a rejected step as an alert.
- label
- React.ReactNode
- default —
- Visible heading; omit it and pass aria-label.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | KycStep[] | — | { id, title, description } in order; later steps stay locked until every earlier one is approved. |
| status / defaultStatus | Record<string, KycStepStatus> | {} | Per-step status, review, approved or rejected; a step absent from the map is pending. |
| onStatusChange | (status: Record<string, KycStepStatus>) => void | — | Fires from the Submit press with the step moved to review. |
| onSubmit | (id: string) => void | — | Fires from the Submit or Resubmit press; the host does the work and sets status. |
| reasons | Record<string, string> | {} | Rejection reason per step id, shown under a rejected step as an alert. |
| label | React.ReactNode | — | Visible heading; omit it and pass aria-label. |