Skip to main content
Clever Ops

Ledger Accordion

A standalone accordion in the ruled-ledger voice, mono indices, right-aligned mono meta figures, hairline rows, and a primary keyline beside the open region. A content container, not a FAQ.

Preview & code

Loading Ledger Accordion preview
Open in v0

Installation

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

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

Usage

tsx
import { AccordionLedger } from '@/components/ui/accordion-ledger'
Exampletsx
import { AccordionLedger } from '@/components/ui/accordion-ledger'

export default function AccordionLedgerDemo() {
  return (
    <div className="mx-auto w-full max-w-2xl px-4 py-10 sm:px-6 sm:py-14">
      <AccordionLedger
        defaultOpen={0}
        startIndex={1}
        items={[
          {
            label: 'Release notes',
            meta: 'v2.4.1',
            content: (
              <ul className="space-y-1.5">
                <li className="flex gap-2">
                  <span className="font-mono text-[11px] text-foreground/70">
                    +
                  </span>
                  <span>Warehouse connectors pick up schema drifts in under 30s.</span>
                </li>
                <li className="flex gap-2">
                  <span className="font-mono text-[11px] text-foreground/70">
                    ~
                  </span>
                  <span>Query planner trims cold-start latency by ~18% on Pro seats.</span>
                </li>
                <li className="flex gap-2">
                  <span className="font-mono text-[11px] text-foreground/70">
                    −
                  </span>
                  <span>Deprecated the legacy CSV import path; use the bulk loader instead.</span>
                </li>
              </ul>
            ),
          },
          {
            label: 'Workspace storage',
            meta: '4.2 GB',
            content: (
              <p>
                Shared boards, cached result sets, and scheduled-export artifacts
                count against the workspace pool. Free plans include 2 GB; Pro
                seats lift the ceiling to 25 GB with soft warnings at 80%.
              </p>
            ),
          },
          {
            label: 'Auth & provisioning',
            meta: '6 keys',
            content: (
              <dl className="grid gap-2 font-mono text-xs sm:grid-cols-2">
                <div className="flex justify-between gap-4 border-b border-border/60 pb-2">
                  <dt className="text-muted-foreground">SSO</dt>
                  <dd className="tabular-nums text-foreground">Okta · Azure AD</dd>
                </div>
                <div className="flex justify-between gap-4 border-b border-border/60 pb-2">
                  <dt className="text-muted-foreground">SCIM</dt>
                  <dd className="tabular-nums text-foreground">Business+</dd>
                </div>
                <div className="flex justify-between gap-4 border-b border-border/60 pb-2 sm:border-b-0 sm:pb-0">
                  <dt className="text-muted-foreground">API keys</dt>
                  <dd className="tabular-nums text-foreground">6 active</dd>
                </div>
                <div className="flex justify-between gap-4">
                  <dt className="text-muted-foreground">Session TTL</dt>
                  <dd className="tabular-nums text-foreground">12 h</dd>
                </div>
              </dl>
            ),
          },
          {
            label: 'Export destinations',
            meta: '3 sinks',
            content: (
              <p>
                Nightly board snapshots land in S3, BigQuery, or a signed webhook.
                Failed runs retry twice with backoff, then page the board owners
                with the last successful snapshot attached.
              </p>
            ),
          },
        ]}
      />
    </div>
  )
}

API reference

AccordionLedger accepts the following props.

PropTypeDefaultDescription
items*AccordionLedgerItem[]–3–6 rows; meta is a mono figure like '4 files' or 'v2.3' on the shared right edge
singleOpenbooleanfalseopening a row closes the others; default lets rows open independently
defaultOpennumber–index of a row open on first render (SSR-rendered open, no mount jump)
startIndexnumber1first mono index; renders zero-padded two digits
headingLevel3 | 43heading level wrapping each trigger button

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

Referenced types

Typestsx
export interface AccordionLedgerItem {
  label: string
  /** mono figure on the shared right edge, e.g. '4 files' or 'v2.3' */
  meta?: string
  content: React.ReactNode
}

Frequently asked questions

How do I install the Ledger Accordion component?

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

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