Calendar 14 - Calendly-style booking flowPro
Three-pane booking card with event details, a month grid, time slots and a confirm step that slides between pick, details and scheduled states.
About Calendar 14
Three-pane booking card with event details, a month grid, time slots and a confirm step that slides between pick, details and scheduled states.
Calendar 14 is a pro calendar block for React, built on shadcn/ui and Tailwind CSS with motion animations that respect reduced-motion settings. It ships as 178 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- booking
- scheduling
- time-slots
- calendly
- form
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/calendar-14Dependencies installed automatically: lucide-react, motion.
Uses: avatar, button, input, label, reveal, textarea, use-reduced-motion, utils.
Usage
import Calendar14 from "@/components/blocks/calendar-14"
export default function Page() {
return <Calendar14 />
}