Policy Document With Table Of ContentsPRO

Legal52: Policy Document With Table Of Contents

Readable policy page: an eyebrow, a two-column heading, and a last-updated line above a sticky hairline table of contents that jumps to each anchored section, beside prose sections with accent-bulleted lists and a soft contact panel at the end.

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

Base UI flavor

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

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

Quick start

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

import { Legal52, legal52Demo } from "@/components/beste/block/legal52";

export default function PrivacyPage() {
  return <Legal52 {...legal52Demo} />;
}

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

import { Legal52 } from "@/components/beste/block/legal52";

export default function PrivacyPage() {
  return (
    <Legal52
      badge={{ label: "Legal" }}
      heading="Privacy policy"
      description="What we hold, why we hold it, and how you get it back."
      updated="Last updated April 2, 2026"
      tocLabel="On this page"
      sections={[
        {
          slug: "what-we-collect",
          title: "What we collect",
          paragraphs: ["We collect the account details your team enters and technical logs."],
          bullets: ["Account data: names, work emails, roles", "Technical data: device and IP"],
        },
        {
          slug: "your-rights",
          title: "Your rights",
          paragraphs: ["You can export or delete a workspace at any time, in an open format."],
        },
      ]}
      contact={{
        title: "Questions about any of this?",
        description: "Our data protection contact answers policy questions directly.",
        button: { label: "Contact the privacy team", href: "/contact" },
      }}
    />
  );
}

Props

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

type Section = {
  slug: string;
  title: string;
  paragraphs: string[];
  bullets?: string[];
};

type Contact = {
  title: string;
  description: string;
  button: ActionLink;
};

Behavior notes

• The table of contents is generated from sections, so it can never drift from the document: every entry links to #{slug} and the matching section carries that slug as its id.
• Because those ids are real DOM ids, slug values have to be unique on the page. Two instances of this block on one route would produce duplicate ids and the first match would win.
• Each section sets scroll-mt-24, so a jump from the contents leaves the heading clear of a sticky site header instead of tucking it underneath.
• The contents column is sticky from lg (lg:sticky lg:top-24) and sits above the prose as a plain list below that width, so on a phone it reads as a summary rather than a floating rail.
• Section headings are h2 under the document's h1, giving a policy page a correct outline without any extra configuration.
• Paragraphs and bullets are capped at max-w-2xl inside a wider column, which holds the measure near a comfortable line length while the contents rail keeps its own width.
• The first section drops its top rule and top padding, so the document starts flush with the contents rail rather than under a stray hairline.