Spec Comparison Table

Installation

pnpm dlx shadcn@latest add @cleverui/spec-comparison-table

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

Usage

tsx

import { SpecComparisonTable } from '@/components/blocks/spec-comparison-table'

Exampletsx

import { SpecComparisonTable } from '@/components/blocks/spec-comparison-table'

export default function SpecComparisonTableDemo() {
  return (
    <div className="mx-auto max-w-4xl px-4 py-10 sm:px-6 sm:py-14">
      <SpecComparisonTable
        heading="Compare variants"
        caption="Hilux variant specifications"
        columns={[
          { name: 'Workmate', tagline: 'Fleet ready' },
          { name: 'SR', tagline: 'Workhorse' },
          { name: 'SR5', tagline: 'Weekend capable' },
        ]}
        rows={[
          { label: 'Power', values: ['120 kW', '150 kW', '150 kW'], winner: 1 },
          { label: 'Torque', values: ['400 Nm', '500 Nm', '500 Nm'], winner: 1 },
          { label: 'Towing (braked)', values: ['2,800 kg', '3,500 kg', '3,500 kg'], winner: 2 },
          { label: 'Fuel (combined)', values: ['7.9 L/100km', '7.6 L/100km', '7.9 L/100km'], winner: 1 },
          { label: 'Payload', values: ['1,175 kg', '1,010 kg', '925 kg'], winner: 0 },
          { label: 'Ground clearance', values: ['264 mm', '286 mm', '310 mm'], winner: 2 },
        ]}
        footnote="Manufacturer figures, ADR combined cycle. Towing ratings assume correct ball weight and tyre pressures."
      />
    </div>
  )
}

API reference

SpecComparisonTable accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Compare variants'`	set above the table in confident sans
`caption`	`string`	–	semantic table caption, rendered sr-only for quiet layout
`columns`*	`SpecColumn[]`	–	2–3 variants
`rows`*	`SpecRow[]`	–	–
`stickyHeader`	`boolean`	`true`	header row pins to the top of the scroll context while the body scrolls past
`footnote`	`string`	–	quiet source line

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

Referenced types

Typestsx

export interface SpecColumn {
  name: string
  tagline?: string
}

export interface SpecRow {
  label: string
  /** PREFORMATTED per column */
  values: string[]
  /** column index that earns the tick, omit when no row wins */
  winner?: number
}

Related components

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.

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.

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 Spec Comparison Table component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/spec-comparison-table`. 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 Spec Comparison Table require?

Spec Comparison Table 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 Spec Comparison Table 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