Annual Report Readings

The annual read

A year of clinic time, counted rather than estimated

Published every January with the method attached. Where a number moved for a boring reason, we say that instead of taking credit for it.

Deep green gradient backdrop

Where the year went

Booked hours by appointment type

Consultations42%
Follow-ups28%
Assessments19%
Admin11%

Admin held in clinical rooms fell from 23% to 11% across the year. About half of that was scheduling and half was a practice manager who simply stopped allowing it.

184,920

appointments booked across the platform

All practices, 2025 calendar year

81%

median room utilisation

Booked hours over open hours, weighted by site

2.1%

no-show rate, down from 4.8%

Members who did not attend and did not cancel

11 hrs

of admin recovered per site each week

Room hours released back to clinical use

How we count

Figures come from the platform's own records, not from a survey. Practices in their first sixty days are excluded, because a half-migrated month makes everything look better than it is.

About this block

Annual Report ReadingsPRO

An annual results section pairing an image tile that floats a live breakdown chart with a light interpretation of it, then four hairline readings that each name their own source, closing on a method panel.

Stats70: Annual Report Readings

An annual results section pairing an image tile that floats a live breakdown chart with a light interpretation of it, then four hairline readings that each name their own source, closing on a method panel.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

bash
npx shadcn add "https://ui.beste.co/r/stats70?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

bash
npx shadcn add "https://ui.beste.co/r-base/stats70?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/stats70.tsx, the chart7 breakdown piece it floats on the tile (installed to components/beste/piece/chart7.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

The installed file exports stats70Demo alongside the block: the exact props behind the preview above. Spread it to get a working report in one line.

tsx
import { Stats70, stats70Demo } from "@/components/beste/block/stats70";

export default function AnnualPage() {
  return <Stats70 {...stats70Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsx
import { Chart7 } from "@/components/beste/piece/chart7";
import { Stats70 } from "@/components/beste/block/stats70";

export default function AnnualPage() {
  return (
    <Stats70
      badge={{ label: "The annual read" }}
      heading="A year of clinic time, counted rather than estimated"
      description="Published every January with the method attached."
      media={
        <Chart7
          title="Where the year went"
          caption="Booked hours by appointment type"
          items={[
            { label: "Consultations", percent: 42 },
            { label: "Admin", percent: 11 },
          ]}
        />
      }
      image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
      chartCaption="Admin held in clinical rooms fell from 23% to 11% across the year."
      readings={[
        {
          value: "184,920",
          label: "appointments booked across the platform",
          source: "All practices, 2025 calendar year",
        },
        {
          value: "81%",
          label: "median room utilisation",
          source: "Booked hours over open hours, weighted by site",
        },
      ]}
      methodTitle="How we count"
      methodBody="Figures come from the platform's own records, not from a survey."
      button={{ label: "Read the full report", href: "/reports/2025" }}
    />
  );
}

Props

PropTypeDefaultDescription
badge{ label: string }Eyebrow above the hairline rule, rendered through Badge23
headingstringSection heading in the left column of the header
descriptionstringSupporting paragraph, right-aligned from md up
mediaReactNodeLive asset on the tile, chart7 in the demo
image{ src: string; alt: string }Backdrop behind the media tile
chartCaptionstringThe reading of the chart, set large beside it
readingsReading[][]Headline figures, each naming its own source
methodTitlestringHeading in the closing method panel
methodBodystringHow the figures were produced
button{ label: string; href: string }Action in the method panel
classNamestringExtra classes for the outer section
ts
type ActionLink = {
  label: string;
  href: string;
};

type TileImage = {
  src: string;
  alt: string;
};

type Reading = {
  value: string;
  label: string;
  source: string;
};

Behavior notes

  • chartCaption is set at text-xl rising to md:text-2xl rather than at body size, so the interpretation of the chart carries the same weight as the chart itself. It is a paragraph, not a heading, since the section already has one.
  • source is required on every reading. A figure whose provenance is not stated beside it is the thing this block is built to prevent, and the closing method panel covers what the per-reading sources do not.
  • The demo's method body names an exclusion, the first sixty days of each practice, which is the kind of detail that makes a published figure checkable.
  • Readings each carry their own border-t, so the rules are per column and stop at the gaps.
  • The readings grid reflows one, two, then four across, so a four-item row never leaves a single orphan at tablet width.
  • The chart row is lg:items-center, so the caption stays centered against the tile beside it.
  • Figures use tabular-nums, so a row mixing "184,920" and "81%" still aligns.

More Stats blocks

View all Stats
FREE

stats68

Segmented Total Breakdown

A results section that leads on one oversized total, splits it across a segmented accent bar, then legends each segment on a hairline row aligning its value, share, and what it covers.

PRO

stats67

Before And After Pairs

A results section stacking each measure on its own hairline row, moving a muted starting figure to an accented result across an arrow, with a soft closing panel that floats a live comparison card.

FREE

stats66

Outcome Metric Rows

A results section that stacks each metric on its own hairline row, pairing an oversized figure with a short label, a sentence of context, and an optional year-over-year delta.

PRO

stats71

Single Headline Figure

A results section that commits to one enormous light figure, reads it back as a statement under a hairline, qualifies it with three smaller footnotes, and closes on a captioned full-bleed photograph.

PRO

stats75

Audience Figures With Sourcing Notes

Four publication figures on hairlines, each carrying a label and a short note on how that number was measured rather than leaving the reader to trust it.

PRO

stats38

Server Monitoring Stats

Monitoring dashboard aesthetic with status indicators, metric rows, live status badges, and a dark panel background.