Skip to content
SettingsModel statusMenu

Model status

Degraded, outage or maintenance notice for a model or provider, with when it started, a link to the status page and a switch to a model that works.

Markdown
On this page
A notice above the composer with the status page and a switch to a model that works.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/model-status.json

Usage

tsx
import { ModelStatus, ModelStatusDot } from "@/components/ui/chatcn/model-status"

<ModelStatus
  status="degraded"
  model="Opus 4.1"
  time="Since 14:05"
  message="Responses may take longer or stop partway."
  statusUrl="https://status.example.com"
  fallbackModel="Sonnet 4.5"
  onSwitchModel={() => setModel("sonnet-4-5")}
/>

<ModelStatusDot status="degraded" />

Examples

States

Degraded, outage, maintenance and resolved, plus status dots.

Props

PropTypeNotes
status"operational" | "degraded" | "outage" | "maintenance"operational is the resolved state
modelstringUsed in the headline
message, time, titleReactNode
statusUrlstringView status, in a new tab
fallbackModel, onSwitchModelUse {fallbackModel}
onDismiss() => void

Accessibility

  • An outage is an alert; everything else is a status. The external link says it opens in a new tab.
  • Status colors appear only as a small icon or dot, always next to a word.

Motion

  • The notice settles 4 px and fades in over 200 ms; the icon swaps with the blur crossfade when the status changes.
  • The dot never pulses.