# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/piece/legal13. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Pieces](/pieces)
3. /
4. [Legal](/pieces/legal)
5. /
6. Signature Workflow

# 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](https://images.unsplash.com/photo-1599503613556-0f18b122d281?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fHw%3D)

Beste SözenCounsel · Apr 23 · 09:12

signed

![Kian Okafor](https://images.unsplash.com/photo-1536759078151-61c8b6f156a8?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29sb3JmdWwlMjBwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D)

Kian OkaforCEO · Kestrel

waiting

LP

Lina ParkWitness

sent

CLICode

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/piece/r-base/legal13`

New here? Read the [installation guide](/docs/installation).

Import & useCopy

```
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"
    }
  ]}
/>
```

## More Legal pieces

[View all Legal](/pieces/legal)

[](/piece/legal3)

SignatureSigned

Beste Sözen

Beste SözenPrincipal, Beste Design Studio

Signed Apr 21, 2026

### Signed Block

Completed signature panel with an italic cursive autograph, emerald Signed pill, and a printed footer.

[](/piece/legal21)

Engagement deliverables

Regulatory filings · Q2Due May 12

In progress

Board resolutions packageDue May 3

Overdue

Closing memoDelivered Apr 18

Delivered

### Deliverables List

Engagement deliverables panel with due-date rows and pending, progress, delivered, or overdue pills.

[](/piece/legal9)

Draw your signatureClear

Beste Sözen

Use your trackpad or stylus

### Signature Pad

Dashed sketch surface with a draw label, clear action, and an italic serif sample on the baseline.

[](/piece/legal1)

Master services agreementMSA-2026-0421

Party ABeste Technologies Inc.

Party BBeste Design Studio

EffectiveMay 1, 2026

Awaiting counter-signature

### Contract Summary

Contract overview card listing the title, reference code, parties, effective date, and a status pill.

[](/piece/legal5)

§ 4.2Limitation of liability

In no event shall either party be liable for any indirect, incidental, special, or consequential damages arising out of this agreement, even if advised of the possibility of such damages.

Master services agreement · MSA-2026-0421

### Clause Snippet

Left-ruled clause card pairing a section chip with a heading, statutory body text, and a source footer.

[](/piece/legal6)

Series A investors' rights agreementUpdated 4 hours ago

In review

### Document Status

Document row whose icon and pill shift across draft, review, signed, expired, and voided states.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.