Theming

theme, accent and radius restyle the widget without forking it. Each becomes a URL parameter the widget reads, so changes are instant — no rebuild, no CSS from you.

AccentCopy Anchor Link

accent takes a named accent (graphite, neptune, sage, sand) or a raw hex. It drives buttons, the selected day, and highlights.

import { BookingCalendar } from "@slotr/react/booking-calendar";

function App() {
  return <BookingCalendar id={DEMO_ID} accent="#FE4A01" width="auto" />;
}

RadiusCopy Anchor Link

radius takes a named size (sharp, soft, round) or a pixel number — match it to your product's corners.

import { BookingCalendar } from "@slotr/react/booking-calendar";

function App() {
  return <BookingCalendar id={DEMO_ID} radius="round" width="auto" />;
}

Custom backgroundCopy Anchor Link

theme takes dark, light, or any hex background. Pass a hex and the kit derives a full palette from it — surfaces, text and borders all tuned to that color — so the widget blends into your brand instead of sitting on a flat card.

import { BookingCalendar } from "@slotr/react/booking-calendar";

function App() {
  return (
    <BookingCalendar
      id={DEMO_ID}
      theme="#17151f"
      accent="#8E99FF"
      width="auto"
    />
  );
}

The palette is derived by luminance: a dark hex yields a dark theme, a light hex a light one. Keep the background on-brand and the rest follows.

LocaleCopy Anchor Link

lang forces the UI locale (BCP-47-ish); English is the fallback. The widget translates its own copy, so you ship no strings.

<BookingCalendar id={id} lang="pt-BR" />