Vehicle Inventory Card

Installation

pnpm dlx shadcn@latest add @cleverui/vehicle-inventory-card

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { VehicleInventoryCard } from '@/components/ui/vehicle-inventory-card'

Exampletsx

import { VehicleInventoryCard } from '@/components/ui/vehicle-inventory-card'

export default function VehicleInventoryCardDemo() {
  return (
    <div className="mx-auto flex max-w-sm justify-center px-4 py-10 sm:px-6 sm:py-14">
      <VehicleInventoryCard
        year="2022"
        make="Toyota"
        model="Hilux"
        variant="SR5 Double-Cab 4x4"
        price="$52,990"
        priceNote="Drive away"
        finance="From $182/wk · 9.49% comparison"
        odometer="48,200 km"
        transmission="Automatic"
        fuel="Diesel"
        status="just-arrived"
        href="#stock-hilux-sr5-2022"
      />
    </div>
  )
}

API reference

VehicleInventoryCard accepts the following props.

Prop	Type	Default	Description
`year`*	`string`	–	model year opening the heading, e.g. '2022'
`make`*	`string`	–	e.g. 'Toyota'
`model`*	`string`	–	e.g. 'Hilux'
`variant`	`string`	–	trim line set muted after the heading
`price`*	`string`	–	PREFORMATTED, e.g. '$52,990'
`priceNote`	`string`	`'Drive away'`	small qualifier beside the price
`finance`	`string`	–	PREFORMATTED per-week line, quiet, tabular
`odometer`*	`string`	–	PREFORMATTED, e.g. '48,200 km'
`transmission`*	`string`	–	e.g. 'Automatic'
`fuel`*	`string`	–	e.g. 'Diesel'
`status`	`VehicleStatus`	`'none'`	ribbon over the silhouette panel
`href`	`string`	–	wraps the card in a single anchor when provided

…plus everything from Omit< React.HTMLAttributes<HTMLElement>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' >: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export type VehicleStatus = 'just-arrived' | 'sold' | 'none'

Related components

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.

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.

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.

Frequently asked questions

How do I install the Vehicle Inventory Card component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/vehicle-inventory-card`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Vehicle Inventory Card require?

Vehicle Inventory Card uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Vehicle Inventory Card to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code