Stats, rings · Klarhimmel UI

Install

npx shadcn add @klarhimmel/stats-rings

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import StatsRings from '@/components/klarhimmel/blocks/stats-rings';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <StatsRings props={{
          "eyebrow": "Results",
          "title": "What a year on Northlight looks like",
          "description": "Averages across the 41 properties that have used it for twelve months.",
          "items": [
            {
              "value": "94%",
              "label": "Occupancy in high season",
              "note": "Up from 81% before."
            },
            {
              "value": "68%",
              "label": "Bookings made directly",
              "note": "Commission paid down by half."
            },
            {
              "value": "87%",
              "label": "Guests who book again",
              "note": "Within eighteen months."
            },
            {
              "value": "99%",
              "label": "Replies within an hour",
              "note": "Weekdays 08:00 to 18:00."
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/stats-rings';

Also called

stats/rings

About: Two to four percentages as rings with the figure in the middle, a label and a note under each. The fill is the number in `value` (0 to 100); a value with no number draws an empty ring. For rates and shares, not raw counts.
Category: A few numbers that prove the point.

Notes

When to use it

Two to four percentages shown as rings with the figure in the middle and a label and note below. Use `stats-bars` when you have up to six measures or want them compared in a list.

Writing for it

- The first number in value (20 characters) decides how much of the ring is filled, so '92%' fills most of the circle. Keep it a real percentage. - The label (60 characters) is a heading for the ring, so name the thing counted, such as 'On-time delivery'. - The note (100 characters) is limited to a narrow width under the ring, so use it for the basis in a short clause.

Watch out for

A value with no number, like 'n/a', draws an empty ring, not a missing one. Raw counts such as '1 240' would be read as a percentage and clamp to 100, so do not use rings for them.

Pairs well with

Usage

The block in a page, with its default content (long lists shortened). Every prop is in the table below.

section.tsx

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import StatsRings from '@/components/klarhimmel/blocks/stats-rings';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <StatsRings props={{
          "eyebrow": "Results",
          "title": "What a year on Northlight looks like",
          "description": "Averages across the 41 properties that have used it for twelve months.",
          "items": [
            {
              "value": "94%",
              "label": "Occupancy in high season",
              "note": "Up from 81% before."
            },
            {
              "value": "68%",
              "label": "Bookings made directly",
              "note": "Commission paid down by half."
            },
            {
              "value": "87%",
              "label": "Guests who book again",
              "note": "Within eighteen months."
            },
            {
              "value": "99%",
              "label": "Replies within an hour",
              "note": "Weekdays 08:00 to 18:00."
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}

Props

The type, default and text limit of every prop. On a real page, over-limit text is kept and checkSections flags it (Installation, Check a page before you ship); this live preview shows the default until it fits. The panel above edits all props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Results'`	Text, up to 60 characters.
`title`	`string`	`'What a year on Northlight looks like'`	Text, up to 120 characters.
`description`	`string`	`'Averages across the 41 properties t…'`	Text, up to 300 characters.
`items`	`{ value, label, note }[]`	`4 items`	List of 2 to 4. Each item: value, label, note.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.