Uptime

Playground#

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

<HfStatus name="API" incidents="3:down,17:deg,41:deg" />

Installation#

pnpm dlx shadcn@latest add @lumesec/hf-status

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

npx shadcn@latest add https://elements.lumesec.ai/r/hf-status.json

Usage#

import { HfStatus } from "@/components/lumesec/hf-status";

export function Example() {
  return (
    <HfStatus name="API" incidents="3:down,17:deg,41:deg" />
  );
}

Behaviour#

Daily bars that rise in from the left, coloured by incidents, with today pulsing. Hover or use the arrow keys for the day’s numbers; the number of days adapts to the width.

API reference#

Attributes#

Keyboard#

Accessibility#

• The canvas has role="img", tabindex="0" and an aria-label with the average uptime, the number of days with incidents and a hint to use the arrow keys.
• The day tooltip has role="status", so the selected date and figures are announced.
• Leaving the canvas or moving focus away clears the selection.
• Reduced motion: the bars appear without rising in, today's bar does not pulse and the status dot ping is off.

Theming#

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --border, --foreground, --lumesec, --lumesec-success, --muted and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-fg, --ui-mono, --ui-muted, --ui-ok and --ui-raised.

Notes#

• History is generated demo data: each day's status and uptime come from a hash of name. Only incidents and state override it; there is no attribute for real data.
• The day count adapts to the width: one bar per 6px, between 20 and 90 days. Attributes are read when the element lays out (on connect and resize), not when they change.