Here’s a clean, minimal, and modern rewrite of your README.md that keeps it sharp while highlighting the essentials:

🚗 React Appointment UI

A lightweight, flexible React scheduling package for resources like vehicles, rooms, or staff.

✨ Components

• CalendarGridX → Resources on the left, dates on top
• CalendarGridY → Resources on the X-axis, time on the Y-axis
• AppointmentForm → Customizable form with 12+ variations

📦 Install

npm install react-appointment-ui
# or
yarn add react-appointment-ui
# or
pnpm add react-appointment-ui

⚡ Usage

1. CalendarGridX (date-based)

import { CalendarGridX } from "react-appointment-ui";
import { Car, Truck } from "lucide-react";

const sections = [
  { id: "s1", name: "Car", icon: Car },
  { id: "s2", name: "Truck", icon: Truck },
];

const appointments = [
  {
    id: "a1",
    sectionId: "s1",
    customer: "Jane Smith",
    status: "Confirmed",
    start: "2025-09-01T08:00:00",
    end: "2025-09-01T10:00:00",
  },
];

export default () => (
  <div style={{ height: "100vh" }}>
    <CalendarGridX sections={sections} appointments={appointments} />
  </div>
);

2. CalendarGridY (time-based)

import { CalendarGridY } from "react-appointment-ui";

const sections = [
  { id: "s1", name: "Dr. Smith" },
  { id: "s2", name: "Dr. Johnson" },
];

const appointments = [
  {
    id: "a1",
    sectionId: "s1",
    customer: "Jane Smith",
    status: "Confirmed",
    start: "08:00",
    end: "09:00",
  },
];

export default () => (
  <div style={{ height: "100vh" }}>
    <CalendarGridY sections={sections} appointments={appointments} />
  </div>
);

✅ Same props for X and Y, only difference:

• X → start, end = full date/time
• Y → start, end = time only

3. AppointmentForm

import { AppointmentForm } from "react-appointment-ui";

const providers = [
  { id: "p1", name: "Dr. Smith" },
  { id: "p2", name: "Dr. Johnson" },
];

export default () => (
  <AppointmentForm
    providers={providers}
    onSubmit={(data) => console.log("New Appointment:", data)}
  />
);

🔹 Features:

• 12+ built-in designs
• Custom labels, statuses, and styles
• Works with/without date & time fields

📖 Types (define in your app)

export interface Appointment {
  id: string;
  sectionId: string;
  customer: string;
  status: string;
  start: string; // "YYYY-MM-DDTHH:mm:ss" for X, "HH:mm" for Y
  end: string;
}

export interface Section {
  id: string;
  name: string;
  role?: string;
  icon?: string | React.ComponentType<{ size?: number; style?: React.CSSProperties }>;
}

🎨 Features

• CalendarGridX → resource + date layout
• CalendarGridY → resource + time layout
• AppointmentForm → 12+ variations (labels, statuses, layouts, light/dark themes)
• Fully TypeScript-ready
• Responsive & customizable

🚀 TL;DR

npm install react-appointment-ui

import { CalendarGridX, CalendarGridY, AppointmentForm } from "react-appointment-ui";

• Use X for date-based scheduling
• Use Y for time-slot scheduling
• Use AppointmentForm to create appointments

📑 UI Reference (PDF)

Want me to also add badges (npm version, bundle size, license) at the top to make it look more professional?

AppointmentForm (12 designs)

import React from "react";
import { AppointmentForm } from "react-appointment-calendar";

interface Appointment {
  id: string;
  providerId: string;
  customer: string;
  status: string;
  start: string;
  end: string;
}

interface Provider {
  id: string;
  name: string;
}

const Providers: Provider[] = [
  { id: "p1", name: "Dr. Smith" },
  { id: "p2", name: "Dr. Johnson" },
];

const customStatuses = ["Pending", "Confirmed", "Cancelled", "Completed"];
const customerList = ["Alice", "Bob", "Charlie", "David"];

function handleAddAppointment(appointment: Omit<Appointment, "id">) {
  console.log("New Appointment:", appointment);
}

