Trust Center
Prov1.0.0Certifications, scope and report requests under NDA, with subprocessors and the security contact.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { TrustCenter, type TrustCert } from "@/components/ui/notchset/blocks/trust-center";
export function Trust({ certs }: { certs: TrustCert[] }) {
return (
<TrustCenter
title="Built to pass your security review"
certs={certs}
onRequest={async (cert: TrustCert, email: string) => {
await fetch("/api/trust/requests", { method: "POST", body: JSON.stringify({ cert: cert.id, email }) });
}}
/>
);
}Props
certs–{ id, name, status, scope, facts, report?, dpa? }[]report names what's sent on request; dpa { title, text, action, href } replaces the form.
onRequest–(cert, email) => Promise<void>Send the report under NDA; a rejection shows TRY AGAIN.
subprocessors / contact / bounty–{ name, purpose, region }[] / string / stringThe table and the footer lines.
personalDomains–string[]Domains refused as personal (Gmail, Outlook, iCloud… by default).
Anatomy
- Switching certification clears the form and any confirmation.
- A certification with a DPA offers it instead of a report request.
- Emails are checked for shape, then for a personal domain.
TrustCenterdata-slot="trust-center"Certification cards, the scope and request panel, subprocessors and the footer.
Source
components/ui/notchset/blocks/trust-center.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @notchset-pro/trust-centerNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- A security and compliance page for enterprise buyers
- Handing out audit reports under NDA
Use something else when
- Certifications you don't hold yet
- Legal terms: link to the policy pages
Mistakes to avoid
- Send reports from the server and record who asked
- Keep the personal-domain list in step with your sales policy
Agents find it by
- trust center, security page, SOC 2, ISO 27001, GDPR, compliance, subprocessors, security review, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/trust-center.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- ← →
- Switch certification
- Enter
- Send the request
Accessibility
- Certifications are tabs (arrow keys move) controlling a labelled panel
- The form shows its own errors in a polite region linked to the field (noValidate)
- Subprocessors are a real table with row headers
Motion
- Pick or hover
- The ring fills clockwise, 22ms a dot, then the centre pops
- Refused email
- The field shakes
- Sending
- A scanner, then the confirmation rises in
Responsive
- Cards wrap to fit; under 760px (container width) the request form sits under the facts.
Performance
- Plain DOM and CSS transitions.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
