---
title: React
description: "React hooks for building belief-aware interfaces."
---

<Callout type="warning" title="Coming soon">
<code>@beliefs/react</code> is in development. This page describes the planned API.
</Callout>

## What It Provides

React hooks for reading belief state in your components. Subscribe to claims, track clarity, and display confidence, with real-time updates as beliefs change.

## Planned Hooks

### useBeliefs

Returns the current belief snapshot. Auto-updates when beliefs change.

```tsx
function Dashboard() {
  const { claims, gaps, clarity } = useBeliefs()

  return (
    <div>
      <p>Clarity: {(clarity * 100).toFixed(0)}%</p>
      <p>{claims.length} claims, {gaps.length} gaps</p>
    </div>
  )
}
```

### useClaim

Subscribe to a specific claim by ID. Returns confidence, evidence count, and last updated timestamp.

```tsx
function ClaimBadge({ claimId }: { claimId: string }) {
  const { text, confidence, evidenceCount } = useClaim(claimId)

  return (
    <span title={`${evidenceCount} evidence sources`}>
      {text} - {(confidence * 100).toFixed(0)}%
    </span>
  )
}
```

### useClarity

Returns the current clarity score and its components.

```tsx
function ClarityIndicator() {
  const { score, readiness } = useClarity()

  return (
    <div>
      <span>Clarity: {(score * 100).toFixed(0)}%</span>
      <span>Readiness: {readiness}</span>
    </div>
  )
}
```

## Request Early Access

If you are building a belief-aware UI and want early access to the React hooks, [request access](/dev/beta).