Ledger Flip Card

Installation

pnpm dlx shadcn@latest add @cleverui/card-ledger-flip

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

Usage

tsx

import { CardLedgerFlip } from '@/components/ui/card-ledger-flip'

Exampletsx

import { CardLedgerFlip } from '@/components/ui/card-ledger-flip'

export default function CardLedgerFlipDemo() {
  return (
    <div className="mx-auto flex min-h-[520px] max-w-md items-center px-4 py-16 sm:px-6">
      <CardLedgerFlip
        kicker="Edge node"
        title="Harbor NVMe array"
        body="Four-drive RAID enclosure for branch offices that need local write cache without standing up a full SAN rack."
        backTitle="Specs"
        flipLabel="View specs"
        rows={[
          { label: 'Throughput', value: '2.4 GB/s' },
          { label: 'Capacity', value: '16 TB raw' },
          { label: 'Latency p99', value: '180 µs' },
          { label: 'Form factor', value: '1U · 19″' },
          { label: 'Power draw', value: '48 W idle' },
        ]}
        className="w-full"
      />
    </div>
  )
}

API reference

CardLedgerFlip accepts the following props.

Prop	Type	Default	Description
`kicker`	`string`	`'Hardware'`	mono micro-label on the front face
`title`*	`string`	–	–
`body`*	`string`	–	front-face narrative copy
`rows`*	`CardLedgerRow[]`	–	ledger rows for the back face
`backTitle`	`string`	`'Ledger'`	mono heading of the flipped side
`flipLabel`	`string`	`'View specs'`	flip button label; becomes 'Back' semantics when flipped

…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 CardLedgerRow {
  label: string
  value: string
}

Related components

Receipt Card

Content set as a printed receipt, perforated top edge, dashed mono ledger lines, an accountant's rule before the total, and a stamp that rotates in once after the rows print.

Depth Tilt Card

Card that tilts toward the pointer while kicker, keyline, and content ride separate translateZ planes, quiet 3D depth capped at 6 degrees, glare-free by design.

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.

Frequently asked questions

How do I install the Ledger Flip 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-ledger-flip`. 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 Ledger Flip Card require?

Ledger Flip Card 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 Ledger Flip 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