Service notice

Pro

A notice about the service itself, above the composer: a usage limit, a model that's down, a trial running out. Each says when things change ("resets in 3 hours", "trying again in 2 minutes") only when the service knows, and what you can do meanwhile.

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/service-notice

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

Usage

TSX · The example above

"use client"

import { ServiceNotice } from "@/components/service-notice"

const hoursFromNow = (h: number) => new Date(Date.now() + h * 3_600_000).toISOString()

export default function Example() {
  return (
    <div className="flex max-w-2xl flex-col gap-3">
      <ServiceNotice
        kind="limit"
        title="You’ve used this month’s agent hours"
        detail="Threads stay readable; agents can’t start new runs until the limit resets."
        until={hoursFromNow(3)}
        action={{ label: "Raise the limit", onClick: () => {} }}
      />
      <ServiceNotice kind="trial" title="Your Keel trial is ending" until={hoursFromNow(24 * 4)} action={{ label: "Choose a plan", onClick: () => {} }} onDismiss={() => {}} />
    </div>
  )
}

<ServiceNotice>

Prop	Type	Default	Description
kindrequired	`Kind`	—	limit (a usage limit), unavailable (the service or model is down) or trial (a trial running out); sets the icon and tone.
titlerequired	`string`	—	What's happening, e.g. "You've reached this month's agent hours".
detail	`string \| undefined`	—	What you can do meanwhile, under the title.
until	`string \| undefined`	—	When the limit resets, the retry happens, or the trial ends.
action	`{ label: string; onClick: () => void } \| undefined`	—	One thing to do about it, e.g. upgrade or switch model.
onDismiss	`(() => void) \| undefined`	—	Shows a dismiss button; called when it's pressed.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

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

Key	English
tryingAgain	trying again {when}
resets	resets {when}
ends	ends {when}
dismiss	Dismiss