Skip to main content
Clever Ops

Product Tile

The product card perfected, structural product panel, honest sale typography with a struck was-price and quiet unit price, aria-labelled swatch dots, and one accent on the add action.

Preview & code

Loading Product Tile preview
Open in v0

Installation

pnpm dlx shadcn@latest add @cleverui/product-tile

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

Usage

tsx
import { ProductTile } from '@/components/ui/product-tile'
Exampletsx
'use client'

import { useState } from 'react'
import { ProductTile } from '@/components/ui/product-tile'

const SWATCHES = [
  { name: 'Olive', swatchClass: 'bg-foreground/80' },
  { name: 'Sand', swatchClass: 'bg-muted-foreground/50' },
  { name: 'Ink', swatchClass: 'bg-border' },
]

export default function ProductTileDemo() {
  const [swatch, setSwatch] = useState('Olive')

  return (
    <div className="mx-auto flex w-full max-w-xs justify-center px-4 py-10 sm:px-6 sm:py-14">
      <ProductTile
        name="Field Jacket 02"
        price="$189"
        compareAt="$240"
        unitPrice="or 4 × $47.25"
        badge="New"
        swatches={SWATCHES}
        selectedSwatch={swatch}
        onSwatchSelect={setSwatch}
        ctaLabel="Add to cart"
        href="#field-jacket-02"
        onAdd={() => {}}
      />
    </div>
  )
}

API reference

ProductTile accepts the following props.

PropTypeDefaultDescription
name*string–product name, the tile's heading
price*string–PREFORMATTED current price, e.g. "$189"
compareAtstring–PREFORMATTED original price, struck through honestly
unitPricestring–quiet legal line, e.g. "$9.45 / 100ml"
badgestring–one word like "New", quiet uppercase text, never a colored pill
swatchesProductSwatch[]––
selectedSwatchstring–controlled selection by swatch name
onSwatchSelect(name: string) => void–callback only, the tile holds no state
ctaLabelstring'Add to cart'–
onAdd() => void––
hrefstring–wraps panel and name in a product link 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 interface ProductSwatch {
  name: string
  /** static token class for the fill, e.g. "bg-foreground/80" */
  swatchClass?: string
}

Frequently asked questions

How do I install the Product Tile component?

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

Product Tile uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Product Tile 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.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services