Getting started

You need a Shopvento installation, React 18.2 or 19, and an ESM bundler. The package works with Next.js, Vite and other React hosts. Native dialogs require a current evergreen browser.

bun add @shopvento/ui

Import the shared styles once. Add the separate shop stylesheet when using shop primitives:

import "@shopvento/ui/styles.css";
import "@shopvento/ui/shop.css";

Book an event

The example below is included verbatim from the typechecked examples/event-booking.tsx. Replace the installation origin and identifiers with your public configuration. baseUrl is an origin, without /api/shop.

"use client";
import { EventBooking } from "@shopvento/ui";

export function EventBookingExample() {
  return (
    <EventBooking
      baseUrl="https://your-installation.shopvento.app"
      eventId={123}
      locationId={1}
      turnstileSiteKey="YOUR_PUBLIC_TURNSTILE_SITE_KEY"
      termsUrl="/terms"
      privacyUrl="/privacy"
    />
  );
}

The backend must allow your storefront origin in its CORS configuration. Public booking reads omit credentials by default. For cookie-based authenticated booking, use a same-origin proxy or the explicit credentials option with the installation's CORS policy.

Guest booking needs both guest_booking_enabled and direct_booking_enabled, plus a public Turnstile site key valid for the storefront hostname. The backend validates the short-lived challenge token. Never put the private Turnstile secret in a React prop or browser environment variable. Configure the host CSP for the Turnstile script and frames.

Pick the integration surface

• Event booking: a compact form or host-routed calendar and booking steps.
• Vouchers: public checks and backend-authoritative redemption.
• Customer account: the host owns a same-origin API proxy and session cookies.
• Shop primitives: controlled presentation, with host-owned cart and checkout behavior.

Use Next.js App Router for the layout/client boundary, theming for CSS, and labels for copy overrides. The complete examples are in the GitHub repository.