Shadcn.io is not affiliated with official shadcn/ui
CTA 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
Capture qualified leads with this split panel dark CTA featuring a calendar grid visual on the right side for React and Next.js. Features a left-aligned headline cluster with compact subtext and a single inverted primary ShadcnioButton on bg-foreground, plus a right-side 5-column by 4-row calendar grid rendering available slots with one highlighted day cell. Built with TypeScript, ShadcnioButton from shadcn/ui, motion/react entrance animations, Lucide React icons, and Tailwind CSS. Perfect for booking-driven landing pages, enterprise sales sections, consultancy sites, and any product where a scheduling metaphor reinforces the conversion goal.
Related Components
Split Panel CTA with Device Mockup
Split panel dark CTA with a device mockup visual
Split Panel CTA with Product Mockup
Split panel dark CTA with a product card mockup
Split Panel CTA with Dual Preview
Split panel dark CTA with dual A and B variant preview cards
Split Panel CTA with Icon Grid
Split panel dark CTA with a 2x2 icon feature grid visual
Split Panel CTA with Avatar Team
Split panel dark CTA with an avatar team stack visual
Video Demo CTA
Dark CTA with a video demo playback visual
FAQ
Was this page helpful?
Sign in to leave feedback.
Split Panel Browser URL Bar Tabs
A split panel CTA for React and Next.js with a detailed browser window mockup, traffic light dots, monospace URL bar, tabbed chrome, and dual ShadcnioButton row built with shadcn/ui and Tailwind CSS
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