Subprocessor Register

Legal54: Subprocessor Register

A legal section publishing every subprocessor as a scrollable hairline table with purpose, region and start date, closing on an image tile that floats a live data residency card beside a subscribe-to-changes 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/legal54?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/legal54.tsx, the location8 residency piece it floats on the tile (installed to components/beste/piece/location8.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { Legal54, legal54Demo } from "@/components/beste/block/legal54";

export default function SubprocessorsPage() {
  return <Legal54 {...legal54Demo} />;
}

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

import { Legal54 } from "@/components/beste/block/legal54";
import { Location8 } from "@/components/beste/piece/location8";

export default function SubprocessorsPage() {
  return (
    <Legal54
      badge={{ label: "Subprocessors" }}
      heading="Everyone who touches your data, and why"
      description="We publish changes here thirty days before they take effect."
      updatedLabel="Last updated 12 May 2026"
      columns={["Provider", "Purpose", "Region", "In use since"]}
      rows={[
        {
          name: "Aurora Cloud",
          purpose: "Application hosting and database storage",
          region: "London, United Kingdom",
          since: "March 2023",
        },
        {
          name: "Northline Payments",
          purpose: "Card processing and settlement",
          region: "Frankfurt, Germany",
          since: "August 2023",
        },
      ]}
      media={
        <Location8
          title="Where your records live"
          region="Primary region"
          sites={[{ name: "Application data", meta: "London, UK", value: "Primary" }]}
          total="0"
          totalLabel="records replicated outside the region you choose"
        />
      }
      image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
      noticeTitle="Be told before anything changes"
      noticeBody="Subscribe and we will email you thirty days ahead of any addition."
      button={{ label: "Subscribe to changes", href: "/subprocessors/subscribe" }}
    />
  );
}

Props

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

type Subprocessor = {
  name: string;
  purpose: string;
  region: string;
  since: string;
};

Behavior notes

• This is a real table rather than a grid of divs, which is right for a register: it prints correctly, it can be copied into a spreadsheet, and screen readers announce the column headers with each cell.
• The provider name is a th with scope="row", so each row is announced with its provider rather than as four loose cells. It carries an explicit font-medium, since a th inherits bold from the browser default and Tailwind's Preflight does not reset it.
• The table has min-w-[44rem] inside an overflow-x-auto wrapper, so it scrolls horizontally on small screens rather than compressing four columns into an unreadable width.
• Rows use align-top, so a long purpose does not push the provider name down its cell.
• updatedLabel sits opposite the eyebrow at the top rather than in the body, which is the convention this set uses for legal pages: the date is metadata about the document, not part of it.
• The closing row pairs the residency tile with the subscribe panel at equal width, so neither reads as the primary action.
• Nothing here is interactive. The subscribe action is a link, so the actual list signup lives at whatever destination you point to.