Skip to main content
Clever Ops

Testimonial Ledger

Testimonials filed as a ruled ledger, mono index numbers and one-line pull-quotes that expand on click to the full quote and attribution. Proof you can audit.

Preview & code

Loading Testimonial Ledger preview

Installation

pnpm dlx shadcn@latest add @cleverui/testimonial-ledger

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

Usage

tsx
import { TestimonialLedger } from '@/components/blocks/testimonial-ledger'
Exampletsx
import { TestimonialLedger } from '@/components/blocks/testimonial-ledger'

const entries = [
  {
    pull: 'We closed the books three days faster, without a single weekend.',
    quote:
      'Northline used to burn every close week with reconciliations and Slack chases. Ledger cut the noise so controllers review exceptions, not copy data between tabs. Month-end now finishes on Wednesday.',
    author: 'Priya Raman',
    role: 'Controller, Meridian Freight',
  },
  {
    pull: 'Approvals that used to take a week now clear before lunch.',
    quote:
      'Invoice routing used to stall in inboxes. We wired thresholds once, and the system routes everything under $15k automatically. Finance only sees the edge cases, and those still get a full audit trail.',
    author: 'Marcus Webb',
    role: 'VP Ops, Corridor Logistics',
  },
  {
    pull: 'Setup took an afternoon. Week one paid for the year.',
    quote:
      'I expected a six-week integration. Two people configured the ledgers on a Tuesday, and by Friday we had 214 follow-ups drafted with only two needing edits. The team stopped building spreadsheets around the process.',
    author: 'Elena Sosa',
    role: 'Founder, Bright & Co',
  },
  {
    pull: 'Error rate on reconciliations went from quarterly panic to zero.',
    quote:
      'Every mismatch used to surface as a fire drill. With rule-based matching and a readable exception queue, we have not had a material recon variance in four close cycles. That is the first time I have said that out loud.',
    author: 'Dan Okafor',
    role: 'CFO, Fieldline',
  },
  {
    pull: 'It is the first tool the team did not quietly abandon.',
    quote:
      'We have a graveyard of automations that looked good in demos. Ledger stuck because the UI feels like the work itself, ruled, indexable, and honest about what is still open. Nobody hides workarounds in side channels anymore.',
    author: 'Sophie Klein',
    role: 'Head of CX, Arbor Systems',
  },
]

export default function TestimonialLedgerDemo() {
  return (
    <TestimonialLedger
      eyebrow="Audit trail"
      heading="Proof you can actually read."
      entries={entries}
      defaultOpen={0}
    />
  )
}

API reference

TestimonialLedger accepts the following props.

PropTypeDefaultDescription
eyebrowstring
heading*string
entries*TestimonialLedgerEntry[]
defaultOpennumber0Index expanded on load; pass -1 to start fully closed
allowMultiplebooleanfalseLet several rows stay open at once

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

Referenced types

Typestsx
export interface TestimonialLedgerEntry {
  pull: string
  quote: string
  author: string
  role?: string
}

Frequently asked questions

How do I install the Testimonial Ledger component?

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

Testimonial Ledger 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 Testimonial Ledger 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