Shadcn.io is not affiliated with official shadcn/ui
CTA Centered Light Icon Medallion
A centered light CTA with icon medallion for React and Next.js with circular icon tile, short headline, subtitle, and dual ShadcnioButton row, built with shadcn/ui and Tailwind CSS
Convert visitors with this centered light CTA with icon medallion for React and Next.js. Features a rounded border bg-card surface, a large circular icon medallion above the headline, a two-sentence subtitle, a primary ShadcnioButton paired with a ghost secondary dismiss action, and a subtle trust line below. Built with TypeScript, ShadcnioButton from shadcn/ui, Lucide React icons, motion/react entrance animations, and Tailwind CSS. Perfect for post-signup prompts, security nudges, feature adoption reminders, and any mid-page conversion where a subtle light surface beats a dark band.
Related Components
React Centered Light CTA with Trust Row Block
Centered light CTA with trust row underneath the buttons
React Centered Light Feature Checks CTA Block
Centered light CTA with four-item feature checks row
React Centered Light Email Capture CTA Block
Centered light CTA with inline email capture form
React Centered Dark Icon Accent CTA Block
Centered dark CTA with inset icon accent above the headline
React Centered Light Numbered Steps CTA Block
Centered light CTA with numbered steps row
React Centered Light Tier Selector CTA Block
Centered light CTA with tier selector pills
FAQ
Was this page helpful?
Sign in to leave feedback.
Centered Light Handwritten Arrow Scribble
A centered light CTA for React and Next.js with a hand-drawn SVG curved arrow scribble pointing from the subtext down to the primary ShadcnioButton, italic handwritten note, and friendly onboarding copy built with shadcn/ui and Tailwind CSS
Centered Light Link Secondary
A centered light CTA section for React and Next.js with eyebrow label, bold h2 headline, primary ShadcnioButton, and a secondary text link below built with shadcn/ui and Tailwind CSS