Skip to content

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

Pro

Rental Product Card Block for Solid

A lens hire card with a strip of 14 day cells where booked days are struck through, a first and last day you press, a refusal in words if the range crosses one, and the sum with the deposit.

UI library: Ark UI

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

Show availability before asking for dates with this rental product card for Solid with Ark UI. A tile draws a telephoto lens with its day rate, $45, and a $150 refundable deposit. Below it a strip of 14 day cells runs from Tue 20 Oct to Mon 2 Nov, and three days are booked: they are struck through, hatched and named "Booked" for a screen reader. Press a first day, then a last day, and the range is filled; a range cannot cross a booked day, and the status line says which one stops it. The sentence under the strip works out the sum, "4 days at $45 = $180, plus a $150 refundable deposit". The one Shine Button reserves the range, a ghost Button cancels it, and Clear starts again. Money is integer cents. Nothing is reserved or charged. For camera, gear and room hire, anything booked by the day.

FAQ

How do I change the days and the price?

Edit BOOKED, a list of ISO dates, and RATE and DEPOSIT in cents. The strip is built from CELLS, which starts on 20 Oct and runs 14 days; change its first date to move it.

How does a range get picked?

The first press sets the first day, the second sets the last, and a third starts over. Pressing an earlier day moves the first day. Pressing a booked day, or a day past one, changes nothing and says why.

Is the deposit part of the total?

No. It is shown as a separate refundable amount beside the rental sum, and the button reserves only the rental. In a real shop the deposit is a hold on the card, taken by your payment service.

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

The range and the reservation are page state; nothing is reserved or charged. Replace the body of reserve and cancel with calls to your booking service and have the server check the dates again, since they may have been taken.

How does it look on a phone?

The strip keeps its two rows of seven cells at full width, with the weekday and the number in each, and the sentence and buttons sit under it.

Is it accessible?

Every day is a button that reads its weekday, number, month and state, such as "Thu 22 Oct, booked". Booked days are marked as disabled and still explain themselves when pressed. The status line announces each step.

All 100 product cards blocks