Community By The Numbers

The community, counted

Small enough that we know who you are

We publish these rather than rounding them up, because a number you can check is worth more than one you cannot.

118

practices in the group

Across the UK and Ireland, from single rooms to twelve-site groups.

2,140

people on the forum

Receptionists, clinicians, and managers. Nobody from our sales team, as there is not one.

412

changes shipped from their reports

Every one traceable back to a thread, with the person who raised it credited.

31

features we dropped

Because the group told us they were solving a problem nobody actually had.

Deep green gradient backdrop
Elena Rourke
Po
Tom Ashby
Po
Priya Nandan
Po
Maya Coleman
Po
Idris Warren
Po

The five practices who have filed the most reports this year. All of them have our founders' phone numbers.

Join the group
About this block

Community By The NumbersPRO

A community section on a soft surface with four bordered figure cards, each explaining what the number counts, over an image tile that floats a live cluster of member portraits.

Social55: Community By The Numbers

A community section on a soft surface with four bordered figure cards, each explaining what the number counts, over an image tile that floats a live cluster of member portraits.

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/social55?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/social55.tsx, the socialproof24 portrait-cluster piece it floats on the tile (installed to components/beste/piece/socialproof24.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

tsx
import { Social55, social55Demo } from "@/components/beste/block/social55";

export default function CommunityPage() {
  return <Social55 {...social55Demo} />;
}

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

tsx
import { Social55 } from "@/components/beste/block/social55";
import { Socialproof24 } from "@/components/beste/piece/socialproof24";

export default function CommunityPage() {
  return (
    <Social55
      badge={{ label: "The community, counted" }}
      heading="Small enough that we know who you are"
      description="We publish these rather than rounding them up."
      figures={[
        {
          value: "118",
          label: "practices in the group",
          detail: "Across the UK and Ireland, from single rooms to twelve-site groups.",
        },
        {
          value: "31",
          label: "features we dropped",
          detail: "Because the group told us they solved a problem nobody had.",
        },
      ]}
      media={
        <Socialproof24
          items={[
            { src: "/people/elena.jpg", alt: "Portrait of Elena Rourke", name: "Elena Rourke" },
            { src: "/people/tom.jpg", alt: "Portrait of Tom Ashby", name: "Tom Ashby" },
          ]}
        />
      }
      image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
      mediaCaption="The five practices who have filed the most reports this year."
      button={{ label: "Join the group", href: "/community" }}
    />
  );
}

Props

PropTypeDefaultDescription
badge{ label: string }–Eyebrow above the heading, rendered through Badge23
headingstring–Section heading, capped at max-w-2xl
descriptionstring–Supporting paragraph, capped at max-w-xl
figuresFigure[][]Figure cards, four across from lg
mediaReactNode–Live asset on the tile, socialproof24 in the demo
image{ src: string; alt: string }–Backdrop behind the media tile
mediaCaptionstring–Caption beside the tile
button{ label: string; href: string }–Action under the caption
classNamestring–Extra classes for the outer section
ts
type ActionLink = {
  label: string;
  href: string;
};

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

type Figure = {
  value: string;
  label: string;
  detail: string;
};

Behavior notes

  • Each figure carries three parts: the number, what it counts, and a detail explaining the method. That third field is the block's whole argument, so it is required rather than optional.
  • The section is bg-muted and both the cards and the tile are bg-background, inverting the usual relationship so everything reads as raised against a soft page.
  • Cards are flex flex-col with the detail marked flex-1, so all four end at the same height regardless of how much explanation each needs.
  • The figures grid is one, two, then four across, so four is the count it is tuned for.
  • The caption column is flex flex-col justify-center, so the text and action stay centered against the tile beside them.
  • The tile is a short band (h-56, then md:h-64) since a portrait cluster needs width rather than height.
  • Figures use tabular-nums, so a row mixing "118" and "2,140" stays optically aligned.

More Social blocks

View all Social
PRO

social46

Community Card

PRO

social7

Community Groups List

PRO

social50

Featured Post And Replies

Get Pro access