# Hotel & restaurant app UI for React

Guests and tables: reservations, rooms, folios and service. 10 live React screens in [Beamline](https://beamline.io/), in working order, each in nine looks.

## Screens

1. [Reservation desk](https://beamline.io/components/reservation-desk.md): A front desk's bookings without a room for a night, beside the rooms that could take them: bookings grouped by room type with their stay, party and…
2. [Table service](https://beamline.io/components/table-service.md): A restaurant table's service in three places sharing one order. The floor: tables placed on a plan by drag, arrow keys or typed numbers (Shift and an…
3. [Counter service](https://beamline.io/components/counter-service.md): A counter and its kitchen. The counter: the order on the left (its name, eat here / takeaway / drive-through, each line with its options and quantity…
4. [Room readiness](https://beamline.io/components/room-readiness.md): Housekeeping's rooms for the day: condition, occupancy, the front desk's plan (arriving with its time or not known, departing, staying on), who is…
5. [Stay folio](https://beamline.io/components/stay-folio.md): A stay's folio: the chosen folio's lines filtered by kind, posted and pending said, voided lines on request, every row in the ledger's currency; beside…
6. [Guest messages](https://beamline.io/components/guest-messages.md): Conversations with guests beside the booking each is about, for a host stand, salon front desk or hotel. Guests waiting for an answer come first with how…
7. [Shift briefing](https://beamline.io/components/shift-briefing.md): A team's pre-shift briefing for a restaurant service (or any shift with bookings): the venue, the service and when its reservation snapshot was read, an…
8. [Map explorer](https://beamline.io/components/map-explorer.md): A map with one operational layer over real ground (an optional map base: relief, lakes, streams, woods, roads), explored without losing your place; its…
9. [Page header](https://beamline.io/components/page-header.md): The top of a record or project page: breadcrumb, title with status, description and meta, a primary action with secondary actions that fold into a More…
10. [Turntable review](https://beamline.io/components/turntable-review.md): A 3D asset reviewed on a turntable. The object large at the angle in view with front, side and back said, standing on a plate whose rim shows the twelve…

## The parts they're built from

- [Button](https://beamline.io/components/button.md) (free): in 10 of these screens
- [Spinner](https://beamline.io/components/spinner.md) (free): in 10 of these screens
- [Tooltip](https://beamline.io/components/tooltip.md) (free): in 10 of these screens
- [Label](https://beamline.io/components/label.md) (free): in 9 of these screens
- [Select](https://beamline.io/components/select.md) (free): in 8 of these screens
- [Avatar](https://beamline.io/components/avatar.md) (free): in 7 of these screens
- [Segmented control](https://beamline.io/components/segmented-control.md) (free): in 7 of these screens
- [Text morph](https://beamline.io/components/text-morph.md) (free): in 7 of these screens
- [Empty state](https://beamline.io/components/empty-state.md) (free): in 5 of these screens
- [Glow](https://beamline.io/components/glow.md) (free): in 5 of these screens
- [Kbd](https://beamline.io/components/kbd.md) (free): in 5 of these screens
- [Search field](https://beamline.io/components/search-field.md) (free): in 5 of these screens
- [Skeleton](https://beamline.io/components/skeleton.md) (free): in 5 of these screens
- [Checkbox](https://beamline.io/components/checkbox.md) (free): in 4 of these screens
- [Dropdown menu](https://beamline.io/components/dropdown-menu.md) (free): in 4 of these screens
- [Input](https://beamline.io/components/input.md) (free): in 4 of these screens
- [Number field](https://beamline.io/components/number-field.md) (free): in 4 of these screens
- [Bottom sheet](https://beamline.io/components/bottom-sheet.md) (free): in 3 of these screens
- [Chip group](https://beamline.io/components/chip-group.md) (free): in 3 of these screens
- [Copy button](https://beamline.io/components/copy-button.md) (free): in 3 of these screens
- [Description list](https://beamline.io/components/description-list.md) (free): in 3 of these screens
- [Slot text](https://beamline.io/components/slot-text.md) (free): in 3 of these screens
- [Switch](https://beamline.io/components/switch.md) (free): in 3 of these screens
- [Badge](https://beamline.io/components/badge.md) (free): in 2 of these screens
- [Calendar](https://beamline.io/components/calendar.md) (free): in 2 of these screens
- [Dialog](https://beamline.io/components/dialog.md) (free): in 2 of these screens
- [Popover](https://beamline.io/components/popover.md) (free): in 2 of these screens
- [Textarea](https://beamline.io/components/textarea.md) (free): in 2 of these screens
- [Alert](https://beamline.io/components/alert.md) (free): in 1 of these screens
- [Attachment](https://beamline.io/components/attachment.md): in 1 of these screens

Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

Next: [HR & payroll](https://beamline.io/components/apps/hr-payroll.md) · [All apps](https://beamline.io/components/apps.md)

Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).
