@calcom/atoms

Pre-built React components that embed Cal.com scheduling — <Booker />, <AvailabilitySettings />, <EventTypes />, <CalendarSettings />, and 30+ more — into your product.

Install

npm install @calcom/atoms

Peer deps: React 18 or 19, React-DOM 18 or 19, Next 13/14/15/16 if you use the embed/Booker on the server.

Usage

import { CalProvider, Booker } from "@calcom/atoms";
import "@calcom/atoms/globals.min.css"; // tailwind v4 / no-tailwind
// import "@calcom/atoms/globals.tw3.min.css"; // tailwind v3

export default function MyApp() {
  return (
    <CalProvider
      clientId={process.env.NEXT_PUBLIC_X_CAL_ID!}
      accessToken={userAccessToken}
      options={{ apiUrl: "https://api.cal.com/v2", refreshUrl: "/api/refresh" }}
    >
      <Booker
        eventSlug="30min"
        username="alice"
        onCreateBookingSuccess={(b) => console.log("booked", b)}
      />
    </CalProvider>
  );
}

Imports

Everything you need is exported from the package root:

import { Booker, useBooking, useSlotsForDate, useAtomsContext } from "@calcom/atoms";

Subpath imports (@calcom/atoms/booker/hooks/useSlotsForDate) still work for back-compat but the root import is preferred — it walks through a single bundled module so React, hooks, and context providers stay on a single instance even when consumers run other React libraries side by side.

Documentation

• Quickstart: https://cal.com/docs/platform/quickstart
• Component reference: https://cal.com/docs/platform/atoms/cal-provider
• API reference: https://cal.com/docs/api-reference/v2

Versioning

Follows semver. Anything except a major bump is a safe upgrade. Breaking changes are flagged ❗️Breaking change in the CHANGELOG.

Suffixed versions like 2.x.x-framer exist for isolated use cases — unless that's specifically you, install the unsuffixed version.

Source & contributing

Source repo: https://github.com/calcom/atoms. See CONTRIBUTING.md for the dev setup and release process.

License

AGPL-3.0-or-later. See LICENSE. For a permissive commercial license, contact [email protected].