Make your AI a shadcn expert
Previous: Split Avatar Grid
Next: Split Chat Skeleton

Hero Split Calendar Booking

A split-layout hero with a calendar booking widget mockup showing month label, weekday strip, and time slot pills for React and Next.js featuring an announcement pill, feature checklist, and dual ShadcnioButton CTAs built with shadcn/ui and Tailwind CSS

Scroll to load preview

Build a split-layout hero with a Cal.com-style calendar booking widget mockup using this React and Next.js block. Features an announcement pill, bold two-line headline, three-item emerald checklist with CheckIcon, dual ShadcnioButton CTAs with a sliding arrow effect, and a booking panel with month navigation chevrons, a weekday strip with a selected date highlight, and a column of available time slot pills. Built with TypeScript, ShadcnioButton, motion/react entrance animations, Lucide React icons, and Tailwind CSS. Perfect for scheduling tools, calendar SaaS, booking platforms, sales demo links, and meeting automation products.

React Split Layout Chat Skeleton Hero Block

React split hero with a minimal AI chat skeleton mockup

React Split Layout Notification Stack Hero Block

React split hero with a vertical stack of notification cards

React Split Layout Hover Cards Hero Block

React split hero with a stack of hover-enabled cards

React Split Layout Tab Switch Browser Hero Block

React split hero with a tab switching browser mockup

React Split Layout Quote Panel Hero Block

React split hero with a customer quote panel on the right

React Split Layout Map Canvas Hero Block

React split hero with a map canvas mockup on the right

FAQ

Last updated on April 8, 2026

Was this page helpful?

Sign in to leave feedback.

Split Avatar Grid

A split-layout hero with a 2x2 circular avatar grid for React and Next.js featuring a headline, subtitle, team metadata, and dual ShadcnioButton CTAs built with shadcn/ui and Tailwind CSS

Split Chat Skeleton

A split-layout hero with a minimal AI chat skeleton mockup for React and Next.js featuring an announcement pill, emerald feature checklist, and dual ShadcnioButton CTAs built with shadcn/ui and Tailwind CSS