@openings-link/react-ui

Themed, drop-in React booking widget for the Openings platform.

Built on @openings-link/react (headless core). Styled with CSS custom properties — no Tailwind, no CSS modules.

Install

npm install @openings-link/react @openings-link/react-ui

Quick Start

import { BookingWidget } from "@openings-link/react-ui";

function App() {
  return (
    <BookingWidget
      business="your-business-handle"
      theme={{ accent: "#8B5CF6" }}
      on={{
        onBookingComplete: (result) => {
          console.log("Booked!", result);
        },
      }}
    />
  );
}

CORS and apiBase

BookingWidget defaults to apiBase="https://api.openings.link".

If your frontend runs on a third-party domain, prefer a same-origin proxy route in your app and point the widget to that proxy:

<BookingWidget business="your-business-handle" apiBase="/api/openings" />

This is the recommended setup for npm users to avoid browser CORS issues.

Full proxy templates: https://github.com/openings-link/openings-react/blob/main/docs/proxy-templates.md

Props

| Prop | Type | Description | | ----------------------- | ---------------------------- | ------------------------------------------------------ | | business* | string | Business handle (slug). Required. | | apiBase | string | API base URL. Defaults to https://api.openings.link. | | scheduleId | string | Pre-select a schedule (skip location picker). | | memberId | string | Pre-select a staff member (show their availability). | | theme | BookingTheme | Accent color, border radius, font, light/dark mode. | | labels | Partial<BookingLabels> | Override any user-facing string for i18n. | | apiClient | ApiClient | Custom API client for testing or mock data. | | on | OpeningsCallbacks | Event callbacks for booking lifecycle. | | onConsultationRequest | (member, services) => void | Custom handler for consultation services. | | className | string | CSS class for the root container. |

Theme

{
  accent?: string;      // Primary color (default: "#000000")
  radius?: number;      // Border radius in px (default: 8)
  fontFamily?: string;  // Font family (default: system)
  mode?: "light" | "dark" | "auto";
}

All CSS custom properties are prefixed --openings-*.

Live Demo

react.openings.link

License

MIT