Shadcn.io is not affiliated with official shadcn/ui
CTA Card Inset Metric Row
A card-inset dark CTA for React and Next.js with a light outer frame, dark inner card, inline metric trust row, and dual ShadcnioButton action, built with shadcn/ui and Tailwind CSS
Convert visitors with this card-inset dark CTA for React and Next.js. Features a light outer bg-card frame wrapping a dark bg-foreground inner card, a kicker label, a left-aligned headline, a compact three-item inline metric trust row, and a dual ShadcnioButton action with inverted primary and ghost secondary. Built with TypeScript, ShadcnioButton from shadcn/ui, motion/react entrance animations, and Tailwind CSS. Perfect for platform landing pages, infrastructure product marketing, and any conversion section where a light-to-dark inset creates depth.
Related Components
Split Panel Dual Preview CTA
Split panel dark CTA with dual skeleton preview cards
Enterprise CTA
Split panel CTA with dual-action card inset
Free Trial CTA
Centered dark CTA with inverted primary button
Social Proof CTA
Dark CTA backed by avatar stack and ratings
Schedule Demo CTA
Split CTA with scheduling visual
Contact Sales CTA
Enterprise contact sales conversion band
FAQ
Was this page helpful?
Sign in to leave feedback.
Card Inset Keyboard Hero
A card-inset dark CTA section for React and Next.js with a light outer wrapper, dark inner card, oversized keyboard key mockup hero with plus connectors, and an inverted primary ShadcnioButton built with shadcn/ui and Tailwind CSS
Card Inset Notification Toast Preview
A card-inset notification toast preview CTA for React and Next.js with floating toast mockup, app icon square, sender title, message snippet, timestamp, dismiss control, and centered primary ShadcnioButton built with shadcn/ui and Tailwind CSS