shadcn.io is not affiliated with official shadcn/ui
Card Inset Feature Checklist CTA Block for React
A card-in-card enterprise CTA: a start-aligned header with a Shine Button at its end, over a hairline-divided grid of six features in two columns, each with an info button that opens a one-sentence explanation.
Installation
Overview
A closing call to action for React with Base UI for plans that need a few lines of explaining. A muted shell with + marks on its corners wraps a raised panel that follows your theme. A start-aligned header holds the headline and a short pitch, with the Shine Button at its end; below it, six features sit in one grid of two columns whose cells are divided by shared hairlines. Every line ends in a small info button that opens a one-sentence explanation of the feature on tap, click or Enter, and closes on Escape. On a phone the button follows the pitch and the cells become one column. It's built from Guides, Toggle Tooltip, Button and Shine Button, with CSS only for the entrance and your theme's tokens for every colour. For enterprise and contact-sales sections where the buyer wants to know what "SSO and SCIM" means before they write.
FAQ
How do I change the features and what they say?
Edit FEATURES at the top of the file: each entry has the line that shows (name) and the sentence the info button opens (tip). The grid is two columns from the sm breakpoint and one on a phone, in the order of the array, so put the lines you most want read first.
How do the info buttons work?
Each is a real button named "More about" and the feature, wrapped in Toggle Tooltip, which is a popover: it opens on click, tap or Enter, closes on Escape or a second press, and gives focus back to the button. It doesn't depend on hover, so it works the same with a finger as with a mouse.
Why does the tip look different from the panel?
The tip is drawn outside the panel, at the page level, so it takes your page's colours, and it is drawn as the inverse of the page behind it: dark on a light page and light on a dark page, so it stays distinct from the panel.
What happens with reduced motion?
The shell doesn't fade in and the tips open without animating. Nothing else moves.
Related
- Pro
Card Inset Benefits Stack CTA
Card in cardA centred card-in-card CTA for a managed cloud: the headline, a Shine Button and an outline button, then three benefits drawn as a deck of cards that fan apart into a row on hover or focus.
- Pro
Card Inset Big Metric Checklist CTA
Figures and statsA card-in-card startup-program CTA split in two: one giant credit figure circled by a hand-drawn pen stroke in a hairline frame at the start, and the headline, a three-line checklist, a Shine Button and an eligibility note at the end.
- Pro
Card Inset Shield Trust List CTA
Trust and securityA 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
Checklist Hero
PricingA showcase hero for a single plan: the headline and the price in a card in card, over a grid of eight included features that share their hairlines.
- Pro
All Inclusive Pricing
Single planOne price over a wall of everything it includes: 36 features as ticked chips in six ruled groups, with the price and one call to action in the header row and nothing gated or extra to buy.
- Pro
Inset Announcement Badge CTA
Card in cardA card-in-card call to action for a code editor's AI completion: the headline and one sentence at the start, a linked announcement pill and a Shine Button at the end, in a muted frame with + marks on its corners.