Home Cleaning Service Booking

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its tabs, button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/booking/booking16.tsx instead.

Usage

The file also exports booking16Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Booking16, booking16Demo } from "@/components/blocks/booking/booking16";

export default function Page() {
  return <Booking16 {...booking16Demo} />;
}

Props

Behavior notes

• The Standard/Deep Clean/Move-out tabs are a real controlled Tabs component (value/onValueChange) because the active tab drives the base price in the calculation, not just which panel is shown.
• Bedroom and bathroom counts are real useState numbers changed by the +/- stepper buttons, each adding a per-unit price to the subtotal.
• The recurring frequency pills (One-time/Weekly/Bi-weekly/Monthly) are real single-select state; choosing a recurring option applies a real discount percentage to the subtotal.
• The add-ons checklist is real native checkboxes backed by a Set of checked ids; each checked add-on adds its flat price to the subtotal.
• The date input is a real native `input[type=date]` with local state, but nothing is submitted anywhere.
• The price breakdown (subtotal, discount line, total) is computed live on every render from the state above.
• The 'Book cleaning' button is decorative only, no submission handler is wired since that would require a real backend.