Booking Plugin React Tailwind

A reusable React 19 booking plugin built with Tailwind CSS. It supports a complete booking flow with staff selection, service selection, date/time scheduling, confirmation, and an optional video gallery controlled via settings.

Installation

npm install booking-plugin-react-tailwind

Usage

import React from 'react';
import { BookingPlugin } from 'booking-plugin-react-tailwind';

const apiClient = {
  getStaff: async () => fetch('/api/staff').then((res) => res.json()),
  getServices: async () => fetch('/api/services').then((res) => res.json()),
  getAvailableSlots: async ({ staffId, serviceId, date }) =>
    fetch(`/api/slots?staffId=${staffId}&serviceId=${serviceId}&date=${date}`).then((res) => res.json()),
  createBooking: async (booking) =>
    fetch('/api/book', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(booking)
    }).then((res) => res.json())
};

const App = () => (
  <BookingPlugin
    apiClient={apiClient}
    settings={{
      brandColor: '#2563eb',
      showVideoGallery: true,
      videoGallery: {
        enabled: true,
        title: 'Welcome to the Studio',
        description: 'Explore our services and customer highlights.',
        videos: [
          {
            title: 'Studio tour',
            videoUrl: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
            description: 'Take a quick tour of our space.'
          }
        ]
      }
    }}
    onComplete={(booking, response) => {
      console.log('Booking complete:', booking, response);
    }}
  />
);

export default App;

API Integration

The plugin supports normal API integration using the apiClient prop. Provide functions for getStaff, getServices, getAvailableSlots, and createBooking.

Build & Publish

npm run build
npm publish --access public