Skip to content

shadcn.io is an independent project built on shadcn/ui

Pro

Service Product Card Block for React Aria

A home-cleaning card where a Standard or Deep visit and three add-on checkboxes extend a time bar and the price, written as how long the visit lasts and when it finishes.

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Sell a service by its time with this service product card for React with React Aria. A Segment Group picks the visit, Standard (2 h, $110) or Deep (4 h, $190), and three Checkbox rows add jobs: inside the oven (+45 min, $25), inside the windows (+30 min, $20) and inside the fridge (+20 min, $15). A summary at the end holds a bar with one segment for the visit and one for each ticked job, the arrival and finish times from a fixed 09:00 start, a line of prices and the sentence "Visit lasts 3 h 15 min, $155". The one Shine Button books the visit as it stands and turns into "Booked"; change a choice and it offers to book again. Rows that are not ticked keep their place in the summary, so nothing moves. Nothing is booked, charged or sent. For cleaners, repairs, lessons and any service priced by the hour.

FAQ

How do I change the jobs and prices?

Edit SIZES and ADDONS. Each has minutes and cents, so $25 is 2500. The bar, the finish time, the sentence and the total are all worked out from those numbers, so they cannot disagree.

What does the bar show?

Its full width is six hours (SCALE), enough for a Deep visit with every job. The first segment is the visit and each ticked job adds a lighter one, so you can see what each job costs in time. Each segment is named for a screen reader.

Where does the 09:00 come from?

It is typed (START), together with the visit day. The finish time is that start plus the visit's minutes. A real service would take the start from the slot the customer picks.

What stays local, and how do I wire it for real?

The size, the ticked jobs and the booking are page state; nothing is stored, charged or sent. Replace the body of book and cancel with calls to your booking service and send it the size and the job ids, not the price, which the server should work out again.

How does it look on a phone?

The jobs come first, then the summary under them, so the choices are above the price they change. The size control spreads across the full width.

Is it accessible?

Each job is a labelled checkbox with its extra time as a description, the size control is named, and the total is a sentence rather than only a number. Changes are announced by the polite status line, and Cancel returns focus to the Book button.

All 100 product cards blocks