Components

Overview

RoomKit ships 10 pre-built React components. All components use inline styles by default and accept a className prop for custom styling.

import {
    AvailabilitySearch,
    BookingForm,
    BookingStatusBadge,
    BookingTimeline,
    BulkImportProgress,
    ConflictBanner,
    ExamScheduleView,
    LocationBrowser,
    RecurrenceEditor,
    RoomCard,
} from '@roomkit/react';

AvailabilitySearch

A search form with fields for time range, minimum capacity, capacity type, required equipment, accessibility requirements, and location scope. Emits filter changes with debouncing.

<AvailabilitySearch
    equipmentOptions={['projector', 'whiteboard', 'microphone']}
    accessibilityOptions={['wheelchair', 'hearing_loop']}
    locationOptions={[
        { id: 'campus-a', displayName: 'Campus A' },
        { id: 'campus-b', displayName: 'Campus B' },
    ]}
    debounceMs={300}
    onChange={(filters) => console.log(filters)}
/>

Props

Prop	Type	Required	Description
`className`	`string`	No	CSS class name
`equipmentOptions`	`string[]`	No	Equipment tags shown as checkboxes
`accessibilityOptions`	`string[]`	No	Accessibility attributes shown as checkboxes
`locationOptions`	`{ id: string; displayName: string }[]`	No	Location options for the scope dropdown
`debounceMs`	`number`	No	Debounce delay (default: `300`)
`onChange`	`(filters: AvailabilityFilter) => void`	No	Called when any filter changes

BookingForm

A form for creating or editing bookings with fields for title, description, time range, purpose type, and delegation.

<BookingForm
    roomId="room-123"
    onSubmit={(data) => createBooking.mutate(data)}
    isSubmitting={createBooking.isLoading}
/>

Props

Prop	Type	Required	Description
`className`	`string`	No	CSS class name
`roomId`	`string`	Yes	Target room ID
`initialData`	`Partial<CreateBookingInput>`	No	Pre-fill form fields
`onSubmit`	`(data: CreateBookingInput) => void`	Yes	Called on form submission
`isSubmitting`	`boolean`	No	Disables the submit button

BookingStatusBadge

Displays a booking status with color-coded styling.

<BookingStatusBadge status="confirmed" />

Props

Prop	Type	Required	Description
`status`	`BookingStatus`	Yes	The booking status to display
`className`	`string`	No	CSS class name

BookingTimeline

A visual timeline displaying bookings for a room or person within a time range.

<BookingTimeline
    bookings={bookings}
    startsAt={new Date('2026-03-02T08:00:00Z')}
    endsAt={new Date('2026-03-02T20:00:00Z')}
    onBookingClick={(booking) => console.log(booking.id)}
/>

Props

Prop	Type	Required	Description
`bookings`	`Booking[]`	Yes	Bookings to display
`startsAt`	`Date`	Yes	Timeline start
`endsAt`	`Date`	Yes	Timeline end
`onBookingClick`	`(booking: Booking) => void`	No	Click handler
`className`	`string`	No	CSS class name

BulkImportProgress

A progress bar for displaying bulk operation status.

<BulkImportProgress operation={bulkOperation} />

Props

Prop	Type	Required	Description
`operation`	`BulkOperation`	Yes	The bulk operation data
`className`	`string`	No	CSS class name

ConflictBanner

A notification banner shown when a booking conflict is detected. Displays conflict details and alternative suggestions.

<ConflictBanner
    conflict={conflictResult}
    alternatives={alternatives}
    onSelectAlternative={(alt) => console.log('Selected:', alt)}
/>

Props

Prop	Type	Required	Description
`conflict`	`ConflictCheckResult`	Yes	Conflict detection result
`alternatives`	`AlternativeSuggestion[]`	No	Alternative slots
`onSelectAlternative`	`(alt: AlternativeSuggestion) => void`	No	Selection handler
`className`	`string`	No	CSS class name

ExamScheduleView

Displays exam sessions for a cohort or room.

<ExamScheduleView
    sessions={examSessions}
    onSessionClick={(session) => console.log(session.id)}
/>

Props

Prop	Type	Required	Description
`sessions`	`ExamSession[]`	Yes	Exam sessions to display
`onSessionClick`	`(session: ExamSession) => void`	No	Click handler
`className`	`string`	No	CSS class name

LocationBrowser

A hierarchical tree browser for navigating the location hierarchy.

<LocationBrowser
    tree={locationTree}
    onSelect={(node) => console.log('Selected:', node.id)}
/>

Props

Prop	Type	Required	Description
`tree`	`LocationTreeNode[]`	Yes	The location tree data
`onSelect`	`(node: LocationTreeNode) => void`	No	Selection handler
`className`	`string`	No	CSS class name

RecurrenceEditor

A form for creating and editing recurrence rules with frequency, day-of-week, and calendar week inputs.

<RecurrenceEditor
    value={recurrenceRule}
    onChange={(rule) => setRecurrenceRule(rule)}
/>

Props

Prop	Type	Required	Description
`value`	`Partial<RecurrenceRule>`	No	Current rule values
`onChange`	`(rule: Partial<RecurrenceRule>) => void`	Yes	Change handler
`className`	`string`	No	CSS class name

RoomCard

A summary card showing room details, capacity, and equipment.

<RoomCard
    room={room}
    score={0.85}
    onClick={() => router.push(`/rooms/${room.id}`)}
/>

Props

Prop	Type	Required	Description
`room`	`Room & { equipment?: RoomEquipment[]; accessibility?: RoomAccessibility[] }`	Yes	Room data
`score`	`number`	No	Availability score (0-1)
`onClick`	`() => void`	No	Click handler
`className`	`string`	No	CSS class name

Components

On this page