Model Lineup Rail

Installation

pnpm dlx shadcn@latest add @cleverui/model-lineup-rail

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

Usage

tsx

import { ModelLineupRail } from '@/components/blocks/model-lineup-rail'

Exampletsx

'use client'

import { ModelLineupRail } from '@/components/blocks/model-lineup-rail'

export default function ModelLineupRailDemo() {
  return (
    <div className="w-full">
      <ModelLineupRail
        eyebrow="Model year 2026"
        heading="The range"
        models={[
          {
            name: 'Ranger XL Single Cab',
            bodyStyle: 'ute',
            tagline: 'Work-ready 2.0L bi-turbo',
            fromPrice: 'From $36,990 drive away',
            badge: 'Fleet',
            href: '#ranger-xl',
          },
          {
            name: 'Territory ST',
            bodyStyle: 'suv',
            tagline: 'Seven seats, hybrid option',
            fromPrice: 'From $46,490 drive away',
            badge: 'New',
            href: '#territory-st',
          },
          {
            name: 'Focus Active',
            bodyStyle: 'hatch',
            tagline: 'Raised stance, AWD available',
            fromPrice: 'From $34,990 drive away',
            href: '#focus-active',
          },
          {
            name: 'Mondeo Trend',
            bodyStyle: 'sedan',
            tagline: '2.0L hybrid, highway-tuned',
            fromPrice: 'From $41,290 drive away',
            href: '#mondeo-trend',
          },
          {
            name: 'Transit Custom',
            bodyStyle: 'van',
            tagline: 'LWB, 1,200 kg payload',
            fromPrice: 'From $49,990 drive away',
            badge: 'Stock',
            href: '#transit-custom',
          },
          {
            name: 'Everest Sport',
            bodyStyle: 'wagon',
            tagline: 'Full-size 4x4 family wagon',
            fromPrice: 'From $62,790 drive away',
            href: '#everest-sport',
          },
        ]}
      />
    </div>
  )
}

API reference

ModelLineupRail accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'The range'`	–
`eyebrow`	`string`	–	mono micro-label above the heading, e.g. 'Model year 2026'
`models`*	`ModelLineupItem[]`	–	–
`prevLabel`	`string`	`'Previous models'`	aria-label on the back arrow button
`nextLabel`	`string`	`'Next models'`	aria-label on the forward arrow button

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface ModelLineupItem {
  name: string
  bodyStyle: ModelBodyStyle
  tagline?: string
  /** PREFORMATTED, e.g. 'From $34,990 drive away' */
  fromPrice: string
  /** one quiet word like 'New' */
  badge?: string
  href?: string
}

export type ModelBodyStyle = 'ute' | 'suv' | 'sedan' | 'hatch' | 'van' | 'wagon'

Related components

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.

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.

Frequently asked questions

How do I install the Model Lineup Rail component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/model-lineup-rail`. 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 Model Lineup Rail require?

Model Lineup Rail 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 Model Lineup Rail 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