Community Notes Wall

Social59: Community Notes Wall

Short community posts laid out as a masonry wall: avatar, name, handle and a linked timestamp over the note itself, in three columns that fill by height rather than by row.

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

Base UI flavor

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

This installs the block to components/beste/block/social59.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Social59, social59Demo } from "@/components/beste/block/social59";

export default function Page() {
  return <Social59 {...social59Demo} />;
}

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

import { Social59 } from "@/components/beste/block/social59";

export default function Page() {
  return (
    <Social59
      eyebrow="From the community"
      heading="Notes people left along the way."
      description="Unedited, in their own words."
      buttons={[{ label: "Join the conversation", href: "/community", tone: "outline" }]}
      notes={[
        {
          name: "Phoebe Bridgers",
          handle: "@phoebe",
          avatar: { src: "/people/one.jpg", alt: "Portrait" },
          text: "Asked for a pricing page before lunch. Shipped it after lunch.",
          time: "2h",
          href: "/posts/1",
        },
      ]}
    />
  );
}

Props

type Note = {
  name: string;
  handle: string;
  avatar: { src: string; alt: string };
  text: string;
  time: string;
  href: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The wall is CSS multi-column rather than a grid, so cards of different heights pack without gaps and without measuring anything in JavaScript.
• Each card carries break-inside-avoid, which is what stops a note being split across a column boundary.
• Because columns fill top to bottom before moving right, the visual order runs down each column rather than across the row. Order your notes with that in mind.
• The stagger is keyed to index % 3 rather than the raw index, so all three columns begin arriving together instead of the third column lagging by a full sweep.
• Only the timestamp is a link, which keeps the card readable as a quotation rather than turning the whole thing into a target.
• Names and handles are truncated rather than wrapped, so a long handle never pushes the timestamp out of the row.
• Avatars are plain images with no blur-in, matching how the rest of the set treats portraits and thumbnails.