Soft Panel Capacity ReportPRO

Feature259: Soft Panel Capacity Report

A feature contained in one soft panel: heading and paragraph beside an image tile floating a live breakdown chart, closing on a hairline row of four capacity figures.

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

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

Base UI flavor

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

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

Quick start

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

import { Feature259, feature259Demo } from "@/components/beste/block/feature259";

export default function Page() {
  return <Feature259 {...feature259Demo} />;
}

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

import { Chart7 } from "@/components/beste/piece/chart7";
import { Feature259 } from "@/components/beste/block/feature259";

export default function Page() {
  return (
    <Feature259
      badge={{ label: "Where time goes" }}
      heading="Capacity you can argue with, because it is measured"
      description="Every booked, moved, and cancelled hour is counted as it happens, so the case for another clinician is a screenshot rather than a hunch."
      media={
        <Chart7
          title="Where the week went"
          caption="Booked hours by appointment type"
          items={[
            { label: "Consultations", percent: 42 },
            { label: "Follow-ups", percent: 28 },
          ]}
        />
      }
      image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
      metrics={[
        { value: "96", label: "clinical hours booked last week" },
        { value: "81%", label: "of licensed capacity in use" },
      ]}
    />
  );
}

Props

type PanelMetric = {
  value: string;
  label: string;
};

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

Behavior notes

• Everything lives inside one bg-muted panel on a bg-background section, so the block reads as a single card rather than a full-width band. The section keeps its own padding, which is what leaves the panel inset from the page edge.
• The tile inside the panel is bg-background, inverting the usual relationship: the tile is lighter than the surface it sits on, which keeps the floating asset readable without adding a border.
• The upper row is lg:items-center, so the copy stays vertically centered against the tile instead of aligning to its top edge.
• The metrics row carries the panel's only hairline. It renders only when metrics has entries, so an empty array leaves the panel closing on the tile with no stray rule.
• Metric values are text-4xl font-light, the same treatment the set uses for display figures, so they read as evidence rather than as headings. They are not h3 elements, since they are numbers rather than section titles.
• The metrics grid reflows one, two, then four across, so a four-item row never drops a single orphan onto its own line at tablet width.