# Beste UI
> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.
Markdown rendition of https://ui.beste.co/block/social55. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.
Last updated: 2026-08-03
Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json
---
1. /
2. [Blocks](/blocks)
3. /
4. [Social](/blocks/social)
5. /
6. Community By The Numbers
# Community By The Numbers[PRO](/pricing)
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.
ViewCodeDocs
Base UI
`npx shadcn add https://ui.beste.co/r-base/social55`
## 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 NowUpgrade Now](/pricing)
### Installation
Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).
**Radix flavor**
bashCopy
```
npx shadcn add "https://ui.beste.co/r/social55?email=YOUR_EMAIL&license_key=YOUR_KEY"
```
**Base UI flavor**
bashCopy
```
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.
tsxCopy
```
import { Social55, social55Demo } from "@/components/beste/block/social55";
export default function CommunityPage() {
return ;
}
```
Then replace the demo with your own props. Written out, a trimmed setup looks like this:
tsxCopy
```
import { Social55 } from "@/components/beste/block/social55";
import { Socialproof24 } from "@/components/beste/piece/socialproof24";
export default function CommunityPage() {
return (
}
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
| 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 |
tsCopy
```
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](/blocks/social)
[](/block/social7)
PRO
social7
### Community Groups List
Group cards with cover images, member count, privacy indicators, category badges, and join buttons. Perfect for community discovery and group listings.
[](/block/social46)
PRO
social46
### Community Card
Community group card with cover image, privacy status, member/post counts, topic tags, and join button. Perfect for community discovery and group suggestions.
[](/block/social48)
FREE
social48
### Community Channels
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.
[](/block/social49)
PRO
social49
### Social Post Grid
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.
[](/block/social50)
PRO
social50
### Featured Post And Replies
A social section that gives one post an image tile of its own, floating a live post card with its engagement counts, beside the replies it drew as linked hairline rows.
[](/block/social53)
PRO
social53
### Contributor Wall
A community credit section opening on three hairline figures, then naming each contributor in a hairline matrix of cards with their practice, what they changed, and how many reports they filed.
## Ship the interface, keep the code.
New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.
[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)
### Library
* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)
### Learn
* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)
### More
* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)
### Shadcn Blocks
* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)
© 2026, [Beste](https://beste.co). All rights reserved.