# Network Badge

Network Badge [#network-badge]

The **Network Badge** is a reactive online/offline indicator sourced from `useNetworkStatus`. Because local models keep working without a network, "offline" is informational, not an error — pair it with **Offline Ready**, which signals that the app's required model is cached on-device and can run with no connectivity.

Preview [#preview]

```tsx
'use client';

import { NetworkBadge, OfflineReady } from '@/components/network-badge';

/**
 * Demo for NetworkBadge / OfflineReady. NetworkBadge reflects the device's real
 * online/offline state (toggle DevTools offline to see it react); OfflineReady
 * shows both the ready and needs-download variants.
 */
export default function NetworkBadgeDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <NetworkBadge />
      <NetworkBadge compact />
      <OfflineReady ready />
      <OfflineReady ready={false} />
    </div>
  );
}
```

Installation [#installation]

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

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

**Data source:** reads online/offline state via the bundled `useNetworkStatus` navigator hook — self-contained, works in any React app, no backend required. (It mirrors `useNetworkStatus` from `@localmode/react`.)

* `@localmode/ui/lib/use-environment` — the bundled `useNetworkStatus` 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]

* `network-badge.tsx` — `NetworkBadge` + `OfflineReady`
* `lib/use-environment.ts` — the bundled `useNetworkStatus` navigator hook
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**NetworkBadge**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `compact` | `boolean` | `false` | When true, render a compact dot-only badge without text. |

**OfflineReady**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `ready` | `boolean` | — | **Required.** Whether the model(s) the app needs are cached on-device. When true the app can run with no network. |
| `label` | `string` | — | Optional label override. |

Examples [#examples]

Online/offline + offline-ready [#onlineoffline--offline-ready]

```tsx
import { NetworkBadge, OfflineReady } from '@/components/network-badge';

<NetworkBadge />
<OfflineReady ready={isModelCached} />
```

Customization [#customization]

Both badges use shadcn/ui tokens with `emerald`/`amber` accents. `OfflineReady` takes a `ready` boolean from your cache check — when true the app can run fully offline. 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.