shadcn.io is not affiliated with official shadcn/ui
Rental Storefront Block for Solid
Rent or buy a camera body: a 1 to 60 day range with a drawn cost line against the buy price and the day buying becomes cheaper, damage cover, a refundable deposit and the total.
Installation
Overview
Show what hiring costs next to buying, with this rental panel for Solid with Ark UI. A header introduces Tarn Camera, a camera hire shop, and its Fallow M2 body. In a hairline frame with a plus mark on each corner, the first cell has a rental length range from 1 to 60 days and a drawn chart: the solid line is what renting costs by day, the flat line is the buy price, a dot marks the day you chose and a dashed line marks where buying becomes cheaper. A polite line says what renting costs at your length and how far that is from buying. The side cell lists the terms: the rental (seven days at one rate, the rest at a lower one), a Switch for damage cover, a refundable deposit, the late fee and the total today. The one Shine Button reserves the rental in the page. It's built from Switch, Shine Button and Guides, with a native range and an SVG chart drawn in CSS and SVG, and a CSS entrance only. For equipment hire, a car or tool rental or any "rent or buy" decision.
FAQ
How do I change the rates?
Edit BUY, FIRST_RATE, LONG_RATE, FIRST_DAYS, DEPOSIT, LATE_FEE, COVER_PERCENT and MAX_DAYS, all in cents or whole numbers. rentOf(days) applies the two rates, coverOf takes the cover percent of the rental rounded down to the cent, and the chart is drawn from rentOf for every day.
Where does the break-even day come from?
It is found, not typed: the first day on which the rental costs more than the buy price, less one. With the sample rates that is after day 41. Change a rate and the dashed line and the sentence move with it.
What does Reserve rental do?
In the page: it reads Reserved and the status line says nothing is charged. Changing the length or the cover clears it, because the terms changed. To make it real, post the dates and the cover to your booking service, check availability there, and take the deposit with your payment provider's hosted fields.
Why a native range and not a styled slider?
It works with every key and with touch on all seven targets with no extra code, takes the theme's foreground colour, and announces its value as "12 days". The chart is a plain SVG that stretches with its box, so the dot is placed by percentages.