Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Credit History Log Billing Block for Solid

A credit ledger for an AI writing app: 24 entries under day headings with a signed amount, the type in words and the balance after each row, filtered by type and search, with a real CSV download of the rows on screen.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Give people a ledger they can trust, with this credit history section for Solid with Ark UI. The header holds the Shine Button "Download CSV", which names the number of rows it will save. A hairline frame with a plus mark on each corner has a toolbar of a Toggle Group (All, Usage, Top-ups, Bonus, Refunds and Expiry, each with its count) and an Input that searches the entries. Below it, inside a scroll region of fixed height, the entries sit under day headings such as "Wed 14 Oct", each as a native table row with what happened, its type in words, a signed amount and the balance after it. That balance is worked out from a typed opening balance, so it stays true when a filter hides rows. When nothing matches, an Empty state fills the same space. Saving uses a Download Trigger to write a real CSV file of the rows on screen. On a phone the type and balance move under the name. It's built from Toggle Group, Input, Empty, Download Trigger, Shine Button and Guides, with a CSS entrance only. For billing history, AI products and any account with a credit balance.

FAQ

How do I fill it with my ledger?

Edit ENTRIES (oldest first) with an ISO date, a kind of usage, topup, bonus, refund or expiry, a signed delta and a note, and OPENING for the balance before the first entry. The balance after each row is worked out once from those, in order, and the page shows them newest first.

Does filtering change the balance column?

No. The balance after a row is a property of the whole ledger, not of the rows you can see, so a filter or a search hides rows without renumbering anything. The foot shows the balance now, and "Showing 9 of 24 entries" says how many rows are on screen.

What does Download CSV really save?

A real text/csv file of exactly the rows on screen, after the type filter and the search: date, type, description, credits (signed) and balance after. Text that starts with an equals sign, plus, minus or at sign is prefixed with an apostrophe so a spreadsheet won't read it as a formula. With no rows the button says so and saves nothing. A PDF statement is server work: generate it from your own data.

What stays local?

All the data. The ledger is typed in the file, the filter and search only change what this page shows, and the file is made in the browser from those rows. In your app load the entries from your billing API, page them as they grow and keep the running balance on the server.

Is the table accessible?

Each day is a heading over its own table with column headers for screen readers, the scroll region is a named, focusable area, and the status line reports how many entries are showing. Amounts keep their sign in a right-to-left page.

How does it look on a phone?

The type and balance columns fold under each entry's name ("Usage, balance 2,201"), leaving the name and the signed amount. The type buttons scroll sideways in their row, and the list scrolls inside its held height so filtering never moves the page.

All 167 billing blocks