export default function AppointmentFormExamples() {
  return (
    <section className="space-y-10">
      <h1 className="text-2xl font-bold mb-4">Appointment Forms – 12 Designs</h1>

      <AppointmentForm providers={Providers} onSubmit={handleAddAppointment} />
      <AppointmentForm
        providers={Providers}
        onSubmit={handleAddAppointment}
        labels={{
          provider: "Doctor",
          customer: "Patient",
          status: "Appointment Status",
          start: "Start Time",
          end: "End Time",
          submit: "Add Appointment",
        }}
      />
      <AppointmentForm
        providers={Providers}
        onSubmit={handleAddAppointment}
        styles={{ form: { flexDirection: "row", gap: "1rem", flexWrap: "wrap" } }}
      />
      <AppointmentForm
        providers={Providers}
        onSubmit={handleAddAppointment}
        styles={{ button: { backgroundColor: "#10b981" } }}
      />
      <AppointmentForm
        providers={Providers}
        onSubmit={handleAddAppointment}
        statuses={customStatuses}
      />
      <AppointmentForm
        providers={Providers}
        onSubmit={handleAddAppointment}
        styles={{ form: { maxWidth: "100%", minWidth: "250px" } }}
      />
      <AppointmentForm
        providers={Providers}
        onSubmit={handleAddAppointment}
        showDate={false}
      />
      <AppointmentForm
        providers={Providers}
        onSubmit={handleAddAppointment}
        showTime={false}
      />
      <AppointmentForm
        providers={Providers}
        onSubmit={handleAddAppointment}
        customers={customerList}
      />
      <AppointmentForm providers={Providers} onSubmit={handleAddAppointment} />
      <AppointmentForm
        providers={Providers}
        onSubmit={handleAddAppointment}
        styles={{
          form: {
            backgroundColor: "#fef9c3",
            padding: "2rem",
            borderRadius: "12px",
            boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
          },
          label: { color: "#7c3aed", fontWeight: 700 },
          input: { borderColor: "#7c3aed" },
          select: { borderColor: "#7c3aed" },
          button: { backgroundColor: "#7c3aed", color: "#fff" },
        }}
        labels={{ provider: "Doctor", customer: "Patient", submit: "Book Appointment" }}
      />
      <AppointmentForm
        providers={Providers}
        onSubmit={handleAddAppointment}
        styles={{
          form: {
            backgroundColor: "#1f2937",
            padding: "2rem",
            borderRadius: "10px",
            color: "#f9fafb",
          },
          label: { color: "#f9fafb", fontWeight: 600 },
          input: { backgroundColor: "#374151", color: "#f9fafb", borderColor: "#6b7280" },
          select: { backgroundColor: "#374151", color: "#f9fafb", borderColor: "#6b7280" },
          button: { backgroundColor: "#ef4444", color: "#fff" },
        }}
        labels={{ provider: "Doctor", customer: "Patient", status: "Status", submit: "Schedule" }}
      />

      {/* PDF Documentation */}
      <div className="mt-10">
        <p>
          <a href="https://drive.google.com/file/d/1xfmkSpW1LfMZ8UCGw_4zfw7ZY6bvXCeB/view?usp=sharing" target="_blank" rel="noopener noreferrer">View the PDF</a>
        </p>
        <embed src="https://drive.google.com/file/d/1xfmkSpW1LfMZ8UCGw_4zfw7ZY6bvXCeB/view?usp=sharing" type="application/pdf" width="600" height="800" />
      </div>
    </section>
  );
}

📖 Types (define in your app)

export interface Appointment {
  id: string;
  providerId: string;
  customer: string;
  status: string;
  start: string; // ISO date string
  end: string;   // ISO date string
}

export interface Provider {
  id: string;
  name: string;
  role?: string;
  icon: string | React.ComponentType<{ size?: number; style?: React.CSSProperties }>;
}

📅 Features

• CalendarGridX → Resources on left, dates on top
• CalendarGridY → Time slots on Y-axis, resources on X-axis
• AppointmentForm → Create appointments
• 12 ready-to-use form variations (labels, statuses, layouts, themes)
• Fully TypeScript-ready
• Customizable labels, styles, statuses
• Supports horizontal or vertical layouts

⚡ TL;DR

• Install: npm install react-appointment-calendar

• Import:

  import { CalendarGridX, CalendarGridY, AppointmentForm } from "react-appointment-calendar";

• Define your own Appointment and Provider types.

• Use CalendarGridX for date-based scheduling.

• Use CalendarGridY for time-slot scheduling.

• Use AppointmentForm to create appointments → supports 12+ design variations (labels, statuses, responsive, light/dark).

• View UI reference: ui designs