# 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/social48. 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 Channels

# Community ChannelsFREE

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.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/social48`

## 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.

Free block

This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.

### Installation

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/social48"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/social48"
```

This installs the block to `components/beste/block/social48.tsx` plus the `badge23` component it uses for the eyebrow.

### Quick start

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

tsxCopy

```
import { Social48, social48Demo } from "@/components/beste/block/social48";

export default function CommunityPage() {
  return <Social48 {...social48Demo} />;
}
```

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

tsxCopy

```
import { BookOpen, MessagesSquare } from "lucide-react";
import { Social48 } from "@/components/beste/block/social48";

export default function CommunityPage() {
  return (
    <Social48
      badge={{ label: "Where people talk" }}
      heading="The rooms our users are already in"
      description="None of these are marketing lists."
      channels={[
        {
          icon: MessagesSquare,
          name: "The forum",
          description: "Practices swapping rota patterns and insurer quirks.",
          count: "2,140",
          countLabel: "members",
          href: "/community/forum",
        },
        {
          icon: BookOpen,
          name: "The monthly note",
          description: "One letter on the first Tuesday about what shipped and what broke.",
          count: "3,860",
          countLabel: "subscribers",
          href: "/newsletter",
        },
      ]}
      footnote="We read everything and answer in public wherever we can."
    />
  );
}
```

### Props

| Prop        | Type              | Default | Description                                               |
| ----------- | ----------------- | ------- | --------------------------------------------------------- |
| badge       | { label: string } | –       | Eyebrow above the hairline rule, rendered through Badge23 |
| heading     | string            | –       | Section heading in the left column of the header          |
| description | string            | –       | Supporting paragraph, right-aligned from md up            |
| channels    | Channel\[\]       | \[\]    | Linked places to join, as hairline rows                   |
| footnote    | string            | –       | Closing note under the list                               |
| className   | string            | –       | Extra classes for the outer section                       |

tsCopy

```
import type { LucideIcon } from "lucide-react";

type Channel = {
  icon: LucideIcon;
  name: string;
  description: string;
  count: string;
  countLabel: string;
  href: string;
};
```

### Behavior notes

* `count` and `countLabel` are separate so the figure can take the display treatment while its unit stays small. The figure uses `tabular-nums`, so the column aligns down the list.
* Rows are whole `Link` elements in a three-track grid from `md`: name and description, the figure, then the arrow. Below `md` the arrow is entirely, since the row is already obviously tappable.
* The figure block carries `pl-14 md:pl-0` on mobile, which indents it to line up under the description rather than under the icon tile.
* The hover arrow uses a named group, `group/social48`, rather than the bare `group` class, and its shift is wrapped in `motion-safe:`.
* Icons are passed as components, not names. Import the `lucide-react` icon and hand it over; the block renders it at `size-5` in a `size-10` tinted tile marked `aria-hidden`.
* Rows carry `md:px-4` alongside the hover fill, so the highlight extends slightly past the text on wider screens.
* Rows use `border-t` with no closing rule, so the list flows into the footnote rather than boxing itself off.

## More Social blocks

[View all Social](/blocks/social)

[](/block/social52)

PRO

social52

### Community Sessions

An upcoming sessions list with a date block, format, and remaining seats on each linked hairline row, beside a column that sticks and floats a live card for whoever is hosting next.

[](/block/social55)

PRO

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.

[](/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.

[](/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/social54)

PRO

social54

### Inverted Follow Panel

A follow section held in one dark panel, listing each account as a linked hairline row with what gets posted there and a light follower figure.

[](/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.

## 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.