@vennio/react

Drop-in React components for booking and scheduling. Add a full appointment booking flow to your React app with one component — no backend required.

Works with Next.js, Remix, Vite, and vibe coding tools like Lovable and v0.

Keywords: scheduling component · booking calendar · appointment picker · calendar UI · react scheduling · react booking

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
2. Connect your calendar
3. Create a booking link
4. Copy the shortcode from your link

Proposals (demand-side)

<VennioProposal> embeds the magic-link recipient view (vennio.app/p/:token) so the embedding app never has to call the proposal-response API directly. This avoids the 403 organizer_cannot_respond footgun you hit if you call the response endpoint with the organizer's API key.

import { VennioProposal } from '@vennio/react'

<VennioProposal
  token={magicLinkToken}
  onAccepted={({ proposalId, slot }) => console.log('accepted', slot)}
  onCountered={({ proposalId, counterSlots }) => console.log('countered', counterSlots)}
  onRejected={({ proposalId }) => console.log('rejected')}
  onEvent={(event) => console.log(event.type, event)}
/>

onEvent also fires for non-success terminal states (expired, used, not_found, calendar_disconnected, error). See @vennio/proposals-widget for the underlying widget and security/threat-model notes.

TypeScript

Full types included:

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

Documentation

Full API reference: docs.vennio.app

License

MIT