Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Card Inset Shield Trust List CTA Block for Radix UI

A centred card-in-card guarantee that follows your theme: a headline naming the refund window over a band of three terms on shared hairlines, each promise with its value at display size, and one Shine Button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A closing call to action for React with Radix UI that makes a guarantee feel as plain as a contract. Between the page's solid rails, a muted shell with + marks on its corners holds a raised panel (a card with a soft shadow and a hairline ring). It opens with a headline that names the refund window and a short line, then a terms band across the full width of the panel: three cells on shared hairlines with + marks on the band's corners, each a promise with what it is worth at display size ("30 days", "One click", "Yours to keep"). One Shine Button closes it, with a shield beside the small print under it. On a phone the three cells become rows, the label at the start and the value at the end, so the button stays on the first screen. It's built from Guides and Shine Button, with CSS only for the entrance and your theme's tokens for every colour, so it's light in a light theme and dark in a dark one. For pricing pages, checkout steps and trial prompts where the risk is what holds people back.

FAQ

How do I change the terms?

Edit REFUND_DAYS and TERMS at the top of the file. The headline reads REFUND_DAYS and so does the first cell, so the window is written once; each other cell is an icon, a label and a value. Keep the values short, two or three words: they are set large, and wrap onto a second line on a very narrow screen rather than overflowing.

Are the terms a real list?

Yes. They are a description list: each cell is a term and its description, so a screen reader announces "Refund window, 30 days" as a pair, whichever way the cells are laid out. On a desktop the value is drawn above its label, but the label comes first in the source. The icons and the shield are decoration and are hidden from assistive technology.

What does the block claim?

Only what its own terms say: nothing about how many customers there are or how few ask for a refund. Add a figure like that only when you can stand behind it, and put it in the line under the headline.

What happens with reduced motion?

The shell doesn't fade in. Nothing else moves.

Does it work right to left?

Yes. The cells run from the right and the labels sit at the start of each row on a phone, so everything mirrors, and each value is wrapped so a number and its unit ("30 days") keep their order.