Signature Workflow

E-signature routing panel showing each signer, their role, and a state pill for signed, waiting, or sent.

Signature workflow
Beste Sözen
Beste SözenCounsel · Apr 23 · 09:12
signed
Kian Okafor
Kian OkaforCEO · Kestrel
waiting
LP
Lina ParkWitness
sent

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Legal13 } from "@/components/beste/piece/legal13";

<Legal13
  title="Signature workflow"
  signers={[
    {
      "name": "Beste Sözen",
      "role": "Counsel",
      "initials": "BS",
      "state": "signed",
      "at": "Apr 23 · 09:12",
      "image": "https://images.unsplash.com/photo-1599503613556-0f18b122d281?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fHw%3D"
    },
    {
      "name": "Kian Okafor",
      "role": "CEO · Kestrel",
      "initials": "KO",
      "state": "waiting",
      "image": "https://images.unsplash.com/photo-1536759078151-61c8b6f156a8?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29sb3JmdWwlMjBwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
    },
    {
      "name": "Lina Park",
      "role": "Witness",
      "initials": "LP",
      "state": "sent"
    }
  ]}
/>