Studio Ledger
Money in and out of a small glass studio for one month at a time: balances, a cash-flow diagram, spending by category, the portfolio, a calendar of daily spending and every transaction.
This example uses sample data from this site: data.ts, which also needs art.ts. Copy those files from the repository, or use your own data in their place.
"use client";
import { StudioLedger } from "@/components/miyuki-ui/studio-ledger";
import { people } from "@/registry/lib/data";
const haruto = people[3];
export default function StudioLedgerDemo() {
return <StudioLedger user={{ name: haruto.name, email: haruto.email, avatar: haruto.avatar }} />;
}Install
npx shadcn@latest add @miyuki-ui/studio-ledgerThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
StudioLedger
Prop
Type
Ryokan
A hot spring inn's landing page and booking: the valley with steam rising, three rooms, the baths with live hours and occupancy, a seasonal dinner menu, a small line map for getting there, a booking card and a waterline footer.
Tea shop
A small online tea shop: a seasonal hero, a product grid with filter chips and quick add, a product page with a gallery, a brewing guide on a dial and a steep timer, and a cart drawer that ends in a printed receipt.