VehicleSpecBar Component
Interactive component demo and usage examples
Full Spec Bar (Light Variant)
Default variant with all specifications shown. Best for detail pages and featured listings.
All specs:
Year and engine only:
Minimal (year only):
Full Spec Bar (Dark Variant)
For use on dark backgrounds, hero sections, or featured vehicles.
All specs:
Partial specs:
Compact Variant
Smaller, borderless variant ideal for vehicle cards and grid layouts.
Light compact:
Dark compact:
Vehicle Card Examples
Real-world usage in vehicle listing cards.
BMW 320i
Premium sedan with low mileage
Mercedes C-Class
Luxury engine, excellent condition
Toyota Corolla
Reliable, fuel efficient
Custom Styling Examples
Component with custom className overrides.
Blue theme:
Green theme:
Purple theme:
Mobile Responsive
Component automatically wraps on smaller screens.
Engine Details
Complete engine assembly with warranty
Imported from Japan, low mileage
Integration Examples
Copy-paste code snippets for quick integration.
Astro Page (.astro)
---
import { VehicleSpecBar } from '@/components/VehicleSpecBar';
const vehicle = await getVehicle(id);
---
<VehicleSpecBar
year={vehicle.year}
engineSize={vehicle.engine_size}
transmission={vehicle.transmission}
referenceNumber={vehicle.ref_number}
variant="light"
client:load
/>React Component (.tsx)
import { VehicleSpecBar } from '@/components/VehicleSpecBar';
export function VehicleCard({ vehicle }) {
return (
<div>
<VehicleSpecBar
year={vehicle.year}
engineSize={vehicle.engineSize}
transmission={vehicle.transmission}
/>
</div>
);
}Component Location: src/components/VehicleSpecBar.tsx
View full documentation in VehicleSpecBar.README.md