Add Cal.com's React components to your application
Drop scheduling into your app with React components you style like your own, running on the infrastructure behind Cal.com.
npm install @calcom/atoms1// Style Atoms with Javascript23const appearance = {4 theme: Custom,5 variables: {6 fontFamily: 'Comic sans',7 colorPrimary: '#101010',8 colorBackground: '#ffffff',9 colorText: '#374151',10 borderRadius: '6px',11 spacingUnit: '8px',12 }13};14const atoms = cal.atoms({ clientSecret, appearance });15
Cédric van Ravesteijn
Why Cal.com is better than Calendly
Ready to see why Cal.com outshines Calendly? Spoiler alert: it's not even close!
15m30m45m1h
Cal Video
Europe/Amsterdam
May 2025
Trusted by fast-growing companies around the world
Customizable components for any scheduling workflow
Atoms are React components for each part of scheduling: connect calendars, set availability, create event types and take bookings.
1import { Connect } from "@calcom/atoms";23export default function Connect() {4 return (5 <>6 <Connect.GoogleCalendar isMultiCalendar={true} />7 <Connect.OutlookCalendar isMultiCalendar={true} />8 <Connect.AppleCalendar isMultiCalendar={true} />9 </>10 )11}
Get started with Cal Atoms
Start integrating a fully compliant scheduling workflow with only a few lines of code.
Integrate
1import { CalProvider, Booker } from "@calcom/atoms";23export default function App() {4 return (5 <CalProvider accessToken="30AadwEContactSalesToGetAKey42069">6 <Booker username="jane-doe" eventSlug="weekly-sync" />7 </CalProvider>8 );9}
Customize
Primary color
Text color
Background
Text color
Collect
This event is scheduled
We emailed you and the other attendees a calendar invitation with all the details.
9:00 am – 10:00 am (Europe/Dublin)
Secure, compliant and fully customizable
Cal atoms were designed to simplify the process of building compliant scheduling workflows. They're flexible, secure and fully compliant under HIPAA, etc.
Fully compliant and secure
Infinitely customizable
Easy integration
Multiple components
Reliable and scalable
Translation support
Fundamentally configurable
Developer friendly
The power of customizability without the pain of building it yourself
Cal Atoms can fit an almost unlimited number of use cases. Below are just some of the most common.
Education marketplace
Hire a freelancer for XYZ
Anna KendrickCo-FounderDepartment
Qualifications
Location
Chris WashingtonEngineering LeadDepartment
Skills
Location
Alex FisherProduct LeadDepartment
Skills
Location
Dominique SchutteHuman ResourceDepartment
Skills
Location
Joe BergerCTO
Anna FritzHead of Operations
Ralph BakerCEOJane DoeHuman Resource ManagerPlug & play components
We'll focus on timezone problems, so you can focus on building the parts of your business that deliver value to your customers.