shadcn.io is not affiliated with official shadcn/ui
Guarantee Certificate About Block for React Aria
A home-warranty guarantee drawn as a certificate: a seal in SVG above the title, three promises with ticks, the fine print behind a disclosure that stays in the page, and a Shine Button to start a claim, in a card in card.
Installation
Overview
A guarantee section for React with React Aria, written for Boltsure, a fictional home-warranty company. The guarantee is drawn as a certificate: a muted shell with + marks on its corners around a raised panel, and inside it a ruled box with a seal at the top, the title, and three promises with ticks, side by side from md. A "Read the terms" disclosure at the foot opens the fine print, five numbered clauses, and a Shine Button, "Start a claim", is the block's one action. The seal is hand-drawn SVG, a scalloped rim from a sine at module scope with two rings and a bolt, in foreground weights; it is decoration, and the promises say everything it says. On every target except Radix the terms are in the page's HTML from the start, closed. It's built from Frame, Collapsible, Shine Button and Guides with a CSS entrance and your theme's tokens. For about and pricing pages that make a promise and want to show its limits. The guarantee and its terms are example copy: have yours checked before you publish anything like it.
FAQ
How do I change the promises and the terms?
The three promises are PROMISES at the top of the file, each with a bold lead and the rest of the sentence, and the numbered clauses are TERMS. The title, the sentence under the heading and the button's label are plain text in the component. Keep three promises: from md they sit in three columns.
Is the fine print really in the page?
Yes. The terms sit in a disclosure that is closed on load, but they are part of the page's HTML from the start, not fetched when someone opens them, so search engines and assistive technology can reach them. The trigger is a button with its open state announced, and its chevron turns when it opens.
How is the seal drawn, and is it accessible?
It is an inline SVG built from a polygon whose radius follows a sine, computed once at module scope, with two circles and a bolt path. It is decorative and hidden from assistive technology; the title and the promises carry its meaning. Every colour is a foreground tone, so it follows your theme.
Does the certificate follow my theme?
Yes. The panel has no dark scope, so it is light on a light page and dark on a dark one, and the shell, ring and shadow keep it apart from the page in both modes. The Shine Button is the only element in your primary colour.
Where does the button go?
It is a link (href="#"): point it at your claim form.
The button renders a link when it has an href.
How does it fit on a phone?
The certificate's padding steps down, the title wraps and the three promises stack, each keeping its tick. The terms link and the button stack too, the link first, and the opened terms run the full width of the box. Nothing scrolls sideways at 320 pixels. The header and the card fade up once on load; with reduced motion they simply appear, and the disclosure opens without a height animation.