Shadcn.io is not affiliated with official shadcn/ui
CTA Card Inset Big Metric Checklist
A card-inset dark CTA block for React and Next.js with a muted outer panel, a dark inset card containing a big hero metric, a three-item emerald checklist, an inverted primary ShadcnioButton, and an eligibility footnote built with shadcn/ui and Tailwind CSS
Convert visitors with this card-inset dark big metric checklist CTA for React and Next.js. Features a light muted outer panel wrapping a dark inset card with an eyebrow tagline, a bold tabular-nums hero metric, a three-item emerald CheckIcon benefit list, an inverted primary ShadcnioButton, and a small eligibility footnote (demonstrated with a $25,000 startup credits program). Built with TypeScript, ShadcnioButton from shadcn/ui, motion/react entrance animations, Lucide React icons, and Tailwind CSS. Perfect for program landing pages, grant and credit offers, partner enrollment flows, and any conversion where a single large number carries the message.
Related Components
Card Inset Metric Row CTA
Card-inset dark CTA with a horizontal metric row
Card Inset Benefits Stack CTA
Card-inset dark CTA with a stacked benefits list
Card Inset Feature Checklist CTA
Card-inset dark CTA with an inline feature checklist
Card Inset Count Badge CTA
Card-inset dark CTA with a count badge
Card Inset Announcement Badge CTA
Card-inset dark CTA with an announcement pill
Centered Dark Stat Hero CTA
Centered dark CTA with a hero stat number
FAQ
Was this page helpful?
Sign in to leave feedback.
Card Inset Benefits Stack
A card-inset dark CTA for React and Next.js with outer light panel, inner dark card, icon medallion, emerald check benefits list, headline stat, and dual ShadcnioButton row, built with shadcn/ui and Tailwind CSS
Card Inset Code Snippet Copy
A card-inset dark CTA section for React and Next.js with a light outer wrapper, dark inner card, prominent copy-to-clipboard code block with toggle feedback, and inverted primary ShadcnioButton built with shadcn/ui and Tailwind CSS