Shadcn.io is not affiliated with official shadcn/ui
CTA Split Panel Device Mockup
A split panel dark CTA for React and Next.js with left copy stack, dual action buttons, and right-side device frame mockup, built with shadcn/ui and Tailwind CSS
Convert visitors with this split panel CTA with device mockup for React and Next.js. Features a two-column dark card with a bold headline and dual action buttons on the left, a decorative phone frame mockup on the right, and a compact trust row of metadata below the actions. Built with TypeScript, ShadcnioButton from shadcn/ui, motion/react entrance animations, Lucide React icons, and Tailwind CSS. Perfect for mobile app launches, cross-platform download pages, and product landing sections where a device visual reinforces the message.
Related Components
React Split Panel Dark CTA with Dual Preview Cards Block
Split panel dark CTA with dual skeleton preview cards
React Split Panel CTA with Product Mockup Block
Split panel CTA with a product screenshot on the right
React CTA Mobile Install Block
Centered mobile install prompt CTA
React Centered Dark CTA with Stat Hero Block
Centered dark CTA anchored by a hero stat figure
React Centered Dark CTA with Pill and Dual Action Block
Dark centered CTA with announcement pill and dual action row
React CTA Compact Icon Action Banner Block
Compact icon banner CTA for secondary nudges
FAQ
Was this page helpful?
Sign in to leave feedback.
Split Panel Crosshair Visual
A split panel dark CTA for React and Next.js with left-aligned kicker, headline, and ShadcnioButton pair beside a minimal SVG crosshair visual, built with shadcn/ui and Tailwind CSS
Split Panel Dual Preview
A split panel dark CTA for React and Next.js with dual skeleton preview cards, inverted primary ShadcnioButton, ghost secondary action, and trust row built with shadcn/ui and Tailwind CSS