Degraded panel

Free · MIT

Something couldn't be done. Says what went wrong, what is missing because of it, and offers a retry only when the caller can actually retry (Candor's DegradedPanel: a degraded state names what's missing, never just looks sad).

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/degraded-panel

Brings in: button, locale, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { DegradedPanel } from "@/components/degraded-panel"

export default function Example() {
  return (
    <DegradedPanel
      className="max-w-lg"
      reason="The order service didn’t answer in time."
      missing="Delivery dates for the last two orders"
      onRetry={() => {}}
    />
  )
}

<DegradedPanel>

Prop	Type	Default	Description
reasonrequired	`React.ReactNode`	—	What went wrong, in a sentence.
missing	`React.ReactNode \| undefined`	—	What the person won't see because of it.
onRetry	`(() => void) \| undefined`	—	Shows a Try again button that calls this.
retrying	`boolean \| undefined`	false	Shows the retry as in progress.
variant	`"block" \| "inline" \| undefined`	"block"	A boxed panel, or one line inside other content.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under degradedPanel in <LocaleProvider strings={{ … }}>; the table is exported as degradedPanelStrings.

Key	English
missing	Missing:
retry	Retry
retrying	Retrying