Shadcn.io is not affiliated with official shadcn/ui
CTA Card Inset Count Badge
A card-inset dark CTA for React and Next.js with a count-badge above the headline, inverted primary ShadcnioButton, and light outer frame built with shadcn/ui and Tailwind CSS
Convert visitors with this card-inset dark CTA for React and Next.js. Features a light outer frame wrapping a dark rounded inset card, a numeric count badge that sits above the headline, a centered h2 with subtitle copy, and an inverted primary ShadcnioButton on the bg-foreground panel (demonstrated with an open-positions hiring prompt). Built with TypeScript, ShadcnioButton and Badge from shadcn/ui, motion/react entrance animations, Lucide React icons, and Tailwind CSS. Perfect for careers sections, post-product announcements, and landing page footers where you want a single number to anchor the headline.
Related Components
React CTA Card Inset Benefits Stack Block
Card-inset dark CTA with stacked benefits list
React CTA Card Inset Feature Checklist Block
Card-inset dark CTA with checked feature rows
React CTA Card Inset Metric Row Block
Card-inset dark CTA with a metric row beneath the headline
React CTA Centered Dark Stat Hero Block
Centered dark band with a prominent stat above the headline
React CTA Centered Dark Pill Dual Action Block
Centered dark CTA with pill badge and two actions
React CTA Centered Dark Icon Accent Block
Centered dark CTA with icon accent above the headline
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Card Inset Feature Checklist
A card-inset dark CTA for React and Next.js with kicker, headline, two-column feature checklist, and inverted ShadcnioButton, built with shadcn/ui and Tailwind CSS