Shadcn.io is not affiliated with official shadcn/ui
CTA Card Inset Step List
A card-inset dark CTA for React and Next.js with a numbered three-step vertical list, inverted primary ShadcnioButton, and outer trust-row strip 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 numbered three-step vertical list with filled circle indicators, an inverted primary ShadcnioButton, and a two-item outer trust-row strip sitting below the inset card (demonstrated with a competitor migration flow). Built with TypeScript, ShadcnioButton from shadcn/ui, motion/react entrance animations, Lucide React icons, and Tailwind CSS. Perfect for competitor alternative pages, post-signup migration prompts, and any landing section where a short ordered process makes the offer feel concrete and low-risk.
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 Card Inset Count Badge Block
Card-inset dark CTA with a count badge above the headline
React CTA Split Before After List Block
Split panel CTA with a before and after comparison list
React CTA Centered Dark Stat Hero Block
Centered dark CTA anchored by a hero stat figure
FAQ
Was this page helpful?
Sign in to leave feedback.
Card Inset Star Rating Big
A card-inset light CTA for React and Next.js with an oversized 5-star amber rating cluster, a large tabular rating score, a row of plain-text platform badges, headline, and primary ShadcnioButton built with shadcn/ui and Tailwind CSS
Centered Avatar Social Proof
A centered light CTA for React and Next.js with an avatar stack social proof cluster, member count pill, headline, and ShadcnioButton, built with shadcn/ui and Tailwind CSS