Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Shield Seal CTA Block for React

A band guarantee call to action: the headline, a Shine Button and an outline link on the start side, and a flush tinted cell on the end side with a seal of text turning slowly round a shield, with a pause 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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Reassure a hesitant buyer with this guarantee call to action for React with Base UI. The block sits on the page's spine: two side rails at the page column and one top rule with a + mark on each crossing, so it joins the blocks above and below it. The start side holds the headline ("Love Parley or your money back"), one line of copy, a Shine Button, an outline link and a reassurance line. The end side is a flush cell tinted with bg-muted/50, with no frame and no divider line, holding a seal of text, "30-day money-back guarantee", that turns slowly round a shield medallion; a small button holds it still, and it stops by itself under reduced motion. On phones the seal cell follows the copy under a rule. It's built from Circular Text, Float, Button and Shine Button, so every colour comes from your theme, light or dark, and the medallion is a foreground disc. Made for trials with a refund window, subscriptions, courses and any purchase where taking the risk away is the last step.

FAQ

How do I change the text round the seal?

Edit the text of the CircularText. End it with a space, a dot or another separator so the seam where the last letter meets the first reads, and keep it short: the ring grows with the text, and about thirty characters make a seal about as wide as the cell's centre. duration is the time of one turn in milliseconds, and --circular-text-spacing sets how much room each letter gets round the ring.

Can visitors stop the turning, and what about reduced motion?

Yes, three ways. The small button at the seal's corner is a toggle named "Pause the turning text": pressing it freezes the ring where it is, and pressing it again lets it go on. Moving the pointer over the ring also pauses it. With the operating system's reduced-motion setting on, the ring doesn't turn at all and the button is hidden, since there's nothing to stop. The seal is decoration only: the guarantee is also in the headline and the copy.

What do screen readers read for the seal?

Nothing: the seal is hidden from assistive technology, because it only repeats the headline and the paragraph, and reading thirty single letters is noise. The pause button is outside that hidden part, so it stays a named, focusable control with aria-pressed.

Does the block follow my theme?

Yes. The tinted cell is bg-muted/50, the hairlines are border and the medallion is bg-foreground, so it is light on a light page and dark on a dark one, in any preset. Nothing forces a dark scope. The theme's primary colour appears once, on the Shine Button.

Where does the button go, and what should the reassurance line say?

The Shine Button is a link: point it at your trial or checkout. The line under it should only promise what your page keeps: change "No credit card required" if your trial asks for one, and keep the refund window in the seal and the copy equal, since a number that disagrees with your terms costs more trust than the seal earns. The button renders the link it's given with render, with nativeButton={false}.

Does it work in right-to-left languages?

Yes. The text round the seal is positioned by angle, so it reads the same way in any direction, the tinted cell moves to the other side and the pause button moves to the other corner. Translate the text and the copy; the layout needs nothing else.

  • Pro

    Card Inset Shield Trust List CTA

    Trust and security

    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.

  • Pro

    Icon Medallion CTA

    Trust and security

    A split security prompt for a password vault: the headline and two actions at the start, and at the end a settings panel where a medallion swaps from an alert shield to a checked one when the two-factor switch turns on.

  • Pro

    Icon Accent CTA

    With a closing band

    A band call to action with an accent icon in a hairline frame, a Shine Button and a docs link, and a closing band of three cells that fill in one by one when you press Deploy now.

  • Pro

    Pill Dual Action CTA

    Prices and offers

    A band call to action: the saving of paying yearly beside one pill split into two linked halves (monthly in outline, yearly on the Shine Button), with a closing row of three figures worked out from the two prices.

  • Pro

    Money Back Hero Pricing

    Proof and guarantees

    One plan sold on its guarantee: an oversized 30-day seal, its promise written round the edge, beside the plan's price, features and call to action.

  • Pro

    Pricing With Guarantee

    Proof and guarantees

    A free trial with a refund window drawn as a timeline: today, day 12, day 14 and day 30 on one line, beside the yearly plan, its price and call to action. It turns vertical on a phone.

All 100 cta blocks