# Provider Fallback Badge

Provider Fallback Badge [#provider-fallback-badge]

The **Provider Fallback Badge** surfaces the active AI backend tier — a zero-download built-in (Chrome AI) vs a model-download provider (Transformers.js) — plus a WASM threading variant ("Multi-thread" when cross-origin isolated / SharedArrayBuffer is available, else "Single-thread"). It is a software-side sibling to the Device Badge (which surfaces hardware).

Preview [#preview]

```tsx
'use client';

import { ProviderFallbackBadge } from '@/components/provider-fallback-badge';

/**
 * Demo for ProviderFallbackBadge. The threading sub-badge reflects the
 * runtime's real crossOriginIsolated state via useCapabilities.
 */
export default function ProviderFallbackBadgeDemo() {
  return (
    <div className="flex flex-col items-start gap-3">
      <ProviderFallbackBadge tier="built-in" providerName="Chrome AI" />
      <ProviderFallbackBadge tier="download" providerName="Transformers.js" />
    </div>
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/local-first/provider-fallback-badge
```

Data source & dependencies [#data-source--dependencies]

**Data source:** reads the threading capability via the bundled `useCapabilities` navigator hook (the active-tier prop is yours to pass) — self-contained, works in any React app. (It mirrors `useCapabilities` from `@localmode/react`.)

* `@localmode/ui/lib/use-environment` — the bundled `useCapabilities` navigator hook (installed automatically as a registry dependency)
* `lucide-react` — icons
* `clsx` + `tailwind-merge` — via the shared `cn()` util (installed automatically as a registry dependency)

Files installed [#files-installed]

* `provider-fallback-badge.tsx` — the `ProviderFallbackBadge` component
* `lib/use-environment.ts` — the bundled `useCapabilities` navigator hook
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**ProviderFallbackBadge**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tier` | `ProviderTier` | — | **Required.** Active provider tier: a zero-download built-in (e.g. Chrome AI) vs a model-download provider (e.g. Transformers.js). |
| `providerName` | `string` | — | Provider display name (e.g. "Chrome AI", "Transformers.js"). |
| `crossOriginIsolated` | `boolean` | — | Override the cross-origin-isolation flag. When omitted the badge reads `useCapabilities` (and falls back to `globalThis.crossOriginIsolated`). |
| `hideThreading` | `boolean` | `false` | Hide the threading sub-badge. |

Examples [#examples]

Built-in vs download provider [#built-in-vs-download-provider]

```tsx
<ProviderFallbackBadge tier="built-in" providerName="Chrome AI" />
<ProviderFallbackBadge tier="download" providerName="Transformers.js" />
```

Customization [#customization]

The threading flag falls back to `useCapabilities` then `globalThis.crossOriginIsolated` when not passed. Hide the threading sub-badge with `hideThreading`. Styled entirely with shadcn/ui CSS-variable utilities so it inherits your theme — because you own the copied file, every class and threshold is yours to change.