# Browser Compat Card

Browser Compat Card [#browser-compat-card]

The **Browser Compat Card** is a per-model runnability report — the feasibility check you want *before* a multi-GB download. It combines a `RAMUsageBar` (model RAM vs device RAM), available storage, threading (cross-origin-isolation) status, estimated speed, and a warnings list. A `canRun` boolean gates a success vs error header. It extends the spirit of the Capability Gate. The `RAMUsageBar` is independently usable.

Preview [#preview]

```tsx
'use client';

import { useCapabilities } from '@localmode/react';

import { BrowserCompatCard, RAMUsageBar } from '@/components/browser-compat-card';

/**
 * Demo for BrowserCompatCard / RAMUsageBar. Pulls the device's real RAM and
 * cross-origin-isolation state from useCapabilities, then evaluates two models:
 * a small one that fits and a large one that exceeds device RAM (canRun flips).
 */
export default function BrowserCompatCardDemo() {
  const { capabilities } = useCapabilities();
  const hardware =
    capabilities && typeof capabilities.hardware === 'object'
      ? (capabilities.hardware as { memory?: number })
      : {};
  const deviceGB = hardware.memory ?? 8;
  const coi =
    typeof navigator !== 'undefined' && 'crossOriginIsolated' in globalThis
      ? Boolean((globalThis as { crossOriginIsolated?: boolean }).crossOriginIsolated)
      : false;

  return (
    <div className="flex w-full max-w-md flex-col gap-5">
      <BrowserCompatCard
        modelName="Phi 3.5 Mini (3.8B)"
        requiredGB={3}
        deviceGB={deviceGB}
        availableStorageGB={12}
        crossOriginIsolated={coi}
        estimatedSpeed="Fast"
      />
      <BrowserCompatCard
        modelName="Llama 3 70B"
        requiredGB={deviceGB + 32}
        deviceGB={deviceGB}
        crossOriginIsolated={coi}
        warnings={['Model RAM exceeds this device - choose a smaller quantization.']}
      />
      <RAMUsageBar requiredGB={4} deviceGB={deviceGB} />
    </div>
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/local-first/browser-compat-card
```

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

**Data source:** renders the device/model feasibility props you pass — works with any backend. Recommended producer: `useCapabilities` from `@localmode/react` (on-device, optional).

* `lucide-react` — icons
* `clsx` + `tailwind-merge` — via the shared `cn()` util (installed automatically as a registry dependency)

Files installed [#files-installed]

* `browser-compat-card.tsx` — `BrowserCompatCard` + `RAMUsageBar`
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**BrowserCompatCard**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `modelName` | `string` | — | **Required.** Model display name. |
| `requiredGB` | `number` | — | **Required.** Model memory requirement, in GB. |
| `deviceGB` | `number` | — | **Required.** Device RAM, in GB. |
| `availableStorageGB` | `number` | — | Available origin storage, in GB. |
| `crossOriginIsolated` | `boolean` | — | Whether the runtime is cross-origin isolated (multi-thread WASM). |
| `estimatedSpeed` | `string` | — | Estimated inference speed label (e.g. "Fast", "~20 tok/s"). |
| `warnings` | `array` | — | Warnings/recommendations explaining a fail or caveat. |
| `canRun` | `boolean` | — | Whether the model can run on this device. When omitted, derived as `deviceGB >= requiredGB`. |

**RAMUsageBar**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `requiredGB` | `number` | — | **Required.** Memory the model needs, in GB. |
| `deviceGB` | `number` | — | **Required.** Memory the device has, in GB. |

Examples [#examples]

Feasibility before download [#feasibility-before-download]

```tsx
<BrowserCompatCard modelName="Llama 3 8B" requiredGB={6} deviceGB={8} />
```

Standalone RAM bar [#standalone-ram-bar]

```tsx
<RAMUsageBar requiredGB={4} deviceGB={8} />
```

Customization [#customization]

When `canRun` is omitted it is derived as `deviceGB >= requiredGB`. The header and RAM bar turn destructive on a fail; pass a `warnings` array to explain why. 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.