Skip to contentVibraUI
4 pagesopens at /hotel

Hotel

A hotel's front desk: tonight's arrivals and departures, the bookings, the room rack and the guests.

Preview
/hotel

Install

The whole dashboard — every page under one sidebar, the sample data they read — is one command. Or take a page at a time: each one brings the sidebar with it.

npx shadcn@latest add @vibra/hotel
  • /hotelFront desk
    npx shadcn@latest add @vibra/hotel-overview
  • /hotel/bookingsBookings
    npx shadcn@latest add @vibra/hotel-bookings
  • /hotel/roomsRoom rack
    npx shadcn@latest add @vibra/hotel-rooms
  • /hotel/guestsGuest book
    npx shadcn@latest add @vibra/hotel-guests

Widgets

Single cards cut from these pages, each installed on its own.

  • The Front desk headline card
    npx shadcn@latest add @vibra/widget-hotel-overview-desk-stats
    From Front desk

    Front desk headline

    Tonight's occupancy, average daily rate and revenue per available room, and the arrivals still to check in, worked out of tonight's own stays; reads frontDeskStats().

  • The Availability card
    npx shadcn@latest add @vibra/widget-hotel-overview-availability-panel
    From Front desk

    Availability

    The month's nights, each filled by how many rooms are left, and the rooms free on the night picked; reads availability().

  • The Guest flow card
    npx shadcn@latest add @vibra/widget-hotel-overview-guest-flow
    From Front desk

    Guest flow

    Today's arrivals, the house and the departures in three tabs, each guest checked in or out through the server from their row; reads guestFlow().

  • The Booking channels card
    npx shadcn@latest add @vibra/widget-hotel-overview-booking-sources
    From Front desk

    Booking channels

    Arrivals by the channel they booked through, week by week over the eight weeks around tonight; reads sourceGrid().

  • The Arrivals sheet card
    npx shadcn@latest add @vibra/widget-hotel-overview-arrivals-table
    From Front desk

    Arrivals sheet

    Every guest due in tonight with the room they are going into, searchable by name and filtered by channel; reads guestFlow().

  • The Booking figures card
    npx shadcn@latest add @vibra/widget-hotel-bookings-booking-figures
    From Bookings

    Booking figures

    How full the next thirty nights are and what they are worth, what the last week booked, and the share of the book cancelled; reads bookingsView(query).

  • The Floor plan card
    npx shadcn@latest add @vibra/widget-hotel-rooms-floor-plan
    From Room rack

    Floor plan

    Every room tonight drawn to its size, floor by floor with each floor's occupancy and a key that counts each state, and a room's sheet a click away that checks its guest in or out through the server; reads floorPlan().

  • The Rack rates card
    npx shadcn@latest add @vibra/widget-hotel-rooms-rack-rates
    From Room rack

    Rack rates

    What each room type asks against what the rooms sold tonight pay, and the house as a whole; reads rackRates().

  • The Turnovers card
    npx shadcn@latest add @vibra/widget-hotel-rooms-turnovers
    From Room rack

    Turnovers

    The rooms changing hands today — who goes out and who, if anyone, comes in behind them — the rooms with a guest behind them first; reads floorPlan().

  • The Guest figures card
    npx shadcn@latest add @vibra/widget-hotel-guests-guest-figures
    From Guest book

    Guest figures

    Every name on the book, how many have stayed twice or more, what a guest spends across their stays and how many arrive this week; reads guestsView(query).

Reads from db

Every figure on these pages is read from these repositories of the sample store. Swap one for your own API and each page that reads it follows.

  • db.bookings
  • db.members
  • db.notifications