Trust And Compliance Ledger

Saas107: Trust And Compliance Ledger

Security and trust section that names actual arrangements instead of badges. Four ruled pillars with circular icons sit above a labelled row of measured figures such as uptime and support response, with a caveat note and an outline pill CTA closing it.

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

Base UI flavor

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

This installs the block to components/beste/block/saas107.tsx plus the badge7 eyebrow and button12 pill button it uses.

Quick start

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

import { Saas107, saas107Demo } from "@/components/beste/block/saas107";

export default function Page() {
  return <Saas107 {...saas107Demo} />;
}

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

import { ShieldCheck } from "lucide-react";
import { Saas107 } from "@/components/beste/block/saas107";

export default function Page() {
  return (
    <Saas107
      badge={{ label: "Guarantees" }}
      heading="The boring guarantees, written where you can check them."
      description="This page names the actual arrangements, including the unfinished ones."
      pillars={[
        {
          icon: ShieldCheck,
          title: "Audited yearly",
          description: "An external firm reviews the platform every February.",
        },
      ]}
      facts={[{ title: "Uptime, trailing year", value: "99.98%" }]}
      button={{ label: "Read the security notes", href: "/security" }}
      labels={{ factsTitle: "Measured, not claimed", note: "Newer regions are in progress." }}
    />
  );
}

Props

type TrustPillar = {
  icon: LucideIcon;
  title: string;
  description: string;
};

type TrustFact = {
  title: string;
  value: string;
};

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

type Saas107Labels = {
  factsTitle?: string;
  note?: string;
};

Behavior notes

• icon takes the Lucide component itself, not a name string, so the icon set is tree-shaken and no runtime name lookup or icon map is needed.
• Icons sit in a size-12 circle on bg-muted at size-6, which is the set's icon treatment: monochrome, never a coloured chip.
• Pillars are md:grid-cols-2 rather than four across, because each description is a full sentence and four narrow columns would break them into slivers.
• The facts row gets its own Badge7 label, which is what separates measured claims from the qualitative pillars above them.
• value is a string, so a fact can read 99.98%, 34 minutes or None without the block formatting numbers.
• The closing note exists so unfinished certifications can be stated honestly in the same section as the guarantees, rather than being hidden a page deeper.