@vennio/react

React components for adding Vennio booking to your app. Perfect for Lovable, v0, and other React-based vibe coding tools.

Installation

npm install @vennio/react

Quick Start

import { BookingCalendar } from '@vennio/react'

function App() {
  return (
    <BookingCalendar
      shortCode="your-booking-link-code"
      onBooked={(booking) => {
        console.log('Booked!', booking)
      }}
    />
  )
}

That's it! The BookingCalendar component handles the entire booking flow:

1. Shows available time slots
2. Collects customer info (name, email)
3. Creates the booking
4. Shows confirmation

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | shortCode | string | Required | Your Vennio booking link shortcode | | baseUrl | string | https://api.vennio.app | API base URL | | onBooked | (booking) => void | - | Callback when booking completes | | onError | (error) => void | - | Callback when an error occurs | | className | string | - | Custom class for the container | | primaryColor | string | #4F46E5 | Primary color for buttons |

Customization

Change the primary color

<BookingCalendar
  shortCode="abc123"
  primaryColor="#10B981"
/>

Add custom styling

<BookingCalendar
  shortCode="abc123"
  className="my-custom-booking"
/>

.my-custom-booking {
  /* Your styles */
}

Get Your Shortcode

1. Sign up at vennio.app/get-started
2. Connect your calendar
3. Create a booking link
4. Copy the shortcode from your link

TypeScript

Full TypeScript support with exported types:

import { BookingCalendar, Booking, Slot } from '@vennio/react'

License

MIT