System Notice Banner

The SystemNoticeBanner is an in-conversation banner notice rendered inside the chat surface (not as a message bubble) for local-first state changes: offline/online transitions, model switch, capability-unavailable, WebGPU→WASM fallback, cache eviction, or download-required notices. The kind sets the icon, tone, and default copy. Data source: useNetworkStatus / useCapabilities.

Preview

Installation

pnpm dlx shadcn@latest add @localmode/ui/conversation/system-notice-banner

npx shadcn@latest add @localmode/ui/conversation/system-notice-banner

yarn dlx shadcn@latest add @localmode/ui/conversation/system-notice-banner

bunx --bun shadcn@latest add @localmode/ui/conversation/system-notice-banner

Data source & dependencies

Data source: renders the kind + copy you pass — works with any backend. Recommended producer: useNetworkStatus / useCapabilities from @localmode/react (on-device, optional).

• clsx + tailwind-merge — via the shared cn() util (installed automatically as a registry dependency)

Files installed

• system-notice-banner.tsx — SystemNoticeBanner
• lib/utils.ts — the cn() helper (if not already present)

Props

Examples

Surface offline state inline

import { useNetworkStatus } from '@localmode/react';
import { SystemNoticeBanner } from '@/components/system-notice-banner';

const { isOnline } = useNetworkStatus();

{!isOnline && <SystemNoticeBanner kind="offline" />}

Customization

Override the message, tone, or action per notice. The default copy lives in KIND_META — edit it or add new NoticeKinds for your app’s own states.

These primitives are presentational and hook-driven: they render props and emit callbacks, holding only local view state. The orchestration state (e.g. useNetworkStatus) lives in your app. Every surface uses shadcn/ui CSS-variable utilities, so it inherits your theme — restyle the copied file freely.