Inverted Follow PanelPRO

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.

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

Base UI flavor

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

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

Quick start

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

import { Social54, social54Demo } from "@/components/beste/block/social54";

export default function FollowPage() {
  return <Social54 {...social54Demo} />;
}

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

import { Social54 } from "@/components/beste/block/social54";

export default function FollowPage() {
  return (
    <Social54
      badge={{ label: "Follow along" }}
      heading="Everywhere we post, and what we post there"
      description="Four accounts, four different jobs."
      accounts={[
        {
          network: "LinkedIn",
          handle: "sirius-care",
          posts: "Hiring, funding, and the occasional long write-up",
          followers: "8,410",
          href: "https://example.com/linkedin",
        },
        {
          network: "RSS",
          handle: "example.com/feed.xml",
          posts: "Every changelog entry and blog post, with no algorithm in between",
          followers: "3,120",
          href: "/feed.xml",
        },
      ]}
      note="We do not cross-post the same thing to all four."
      button={{ label: "Read the changelog instead", href: "/changelog" }}
    />
  );
}

Props

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

type Account = {
  network: string;
  handle: string;
  posts: string;
  followers: string;
  href: string;
};

Behavior notes

• posts is required on every account and is the reason the block exists: a follow section that lists networks without saying what appears on each is asking people to guess.
• No network logos are used, only names as text. That keeps the panel free of third-party marks and means adding a network needs no asset.
• The whole block is bg-foreground, so every text token inside is a fixed background value and hairlines use border-background/20 rather than border-border.
• The row hover is hover:bg-background/5 rather than hover:bg-muted, since a muted fill is invisible on an inverted surface.
• The single action carries an inline border-background/30 text-background hover:bg-background/10 override on top of tone="outline", for the same reason.
• Rows are whole Link elements in a four-track grid from md: network and handle, what gets posted, the follower count, then the arrow. Below md the arrow is hidden entirely.
• The hover arrow uses a named group, group/social54, and its shift is wrapped in motion-safe:.
• Follower counts are strings using tabular-nums, so they can carry separators or abbreviations and still align.