# 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/social58. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

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. Response Wall With Platform Filter

# Response Wall With Platform Filter[PRO](/pricing)

A masonry of what readers wrote back, disagreements included, filtered by platform pills whose counts come from the responses themselves, over a hairline row of accounts to follow.

ViewCodeDocs

Base UI

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

## Social58: Response Wall With Platform Filter

A masonry of what readers wrote back, disagreements included, filtered by platform pills whose counts come from the responses themselves, over a hairline row of accounts to follow.

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/social58.tsx` and the `badge6` component it uses for the eyebrow (installed to `components/beste/component/badge6.tsx`).

### Quick start

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

tsxCopy

```
import { Social58, social58Demo } from "@/components/beste/block/social58";

export default function DiscussionPage() {
  return <Social58 {...social58Demo} />;
}
```

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

tsxCopy

```
import { Social58 } from "@/components/beste/block/social58";

export default function DiscussionPage() {
  return (
    <Social58
      eyebrow="The argument"
      heading="What people said back"
      description="These are the responses worth reading, including the ones that disagree."
      allLabel="Everywhere"
      reactions={[
        {
          platform: "Mastodon",
          handle: "@rovaniemi",
          avatar: { src: "/people/one.jpg", alt: "@rovaniemi" },
          body: "Strong disagree on discovery being a paid line.",
          about: "On: the estimate is design work",
          href: "https://example.com/post",
        },
      ]}
      followLabel="Follow along"
      channels={[{ platform: "Mastodon", handle: "@polaris", href: "https://example.com" }]}
    />
  );
}
```

### Props

| Prop        | Type         | Default | Description                          |
| ----------- | ------------ | ------- | ------------------------------------ |
| eyebrow     | string       | –       | Badge6 label above the hairline rule |
| heading     | string       | –       | Section heading under the rule       |
| description | string       | –       | Supporting paragraph                 |
| allLabel    | string       | –       | Label on the unfiltered pill         |
| reactions   | Reaction\[\] | \[\]    | The responses themselves             |
| followLabel | string       | –       | Label on the accounts row            |
| channels    | Channel\[\]  | \[\]    | Accounts to follow, under the wall   |
| className   | string       | –       | Extra classes for the outer section  |

tsCopy

```
type Reaction = {
  platform: string;
  handle: string;
  avatar?: Avatar;
  body: string;
  about: string;
  href: string;
};

type Channel = {
  platform: string;
  handle: string;
  href: string;
};

type Avatar = {
  src: string;
  alt: string;
};
```

### Behavior notes

* The filter pills are derived from the data: the platform list is the set of platforms in `reactions`, and each count is that platform's share. Adding a response on a new platform adds its pill without touching the block.
* The unfiltered pill carries the total, so the filter reads as a breakdown rather than as a set of tabs.
* The wall is a CSS `columns` masonry with `break-inside-avoid` on each card, so cards of different heights pack without a layout library.
* Each card is a whole `Link` out to the original post, and the line naming which piece it answers moves to the accent colour on hover.
* `avatar` is optional per response, so a reply from an account with no picture still renders cleanly.

## More Social blocks

[View all Social](/blocks/social)

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

[](/block/social57)

FREE

social57

### Community Photo Wall

A community gallery laid out as a masonry of customer photographs at mixed heights, each captioned with what is happening and the practice it came from.

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

PRO

social3

### Threaded Comments

Comment section with nested replies, like counts, reply functionality, and expandable threads. Perfect for blog posts, articles, or discussion forums.

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

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