Elements Pro launch: $79 for the first 50 with LAUNCH50 · $129 standard.

Components / Interfaces / LedgerList

LedgerList.

FreeComponent

A horizontal ledger-style row list with name, meta, mono figure, and status slots.

Demo dataResponsive
  • 01
    Project ApolloSarah Chen
    $12.4kActive
  • 02
    Project ZephyrJames Park
    $8.2kReview

Installation

pnpm dlx shadcn@latest add https://elements.micropreneur.dev/r/ledger-list.json

The shadcn CLI writes the source into your project. Files added:

  • components/elements/ledger-list.tsxcomponent
  • lib/utils.tslib
Dependenciesclsxtailwind-merge

API

LedgerList

No props of its own.

Also accepts ComponentProps<'ul'>.

LedgerRow

PropTypeDefaultDescription
indexReactNode—Optional index marker rendered before the name, e.g. "01".
name (required)ReactNode—Primary label.
metaReactNode—Secondary muted detail under or beside the name.
figureReactNode—Right-aligned monospaced figure (amount, count, id).
statusReactNode—Trailing status slot, e.g. a StatusBadge.
selectedbooleanfalse

Also accepts Omit<ComponentProps<'li'>, 'children'>.

Accessibility

  • Renders a native ul and li list, so screen readers announce the row count.
  • Selection adds an inset rail as well as a tint, so it does not rely on color alone.
  • Rows are not focusable by default. Wrap the name in a link or button when a row opens something.