> ## Documentation Index
> Fetch the complete documentation index at: https://docs.proofable.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Widgets

> Add React gates and status badges with one gate ID while keeping check logic out of your app.

Put **VerifyGate** in front of protected content. Put **ProofBadge** where you show status. Same results your server trusts.

* **VerifyGate** reuses a saved result, opens Hosted Verify only when needed, then shows your content. Pass one `gateId`.
* **ProofBadge** shows status for any saved result. Pass a proof ID.

## Install

```bash theme={"system"}
npm install @proofable/sdk react react-dom
```

| Export | For |
| - | - |
| `VerifyGate` | Require a current check before content, payment, or a tool runs |
| `ProofBadge` | Status badge |
| `SimpleProofBadge` | Minimal verified badge |
| `ProofablePillLink` | Link to the result page |
| `VerifiedIcon` | Standalone icon |

Import from `@proofable/sdk/widgets`.

## VerifyGate

```jsx theme={"system"}
import { VerifyGate } from '@proofable/sdk/widgets';

export default function ProtectedPage() {
  return (
    <VerifyGate gateId="gate_your-app-name">
      <ProtectedContent />
    </VerifyGate>
  );
}
```

The published gate owns check inputs, pricing, and checkout. [Security](../security)

## ProofBadge

```jsx theme={"system"}
import { ProofBadge } from '@proofable/sdk/widgets';

<ProofBadge qHash={proof.qHash} showChains />
```

## Next

<CardGroup cols={2}>
  <Card title="VerifyGate" icon="object-group" href="./verifygate">
    Props, modes, and Hosted Verify handoff.
  </Card>

  <Card title="Start" icon="bolt" href="/">
    Browser, server, and assistant paths.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.