Klarhimmel UI
Klarhimmel ↗

Score ring

Stable

A score from 0 to 100 with a text equivalent. Unassessed is distinct from zero.

npx shadcn add @klarhimmel/score-ring

When to use

  • Use for

    Bounded audit and quality scores with a readable text equivalent.

  • Not for

    Loading or completion progress. Use Progress.

  • Pairs with

    Audit overview and module cards.

Preview

Readiness68 / 100
No checks passed0 / 100
AccessibilityNot assessed
score-ring.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { ScoreRing } from '@/components/klarhimmel/ui/score-ring';

export default function Example() {
  return (
    <Theme theme="brand">
      <ScoreRing value={68} label="Readiness" />
    </Theme>
  );
}

Install

Import

import { ScoreRing } from '@/components/klarhimmel/ui/score-ring';
Lands in
components/klarhimmel/ui/score-ring.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in
Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.

API reference

PropTypeDefaultDescription
valuenumber | nullrequired0–100; null or a non-finite value is unassessed. Values are clamped.
labelReactNoderequiredNames the score in its visible caption.
unavailableReactNodeNot assessedCaption for an unassessed score.

Accessibility

KeyDoes
Screen readerReads the label and score caption; the ring is decorative.
Accessibility