@theatrical/react

A React component library with cinema-inspired design. Dark mode by default. Every component connects directly to @theatrical/sdk.

Install

npm install @theatrical/react @theatrical/sdk

Setup

Wrap your app in TheatricalThemeProvider:

import { TheatricalThemeProvider } from '@theatrical/react';

export default function App() {
  return (
    <TheatricalThemeProvider>
      {/* your app */}
    </TheatricalThemeProvider>
  );
}

Components

Component	Purpose
SeatMap	Interactive auditorium seat selection
SessionPicker	Date-based showtime browser
OrderSummary	Booking review with price breakdown
PaymentForm	Payment shell with Adyen integration slot
LoyaltyBadge	Compact tier + points display
MemberCard	Full loyalty member card with tier progression

SeatMap example

import { SeatMap } from '@theatrical/react';

<SeatMap
  rows={rows}
  selectedSeatIds={selectedSeatIds}
  onSeatSelect={(seatId) => toggleSeat(seatId)}
  maxSelectable={4}
/>

SessionPicker example

import { SessionPicker } from '@theatrical/react';

<SessionPicker
  sessions={sessions}
  groupBy="time"
  onSessionSelect={(sessionId) => setSessionId(sessionId)}
/>