Press MentionsPRO

Social51: Press Mentions

A coverage section listing each outlet against the line it published, as linked hairline rows with the writer and date, closing on a soft press pack panel.

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

Base UI flavor

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

This installs the block to components/beste/block/social51.tsx plus the badge23 and button21 components it uses for the eyebrow and the press pack action.

Quick start

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

import { Social51, social51Demo } from "@/components/beste/block/social51";

export default function PressPage() {
  return <Social51 {...social51Demo} />;
}

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

import { Social51 } from "@/components/beste/block/social51";

export default function PressPage() {
  return (
    <Social51
      badge={{ label: "Written about us" }}
      heading="Coverage we did not place"
      description="We have no agency and we do not pay for placement."
      mentions={[
        {
          outlet: "Practice Weekly",
          quote: "The first clinical scheduler in a decade that treats the receptionist as the primary user.",
          writer: "Hannah Bray",
          date: "May 2026",
          href: "https://example.com/coverage/1",
        },
        {
          outlet: "The Care Review",
          quote: "Their published incident notes are more candid than most companies' marketing.",
          writer: "Owen Meade",
          date: "April 2026",
          href: "https://example.com/coverage/2",
        },
      ]}
      pressTitle="Writing about us?"
      pressBody="The press pack has logos, screenshots, and the founders' contact details."
      button={{ label: "Get the press pack", href: "/press" }}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type Mention = {
  outlet: string;
  quote: string;
  writer: string;
  date: string;
  href: string;
};

Behavior notes

• The quote is the display element, not the outlet name. Rows lead with the outlet in a narrow column but the pulled line is set at text-xl rising to md:text-2xl, so what was said outranks who said it.
• Quotation marks are added by the block as “ and ” entities, so pass quote as plain text or you will get doubled quotes.
• No logos are used anywhere, only outlet names as text. That is deliberate: a logo wall implies a relationship, and this block is for coverage that was not placed.
• Rows are whole Link elements in a three-track grid from md: outlet and date, the quote and writer, then the arrow. Below md the arrow is hidden entirely.
• The hover arrow uses a named group, group/social51, rather than the bare group class, carries self-start so it stays level with the top of a multi-line quote, and its shift is wrapped in motion-safe:.
• 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 closing panel.