# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/saas107. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-07-29

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [SaaS](/blocks/saas)
5. /
6. Trust And Compliance Ledger

# Trust And Compliance Ledger[PRO](/pricing)

Security section pairing four ruled pillars with circular icons and a labelled row of measured figures such as uptime and support response, closed by a caveat note beside an outline pill CTA.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/saas107`

## 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.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
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.

tsxCopy

```
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:

tsxCopy

```
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

| Prop        | Type              | Default | Description                                                                 |
| ----------- | ----------------- | ------- | --------------------------------------------------------------------------- |
| badge       | { label: string } | –       | Eyebrow label rendered as a Badge7                                          |
| heading     | string            | –       | Section heading in the left column                                          |
| description | string            | –       | Supporting paragraph, right-aligned from md up                              |
| pillars     | TrustPillar\[\]   | \[\]    | Ruled pillars, each with a Lucide icon in a circle                          |
| facts       | TrustFact\[\]     | \[\]    | Ruled figures under their own eyebrow                                       |
| button      | ActionButton      | –       | Outline pill CTA on the closing rule, rendered as Button12                  |
| labels      | Saas107Labels     | {}      | Fixed strings that are not content: the figures eyebrow and the caveat note |
| className   | string            | –       | Extra classes for the outer <section>                                       |

tsCopy

```
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 a page deeper.

## More SaaS blocks

[View all SaaS](/blocks/saas)

[](/block/saas55)

PRO

saas55

### Connected Integrations

Integration management card showing connected apps with logos, sync status, and connect/disconnect actions. Perfect for settings pages managing third-party integrations.

[](/block/saas99)

PRO

saas99

### SaaS Integrations Grid

An editorial integrations section pairing a big-type pitch with a bordered mosaic of grayscale partner logo tiles.

[](/block/saas98)

PRO

saas98

### SaaS Interface Split

Feature split pairing a focused pitch with a built monochrome app-window mockup of skeletons, nav, and metrics.

[](/block/saas14)

PRO

saas14

### How It Works Steps

Three-step onboarding process with numbered circles and connecting lines. Perfect for explaining product workflows or signup processes.

[](/block/saas103)

PRO

saas103

### Onboarding Split

A reversed split with an image tile floating a live setup checklist on the left, and an eyebrow, light heading, checked bullets, and an accent button on the right.

[](/block/saas101)

PRO

saas101

### Three Tier Pricing

A pricing section with an eyebrow over a hairline rule, a two-column heading, and three plan cards with light prices, checked feature lists, and an accent-highlighted popular tier.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.