component · 64/108
Trust Panel
Customer logos, ratings, certifications, and security evidence in one section.
Install
Install manuallyView source on GitHub
Anatomy
- TrustPanel
- TrustPanelTitle
- TrustPanelRating
- TrustPanelLogos
- TrustPanelLogo
- TrustPanelBadges
- TrustPanelBadge
Accessibility3 checks
- The section is labelled by its title; logos are a list whose items expose each customer name as text.
- Ratings render stars as decoration with a visible “4.8 out of 5” text equivalent.
- Certification badges are a list of text items; only claim evidence you can show on request.
Marketing and conversion
2,400 operations teams run their week on Ferrow
4.8 out of 51,240 verified reviews on G2
- SOC 2 Type II report on request
- ISO/IEC 27001 certified
- AES-256 at rest and in transit
Code example
usage.tsximport { LockKeyhole, ShieldCheck } from "lucide-react";import { TrustPanel, TrustPanelBadge, TrustPanelBadges, TrustPanelLogo, TrustPanelLogos, TrustPanelRating, TrustPanelTitle, type TrustPanelVariant,} from "@/components/ui/uai/trust-panel";const customers = [ { name: "Brightmoor", mark: <circle cx="8" cy="8" r="7" /> }, { name: "Quillon", mark: <rect x="1" y="1" width="14" height="14" rx="3" /> }, { name: "Tessaline", mark: <path d="M8 1 15 15H1z" /> }, { name: "Orvik", mark: <path d="M1 8a7 7 0 0 1 14 0z" /> }, { name: "Calder", mark: <rect x="1" y="5" width="14" height="6" rx="3" /> }, { name: "Lumen Row", mark: <path d="M8 1v14M1 8h14" stroke="currentColor" strokeWidth="3" /> },];export function TrustPanelPreview({ variant = "card" }: { variant?: TrustPanelVariant }) { return ( <TrustPanel variant={variant}> <div className="flex flex-wrap items-start justify-between gap-x-6 gap-y-3"> <TrustPanelTitle> <b>2,400</b> operations teams run their week on Ferrow </TrustPanelTitle> <TrustPanelRating value={4.8} className={variant === "card" ? "justify-items-end" : undefined} > 1,240 verified reviews on G2 </TrustPanelRating> </div> <TrustPanelLogos> {customers.map((customer) => ( <TrustPanelLogo key={customer.name} name={customer.name}> <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> {customer.mark} </svg> {customer.name} </TrustPanelLogo> ))} </TrustPanelLogos> <TrustPanelBadges aria-label="Security and compliance"> <TrustPanelBadge> <b>SOC 2 Type II</b> report on request </TrustPanelBadge> <TrustPanelBadge icon={<ShieldCheck size={13} aria-hidden="true" />}> <b>ISO/IEC 27001</b> certified </TrustPanelBadge> <TrustPanelBadge icon={<LockKeyhole size={13} aria-hidden="true" />}> <b>AES-256</b> at rest and in transit </TrustPanelBadge> </TrustPanelBadges> </TrustPanel> );}Manual installation
trust-panel.tsxLoading component source…