Free React Automotive & Dealership Components
Car buyers arrive with three questions, what does it cost, what are the specs, and when can I get it serviced, and most dealer sites bury all three. These components answer them directly: a build-and-price summary, finance repayment panel, spec comparison table, vehicle inventory card, model lineup rail, and service booking strip. There is also a performance gauge cluster and a service history timeline for workshops that want to show their record rather than claim it.
8 components · MIT licensed · installable with the shadcn CLI
Build & Price Summary
A build-and-price recap panel with ledger discipline, base vehicle plus option rows in tabular figures and a drive-away total that counts to rest, deterministic and SSR-exact.
Finance Repayment Panel
A dealership finance estimator in React, deposit stepper, term radiogroup and frequency toggle drive a Tailwind-set repayment figure that counts to rest, with honest fine print.
Model Lineup Rail
A scroll-snap model range rail for React dealer sites, per-body-style stroke silhouettes instead of photos, mono from-pricing, keyboard-scrollable region semantics, Tailwind tokens.
Performance Gauge Cluster
An instrument-cluster stats row for React, 240-degree dial arcs sweep once to data-true values, preformatted kW, Nm and 0-100 figures in Tailwind mono, one featured dial accent.
Service Booking Strip
A workshop booking bar that gets straight to work, logbook, brakes and tyres service pills, a preformatted earliest-slot chip in mono, a tap-to-call fallback, and one book-it-in action.
Service History Timeline
A React service logbook timeline for workshops and dealers, dated entries with mono odometer stamps, itemised work lines, honest totals, and a next-due marker in Tailwind tokens.
Spec Comparison Table
A two-to-three column vehicle spec table set with drafting precision, mono tabular figures, a per-row winner tick as the single accent, a sticky header row, and real table semantics.
Vehicle Inventory Card
A dealer listing card with spec-sheet discipline, structural silhouette panel, year-make-model heading, tabular price over an honest per-week finance line, and a km/transmission/fuel meta row.
Frequently asked questions
Do the finance and pricing components calculate real repayments?
The finance repayment panel performs standard repayment maths client-side from the rate, term, and deposit you pass in. It is a presentation aid, not financial advice, you remain responsible for compliant comparison rates and disclaimers in your market.
Can I use these for a mechanic or service workshop rather than a dealership?
Yes. The service booking strip, service history timeline, and brand-agnostic inventory card work for independent workshops. Pair them with the trades category for quote banners and credential strips.
How do I show my actual vehicle inventory?
The vehicle inventory card takes plain props, image, price, odometer, badges, so you can map over your DMS or CMS data. There is no vendor lock-in; any data source that returns JSON works.