Response Wall With Platform Filter

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.

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

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

Base UI flavor

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.

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:

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

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.