Receipt Card

Installation

pnpm dlx shadcn@latest add @cleverui/card-receipt

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

Usage

tsx

import { CardReceipt } from '@/components/ui/card-receipt'

Exampletsx

import { CardReceipt } from '@/components/ui/card-receipt'

export default function CardReceiptDemo() {
  return (
    <div className="mx-auto flex min-h-[560px] max-w-md items-center px-4 py-16 sm:px-6">
      <CardReceipt
        title="Fitzroy Cellars"
        reference="RCPT-000482"
        items={[
          {
            label: 'Barossa Shiraz 2021',
            detail: 'Magnum · cellar reserve',
            value: '$86.00',
          },
          {
            label: 'Yarra Pinot 2022',
            detail: 'Half case · 6 btls',
            value: '$174.00',
          },
          {
            label: 'Corkage waiver',
            detail: 'Member tier · Gold',
            value: '−$12.00',
          },
        ]}
        subtotal="$248.00"
        total="$248.00"
        stamp="PAID"
        note="Thank you, retain for your records"
        className="w-full"
      />
    </div>
  )
}

API reference

CardReceipt accepts the following props.

Prop	Type	Default	Description
`title`*	`string`	–	merchant or product heading, e.g. 'Fitzroy Cellars'
`reference`	`string`	`'RCPT-000482'`	mono document number in the header row
`items`*	`CardReceiptItem[]`	–	–
`subtotal`	`string`	–	preformatted subtotal; row omitted when absent
`total`*	`string`	–	preformatted total, the document's landing point
`stamp`	`string`	`'PAID'`	stamp text; empty string removes the stamp entirely
`note`	`string`	`'Thank you, retain for your records'`	mono footer line under a final hairline

…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 CardReceiptItem {
  label: string
  /** preformatted figure, e.g. '$24.00', never calculated here */
  value: string
  detail?: string
}

Related components

Ledger Flip Card

Card that flips to its ledger side, a mono spec table, on an explicit flip button, with aria-pressed state and a reduced-motion crossfade instead of 3D rotation.

Constellation Card

A card whose border is a constellation, seeded stars joined by hairline segments that twinkle in slow sequence, then re-wire into a new star graph on hover. The frame is the show.

Drawer Card

Card whose bottom edge is a drawer, hover or focus slides a hidden action row up from behind a hairline, click-through safe and permanently open on touch.

Frost Wipe Card

A condensation card for React, the pane mists over with canvas breath, your pointer squeegees it clear, droplets run, and it slowly re-fogs. Tailwind token colors throughout.

Hover Index Card

Editorial cards fronted by a giant mono index numeral that fills from outline to solid ink on hover or focus, a zero-movement hover language built on clip-path, solid by default on touch.

Iris Aperture Card

A React card with a working camera iris, token-surface blades pivot through real f-stops to unveil the pane on hover, under a live mono aperture readout. Tailwind tokens, mechanical spectacle.

Frequently asked questions

How do I install the Receipt Card component?

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

Receipt Card 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 Receipt Card 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