shadcn.io is not affiliated with official shadcn/ui
Trust Centre Tiles Footer Block for Radix UI
A footer for a payments checkout whose three tiles (Security, Privacy, Compliance) share hairlines, each with an icon, a quiet Current status, one line and three links.
Installation
Overview
A trust-centre footer for React with Radix UI. The wordmark and one sentence sit on top. Under them three tiles share hairlines: Security, Privacy and Compliance, each with a drawn icon, a quiet "Current" status, one line saying what it covers and three links to the detail. The tiles are the footer's navigation: one nav labelled Footer holds the three groups, so a tile is a heading with a list of links, not a button that opens something. A legal band closes the page. It's built from Guides, the catalog's Status, plain links and your theme's tokens.
FAQ
How do I edit the tiles?
Edit the TILES array at the top of the file: each tile has a title, an icon, one line and a list of links. Keep three, since they fill the row from md; the line should say what the page behind the links covers, in one sentence.
What does the Current status mean?
It is a small dot in the foreground tone with the word "Current" next to it. The dot is decoration and the word carries the meaning. Show it only while it is true, and take it off a tile whose documents are out of date. A warning colour is reserved for a real exception; this block shows none.
Why are the tiles links and not buttons?
Opening a popover for each tile would hide the links behind a click and add three tab stops that do nothing on their own. Here every link is visible, so one Tab reaches each one, and a screen reader lists three groups, each under its own h2, inside a single Footer navigation.
How do screen readers move through it?
The block is a footer element, so at the end of the page it is the content-info landmark. The three tiles are groups in one nav labelled Footer, each with an h2; the legal links are a labelled list. Every link shows the theme's focus ring when reached by keyboard.