Skip to content

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

Pro

Car Rental Product Card Block for Vue

A hatchback hire card with a three-step protection ladder whose deductible falls from $1,500 to $0, an unlimited-miles switch and a three-day total worked out in cents.

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

Hire a car and see what a mishap would cost with this car rental product card for Vue with Ark UI. A wide tile draws the hatchback with its facts and the day rate, $48 for Mon 12 to Thu 15 Oct. A Radio Group is the protection ladder: Basic, Standard (+$14 a day) and Full (+$26 a day), each with a bar that shortens as the deductible falls from $1,500 to $500 to nothing, and the deductible in words. A Switch adds unlimited miles for $9 a day. A list works out three days at the day rate, the protection, the miles and the total, and the one Shine Button reserves the car and turns into "Reserved". Money is integer cents throughout. Nothing is reserved, charged or held on a card. For car hire, van and bike hire and anything with an optional cover.

FAQ

How do I change the car, the days and the cover?

Edit COVERS, DAY_CENTS, MILES_CENTS and DAYS. Each cover has perDayCents and deductibleCents, so $14 is 1400. The bar lengths come from the deductible, and the total is (day rate + cover + miles) x days, so all of them follow your numbers.

What do the bars mean?

Each bar is the deductible as a share of the largest one, $1,500, so the ladder visibly falls. The figure is written beside it too, so the meaning does not depend on the bar.

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

The chosen cover, the miles and the reservation are page state; nothing is reserved, charged or held on a card. Replace the body of reserve and cancel with calls to your booking service, and let the server price the trip again from the ids.

Are fuel, tax and a deposit included?

No. This card prices the car, the cover and the miles. Add taxes, fuel rules and a deposit as more lines in the list, each in cents.

How does it look on a phone?

The tile stacks the drawing over its facts, the three covers stack in a column and the list and the button sit under them.

Is it accessible?

The ladder is a real radio group with arrow keys, each cover names its deductible in words, the switch has a visible label, and the total is a list of labelled lines. Every change is announced by the polite status line.

All 100 product cards blocks