Shadcn.io is not affiliated with official shadcn/ui
CTA Split Panel Counter Stats Grid
A split panel dark CTA for React and Next.js with a 2x2 counter stats grid on the right panel using gap-as-border cells, animated tabular-nums number count-up, inline icons, and a dual ShadcnioButton row, built with shadcn/ui and Tailwind CSS
Convert visitors with this split panel dark CTA for React and Next.js. Features a left panel with an eyebrow pill, bold headline, supporting subcopy, and a dual ShadcnioButton row, plus a right panel holding a 2x2 counter stats grid built with gap-px and bg-border for gap-as-border cells, each cell pairing a tabular-nums animated number with a Lucide icon and label. Built with TypeScript, ShadcnioButton from shadcn/ui, motion/react count-up animations and entrance stagger, Lucide React icons, and Tailwind CSS. Perfect for analytics platforms, observability products, DevOps tools, and any landing page where proof-by-numbers reinforces the message.
Related Components
Split Panel CTA with Dual Preview
Split panel CTA with dual skeleton preview cards
Split Panel CTA with Icon Grid
Split panel CTA with feature icon grid visual
Split Panel CTA with Avatar Team
Split panel CTA with team avatar visual
Split Panel CTA with Device Mockup
Split panel CTA with device mockup visual
Centered Dark CTA with Number and Stats
Centered dark CTA with hero stat and supporting stats
Centered Dark CTA with Stat Strip
Centered dark CTA with horizontal stat strip
FAQ
Was this page helpful?
Sign in to leave feedback.
Split Panel Calendar Grid
A split panel dark CTA section for React and Next.js with left-side headline and inverted primary ShadcnioButton plus a 5x4 calendar grid visual on the right built with shadcn/ui and Tailwind CSS
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