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

# Widgets Overview

> React widgets — VerifyGate and ProofBadge.

The fastest way to add trust to a React app: **`VerifyGate`** gates content behind a check, and **`ProofBadge`** shows verified status. Your app uses the same checks your server already trusts — no check logic in the browser.

* **`VerifyGate`** reuses an existing receipt, opens Hosted Verify only when needed, then renders your content. It runs on a published gate — pass one **`gateId`**.
* **`ProofBadge`** displays status for any receipt — pass a **`qHash`**, no gate required.

## Install

```bash theme={"dark"}
npm install @neus/sdk react react-dom
```

| Export             | For                                            |
| ------------------ | ---------------------------------------------- |
| `VerifyGate`       | Gate content behind a check                    |
| `ProofBadge`       | Status badge with chains popover               |
| `SimpleProofBadge` | Minimal verified badge                         |
| `NeusPillLink`     | "Verified on NEUS" pill linking to the receipt |
| `VerifiedIcon`     | Standalone verified icon                       |

All are imported from `@neus/sdk/widgets`.

## VerifyGate

Create mode opens **Hosted Verify**. The published gate owns check inputs, pricing, and checkout policy. [Security and trust](../platform/security-and-trust)

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

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

## ProofBadge

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

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

`ProofBadge` also accepts `showLabel`, `logoUrl`, `onClick`, and `className`. See the [VerifyGate](./verifygate) page for props (`gateId`, `strategy`, `mode`, and advanced options).

## Next

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

  <Card title="Integration" icon="compass" href="../integration">
    Check → verify → save → reuse.
  </Card>
</CardGroup>