# Trust Center

> Three trust sections — compliance seals with rotating ring text and scoped details, four safeguards whose line icons draw themselves, and an uptime promise with 90 scrubbable day bars, support targets and service credits.

- Collection: Blocks
- Tier: pro
- Docs: https://geturui.com/docs/trust-security
- Install: `npx shadcn@latest add @geturui-pro/trust-security`
- Dependencies: motion, lucide-react

## Variants

### Compliance marks

SOC 2, ISO 27001, GDPR and HIPAA as generic text seals with rotating ring text; choosing one swaps in its scope, assessor and report link.

Install: `npx shadcn@latest add @geturui-pro/trust-security-compliance-marks`

```tsx
import { ComplianceMarks } from "@/components/blocks/trust-security/compliance-marks";

export default function Trust() {
  return <ComplianceMarks defaultMark="soc2" />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| marks | `ComplianceMark[]` | — | { id, code, sub?, ring?, title, summary, scope, assessor?, lastReview?, reportHref?, reportLabel? }. |
| defaultMark | `string` | — | Id of the mark selected first. |
| eyebrow / heading / subheading | `string` | — | Header copy; the default subheading notes the badges are not official logos. |
| className | `string` | — | Classes for the outer section. |

### Safeguards

Four safeguard tiles whose icons animate in view and replay on hover: a lock snaps shut, a fingerprint traces, a log writes and backups spin.

Install: `npx shadcn@latest add @geturui-pro/trust-security-safeguards`

```tsx
import { Safeguards } from "@/components/blocks/trust-security/safeguards";

export default function Trust() {
  return (
    <Safeguards
      items={[
        { icon: "lock", title: "Encrypted everywhere", description: "AES-256 at rest.", spec: "TLS 1.3 in transit" },
        { icon: "fingerprint", title: "Access by identity", description: "SSO and SCIM." },
        { icon: "audit", title: "Every action on record", description: "Immutable audit logs." },
        { icon: "backup", title: "Backed up, tested", description: "Quarterly restore drills." },
      ]}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| items | `Safeguard[]` | — | { icon, title, description, spec? }. Four fill the 1 → 2 → 4 column grid. |
| items[].icon | `"lock" | "fingerprint" | "audit" | "backup"` | — | Built-in animated line icon. |
| eyebrow / heading / subheading | `string` | — | Header copy. |
| className | `string` | — | Classes for the outer section. |

### Uptime promise

A rolling uptime percentage over 90 daily bars you can scrub by pointer or keyboard, beside support response targets and service credits.

Install: `npx shadcn@latest add @geturui-pro/trust-security-uptime-promise`

```tsx
import { UptimePromise } from "@/components/blocks/trust-security/uptime-promise";

export default function Reliability() {
  return <UptimePromise target={99.95} days={days} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| days | `UptimeDay[]` | — | { date, uptime, note? } oldest first. Defaults to 90 days of sample data. |
| endDate | `string` | "2026-09-30" | Last day of the generated sample data. |
| target | `number` | 99.95 | Contractual uptime target. |
| support | `SupportTarget[]` | — | { severity, description?, response } rows. |
| credits | `ServiceCredit[]` | — | { below, credit } rows; the last is emphasised. |
| eyebrow / heading / subheading | `string` | — | Header copy. |
| className | `string` | — | Classes for the outer section. |

## Accessibility

- Compliance seals are tabs controlling one tab panel, with arrow, Home and End keys; seals are generic text badges, never official logos.
- Uptime bars form a listbox with aria-activedescendant: arrows move by a day, Page Up/Down by a week, and the focused day is announced.
- Status colours always come with a word (Operational, Degraded, Outage); icon drawing and seal rotation stop under reduced motion.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.