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.
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.
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/social55?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
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.
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.
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:
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" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow above the heading, rendered through Badge23 |
heading | string | – | Section heading, capped at max-w-2xl |
description | string | – | Supporting paragraph, capped at max-w-xl |
figures | Figure[] | [] | Figure cards, four across from lg |
media | ReactNode | – | Live asset on the tile, socialproof24 in the demo |
image | { src: string; alt: string } | – | Backdrop behind the media tile |
mediaCaption | string | – | Caption beside the tile |
button | { label: string; href: string } | – | Action under the caption |
className | string | – | Extra classes for the outer section |
type ActionLink = {
label: string;
href: string;
};
type TileImage = {
src: string;
alt: string;
};
type Figure = {
value: string;
label: string;
detail: string;
};detail explaining the method. That third field is the block's whole argument, so it is required rather than optional.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.flex flex-col with the detail marked flex-1, so all four end at the same height regardless of how much explanation each needs.flex flex-col justify-center, so the text and action stay centered against the tile beside them.h-56, then md:h-64) since a portrait cluster needs width rather than height.tabular-nums, so a row mixing "118" and "2,140" stays optically aligned.social7
Group cards with cover images, member count, privacy indicators, category badges, and join buttons. Perfect for community discovery and group listings.
social46
Community group card with cover image, privacy status, member/post counts, topic tags, and join button. Perfect for community discovery and group suggestions.
social48
A community section listing four linked places to join as full-width hairline rows, each with an icon tile, a description, a light membership figure, and an arrow that shifts on hover.
social49
A social proof grid of six linked post cards, each with an avatar, handle, timestamp, the post itself, and reply, repost, and like counts under a hairline.