ComponentsComponents
Component Library
All reusable UI components in one scrollable reference. Built on shadcn/ui and Tailwind, designed for consistency and speed.
Components
Forms
Inputs, selects, checkboxes, radio groups, and textareas following shadcn conventions. Focus rings use the default ring system — no fuchsia overrides.
Text Inputs
Standard text inputs with labels and helper text.
As it appears on your driver’s licence.
Please enter a valid phone number.
Select & Textarea
Dropdown select and multiline text area.
Checkboxes & Radio Groups
Selection controls for forms.
Components
Cards
Cards are the primary container for grouped content. Use consistent padding, border radius, and border styling.
Basic Card
Standard card with title, description, and action.
Card Title
This is a basic card with a title, description, and a call to action button below.
Feature Cards
Icon-led cards for highlighting product features.
Insurance on Every Vehicle
Comprehensive coverage is mandatory on every vehicle.
Flexible Terms
Cancel anytime after your minimum term. Plans from 7 days.
Quality Vehicles
Late-model SUVs, sedans, and EVs — maintained by Roam.
Stats Cards
For dashboards and data displays.
Active Vehicles
247
+12%
Bookings This Month
1,843
+8%
Avg. Booking Value
$2,140
+3%
Customer Rating
4.8
+0.2
Components
Car Card
The primary vehicle listing card. Two variants — short-term (daily rental) and long-term (subscription) — driven by a single variant prop. Supports conditional badges, specs, pricing, and enrollment fee selection.
Short-Term Variant
Shows category name, daily price, and total for the selected period.
Compact Sedan
Toyota Corolla or similar
$826 total for 14 days
Excl. add-ons, taxes
Long-Term Variant
Shows year/make/model, weekly and monthly pricing, and enrollment fee selector.
2025 Kia Sportage
EX Premium
Excl. add-ons, taxes
Enrollment fee
Badge Variations
Cards with different badge combinations: New, On Sale, Only X Left, Electric, Hybrid.
Compact Sedan
Toyota Corolla or similar
$826 total for 14 days
Excl. add-ons, taxes
Compact SUV
Kia Sportage or similar
$966 total for 14 days
Excl. add-ons, taxes
Midsize SUV
Hyundai Tucson or similar
$1,008 total for 14 days
Excl. add-ons, taxes
Electric SUV
Hyundai Ioniq 5 or similar
$1,246 total for 14 days
Excl. add-ons, taxes
Hybrid SUV
Toyota RAV4 Hybrid or similar
$1,050 total for 14 days
Excl. add-ons, taxes
Components
Inventory Grid
Full browse-page layout with responsive grid, short-term / long-term toggle, and loading / empty states. Toggle between states using the controls.
Interactive Demo
Switch between variants and states.
Compact Sedan
Toyota Corolla or similar
$826 total for 14 days
Excl. add-ons, taxes
Compact SUV
Kia Sportage or similar
$966 total for 14 days
Excl. add-ons, taxes
Midsize SUV
Hyundai Tucson or similar
$1,008 total for 14 days
Excl. add-ons, taxes
Electric SUV
Hyundai Ioniq 5 or similar
$1,246 total for 14 days
Excl. add-ons, taxes
Hybrid SUV
Toyota RAV4 Hybrid or similar
$1,050 total for 14 days
Excl. add-ons, taxes
Compact Sedan
Hyundai Elantra or similar
$686 total for 14 days
Excl. add-ons, taxes
Components
Fallback Vehicle Grid
Static category cards shown when the API-driven vehicle grid fails or returns no results. Six categories with placeholder images link to the browse page.
Fallback Grid
Renders when API data is unavailable.
Compact Sedan
Corolla, Elantra, Forte & more
Browse Compact Sedan
Compact SUV
RAV4, Sportage, Rogue & more
Browse Compact SUV
Midsize Sedan
Camry, Jetta, Mazda 3 & more
Browse Midsize Sedan
Midsize SUV
Tucson, Santa Fe, Grand Cherokee & more
Browse Midsize SUV
Electric & Hybrid
Tesla Model 3, RAV4 Hybrid & more
Browse Electric & Hybrid
Luxury
BMW X1, Audi Q5 & more
Browse LuxuryComponents
Badges & Tags
Small labels for status, categories, and metadata. Use Tailwind utility colours for semantic states.
Badge Variants
Status badges, brand accents, and neutral tags.
Status
Brand
Tags
Components
Alerts & Notifications
Contextual feedback messages. Use Tailwind utility colours — never fuchsia for error states.
Alert Variants
Informational, success, warning, and error alerts.
Booking confirmed
Your Kia Sportage has been reserved for pickup on Monday, April 14th at one of Roam’s service locations.
Payment received
Your monthly payment of $1,249.00 has been processed successfully.
Insurance expiring soon
Your personal insurance coverage expires in 5 days. Roam insurance will be applied automatically.
Payment failed
We couldn’t process your payment. Please update your card details and try again.
Toast Notifications
Transient notifications that appear and auto-dismiss.
Saved successfully
Your changes have been saved.
Components
Tables
Data tables for dashboards and admin views. Striped rows for readability, consistent alignment, and clear hierarchy.
Data Table
Fleet inventory example.
| Vehicle | Plan | Status | Monthly | Actions |
|---|---|---|---|---|
| Kia Sportage 2024 | Long-Term | Active | $1,249 | |
| Hyundai Tucson 2024 | Short-Term | Pending | $389/wk | |
| Hyundai Elantra 2023 | Long-Term | Active | $999 | |
| Tesla Model 3 2024 | Long-Term | Cancelled | $1,599 |
Components
Feedback & States
Loading indicators, empty states, and confirmation dialogs.
Loading States
Spinners and skeleton screens for async content.
Empty State
When there's no content to display.
No vehicles found
Try adjusting your filters or search terms to find what you’re looking for.
Dialog / Modal
Confirmation dialogs for important actions.
Cancel Subscription?
Your current term ends on April 30. You will not be charged after that date. This action cannot be undone.