# Ledger: Mac app > A five-page site for a Mac app: an interactive desktop hero, a menu-bar tour, a native-features bento, a device lineup, license-or-subscription pricing, a download page, release notes and support. A shadcn/ui block from the [@ballmac](https://ui.ballmac.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/ballmac/template-ledger). - Page, with a live preview: https://shadcn.exchange/r/ballmac/template-ledger - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/ballmac/template-ledger-light-2f151b19c8c4b791.png - Registry item: https://ui.ballmac.com/r/template-ledger.json - Categories: templates - Listed: 2026-10-14, source last changed 2026-10-14 ## Install ```bash npx shadcn@latest add https://ui.ballmac.com/r/template-ledger.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `lucide-react` - Registry items: `utils`, `https://ui.ballmac.com/r/blur-fade.json`, `https://ui.ballmac.com/r/changelog-1.json`, `https://ui.ballmac.com/r/devices-1.json`, `https://ui.ballmac.com/r/download-1.json`, `https://ui.ballmac.com/r/faq-2.json`, `https://ui.ballmac.com/r/features-7.json`, `https://ui.ballmac.com/r/kbd.json`, `https://ui.ballmac.com/r/mac-icons.json`, `https://ui.ballmac.com/r/pricing-4.json`, `https://ui.ballmac.com/r/showcase-1.json` ## Notes from the registry Pages are at /ledger, /ledger/download, /ledger/pricing, /ledger/changelog and /ledger/support. The light and dark palettes are the ledgerCss string in ledger-theme.tsx. ## Files ### `registry/ballmac/components/templates/ledger/ledger-fonts.ts` ```ts // Ballmac UI: Ledger template fonts. https://ui.ballmac.com/templates/template-ledger import { Inter, Newsreader } from "next/font/google" /** The italic serif used for one emphasised word per heading. Body text uses the system font, like a Mac app. */ export const ledgerSerif = Newsreader({ variable: "--ledger-serif", subsets: ["latin"], style: ["normal", "italic"], display: "swap", preload: false }) /** Used where San Francisco is not installed (Windows, Linux, Android), so the page looks the same everywhere. */ export const ledgerSans = Inter({ variable: "--ledger-sans", subsets: ["latin"], display: "swap", preload: false }) ``` ### `registry/ballmac/components/templates/ledger/ledger-theme.tsx` ```tsx // Ballmac UI: Ledger template shell. https://ui.ballmac.com/templates/template-ledger "use client" import * as React from "react" import { Menu, X } from "lucide-react" import { AppIcon } from "@/components/ballmac/mac-icons" import { ledgerSans, ledgerSerif } from "@/components/ballmac/templates/ledger/ledger-fonts" import { cn } from "@/lib/utils" type LedgerPage = "home" | "download" | "pricing" | "changelog" | "support" type LedgerHrefs = Record const defaultHrefs: LedgerHrefs = { home: "/ledger", download: "/ledger/download", pricing: "/ledger/pricing", changelog: "/ledger/changelog", support: "/ledger/support" } /** Ledger's palette: Apple-calm. Cool white, soft grey surfaces, one blue. Dark mode follows the system. */ const ledgerCss = ` .ledger-theme{--background:oklch(0.99 0.002 250);--foreground:oklch(0.2 0.01 255);--card:oklch(1 0 0);--card-foreground:oklch(0.2 0.01 255);--popover:oklch(1 0 0);--popover-foreground:oklch(0.2 0.01 255);--primary:oklch(0.2 0.01 255);--primary-foreground:oklch(0.99 0.002 250);--secondary:oklch(0.965 0.004 250);--secondary-foreground:oklch(0.2 0.01 255);--muted:oklch(0.965 0.004 250);--muted-foreground:oklch(0.5 0.012 255);--accent:oklch(0.955 0.006 250);--accent-foreground:oklch(0.2 0.01 255);--border:oklch(0.2 0.01 255 / 10%);--input:oklch(0.2 0.01 255 / 14%);--ring:oklch(0.6 0.19 255);--surface:oklch(0.975 0.003 250);--chart-1:oklch(0.52 0.2 255);--ledger-on-accent:oklch(1 0 0);--chart-2:oklch(0.48 0.14 155);--chart-3:oklch(0.78 0.16 75);--chart-4:oklch(0.62 0.2 305);--chart-5:oklch(0.68 0.19 25);--radius:1rem} .dark .ledger-theme{--background:oklch(0.16 0.006 255);--foreground:oklch(0.96 0.004 250);--card:oklch(0.2 0.008 255);--card-foreground:oklch(0.96 0.004 250);--popover:oklch(0.22 0.008 255);--popover-foreground:oklch(0.96 0.004 250);--primary:oklch(0.96 0.004 250);--primary-foreground:oklch(0.2 0.01 255);--secondary:oklch(0.25 0.009 255);--secondary-foreground:oklch(0.96 0.004 250);--muted:oklch(0.24 0.009 255);--muted-foreground:oklch(0.72 0.012 250);--accent:oklch(0.27 0.01 255);--accent-foreground:oklch(0.96 0.004 250);--border:oklch(1 0 0 / 11%);--input:oklch(1 0 0 / 15%);--ring:oklch(0.7 0.17 255);--surface:oklch(0.18 0.007 255);--chart-1:oklch(0.72 0.15 255);--ledger-on-accent:oklch(0.16 0.01 255);--chart-2:oklch(0.76 0.16 160);--chart-3:oklch(0.83 0.15 80);--chart-4:oklch(0.72 0.17 305);--chart-5:oklch(0.76 0.16 25)} ` const links: { key: LedgerPage; label: string }[] = [ { key: "home", label: "Overview" }, { key: "pricing", label: "Pricing" }, { key: "changelog", label: "What’s new" }, { key: "support", label: "Support" }, ] type LedgerShellProps = React.ComponentProps<"div"> & { /** The page being shown, so its nav link is marked current. */ page: LedgerPage /** Override where pages live (used by previews). */ hrefs?: Partial } /** Ledger's frame: a frosted, centred header like a Mac app’s site, and a quiet footer. Wrap every Ledger page in it. */ function LedgerShell({ page, hrefs: overrides, className, style, children, ...props }: LedgerShellProps) { const hrefs = { ...defaultHrefs, ...overrides } const [open, setOpen] = React.useState(false) return (
L Ledger
Download
{open && ( )}
{children}
{[ { title: "Ledger", items: [["Overview", "home"], ["What’s new", "changelog"], ["Pricing", "pricing"], ["Download", "download"]] }, { title: "Support", items: [["Help center", "support"], ["Keyboard shortcuts", "support"], ["Contact us", "support"], ["System status", "support"]] }, { title: "Company", items: [["About", "home"], ["Press kit", "home"], ["Privacy", "home"], ["Terms", "home"]] }, { title: "Elsewhere", items: [["Mastodon", "home"], ["GitHub", "home"], ["RSS", "changelog"], ["Newsletter", "home"]] }, ].map((c) => (

{c.title}

    {c.items.map(([label, key]) =>
  • {label}
    • )}
))}

Ledger requires macOS 13 Ventura or later. Apple, Mac, macOS and iCloud are trademarks of Apple Inc. © 2026 Ledger Software, made in Portland.

) } /** A heading with one italic serif word, the template's signature. Wrap the word to emphasise in ``. */ function LedgerHeading({ className, children, as: Tag = "h2", ...props }: React.ComponentProps<"h2"> & { as?: "h1" | "h2" | "h3" }) { return ( {children} ) } export { LedgerHeading, LedgerShell, defaultHrefs as ledgerDefaultHrefs, type LedgerHrefs, type LedgerPage, type LedgerShellProps } ``` ### `registry/ballmac/components/templates/ledger/ledger-home.tsx` ```tsx // Ballmac UI: Ledger home page. https://ui.ballmac.com/templates/template-ledger "use client" import * as React from "react" import { ArrowDownToLine, Cloud, Laptop, Lock, ShieldCheck, Star, Zap } from "lucide-react" import { Devices1 } from "@/components/ballmac/blocks/devices-1/devices-1" import { Features7 } from "@/components/ballmac/blocks/features-7/features-7" import { Pricing4 } from "@/components/ballmac/blocks/pricing-4/pricing-4" import { Showcase1 } from "@/components/ballmac/blocks/showcase-1/showcase-1" import { BlurFade } from "@/components/ballmac/blur-fade" import { Kbd } from "@/components/ballmac/kbd" import { AppIcon } from "@/components/ballmac/mac-icons" import { LedgerHeading, LedgerShell, type LedgerHrefs } from "@/components/ballmac/templates/ledger/ledger-theme" import { cn } from "@/lib/utils" const press = [ { outlet: "Mac App Store", quote: "Editor’s Choice" }, { outlet: "MacStories", quote: "The calmest way to run a business." }, { outlet: "Six Colors", quote: "A Mac app that feels like one." }, { outlet: "Daring Fireball", quote: "Fast, plain and correct." }, ] const reviews = [ { quote: "I closed the month in an afternoon. The keyboard shortcuts alone paid for the license.", name: "Hannah Okafor", role: "Freelance designer", tone: "bg-chart-1/20" }, { quote: "It’s the first accounting app that didn’t make me feel like I needed an accountant to use it.", name: "Marcus Lindqvist", role: "Founder, Studio Fjord", tone: "bg-chart-2/20" }, { quote: "Works offline on the train, syncs when I’m home. Exactly how software should behave.", name: "Priya Raman", role: "Independent consultant", tone: "bg-chart-4/20" }, ] const card = "bg-card rounded-3xl border p-7 shadow-[0_1px_2px_0_rgb(0_0_0/0.04)]" type LedgerHomeProps = React.ComponentProps<"div"> & { hrefs?: Partial } /** The Ledger home page: an interactive Mac desktop, a menu-bar tour, a feature bento, devices, reviews and pricing. */ function LedgerHome({ hrefs, ...props }: LedgerHomeProps) { return (

Ledger 2.4 · Now with approvals

Your books, kept beautifully.

Invoices, expenses and reports in a native Mac app that’s fast, private and a pleasure to open on a Monday.

Free for 14 days · macOS 13 or later · Apple silicon and Intel
    {press.map((p) => (

  • {p.outlet}

    “{p.quote}”

    • ))}
A real Mac app, all the way down.

Native, not wrapped. It uses the parts of macOS you already know.

Reviews

    {reviews.map((r) => (
  • {Array.from({ length: 5 }, (_, i) =>
    “{r.quote}”
    {r.name}{r.role}
    • ))}
L Get your Monday back.

Download Ledger and try everything free for 14 days.

 ) } export { LedgerHome, type LedgerHomeProps } ``` ### `registry/ballmac/components/templates/ledger/ledger-download.tsx` ```tsx // Ballmac UI: Ledger download page. https://ui.ballmac.com/templates/template-ledger import * as React from "react" import { Apple, Cpu, HardDrive, ShieldCheck } from "lucide-react" import { Download1 } from "@/components/ballmac/blocks/download-1/download-1" import { LedgerHeading, LedgerShell, type LedgerHrefs } from "@/components/ballmac/templates/ledger/ledger-theme" const specs = [ { icon: Apple, title: "macOS 13 Ventura or later", text: "Runs on every Mac that supports it, including the 2018 MacBook Air." }, { icon: Cpu, title: "Apple silicon and Intel", text: "A universal app, tuned for M-series chips and still quick on Intel." }, { icon: HardDrive, title: "58 MB to download", text: "Under 150 MB installed. Your books are a single file you can back up." }, { icon: ShieldCheck, title: "Signed and notarized", text: "Checked by Apple and by us. SHA-256 checksums are published with every release." }, ] type LedgerDownloadProps = React.ComponentProps<"div"> & { hrefs?: Partial } /** Ledger download: the download block, the system requirements and a note on updates. */ function LedgerDownload({ hrefs, ...props }: LedgerDownloadProps) { return (
Download Ledger.

Free for 14 days. You only need a license if you keep using it.

Before you download

    {specs.map((s) => (

  • {s.title}

    {s.text}

    • ))}

Ledger updates itself in the background and asks before restarting. Need an older version? Browse every release.

 ) } export { LedgerDownload, type LedgerDownloadProps } ``` ### `registry/ballmac/components/templates/ledger/ledger-pricing.tsx` ```tsx // Ballmac UI: Ledger pricing page. https://ui.ballmac.com/templates/template-ledger import * as React from "react" import { Check, Minus } from "lucide-react" import { Faq2 } from "@/components/ballmac/blocks/faq-2/faq-2" import { Pricing4 } from "@/components/ballmac/blocks/pricing-4/pricing-4" import { LedgerHeading, LedgerShell, type LedgerHrefs } from "@/components/ballmac/templates/ledger/ledger-theme" const rows: [string, boolean | string, boolean | string][] = [ ["Invoices and expenses", "Up to 10 a month", "Unlimited"], ["Reports and exports", "Basic", "Full, with CSV and PDF"], ["iCloud sync across Macs", false, true], ["Approvals and menu bar capture", false, true], ["Shortcuts and AppleScript", false, true], ["Custom invoice templates", false, true], ["Updates", "Bug fixes", "All of this major version"], ] function Cell({ v }: { v: boolean | string }) { if (typeof v === "string") return {v} return v ? : } type LedgerPricingProps = React.ComponentProps<"div"> & { hrefs?: Partial } /** Ledger pricing: buy once or subscribe with the cost chart, a free-versus-licensed table and questions. */ function LedgerPricing({ hrefs, ...props }: LedgerPricingProps) { return (
Honest pricing for honest software.

Free trial or licensed

{rows.map(([f, a, b]) => ( ))}
Trial and licensed features
Feature14-day trialLicensed
{f}
) } export { LedgerPricing, type LedgerPricingProps } ``` ### `registry/ballmac/components/templates/ledger/ledger-changelog.tsx` ```tsx // Ballmac UI: Ledger changelog page. https://ui.ballmac.com/templates/template-ledger import * as React from "react" import { Changelog1 } from "@/components/ballmac/blocks/changelog-1/changelog-1" import { LedgerHeading, LedgerShell, type LedgerHrefs } from "@/components/ballmac/templates/ledger/ledger-theme" type LedgerChangelogProps = React.ComponentProps<"div"> & { hrefs?: Partial } /** Ledger changelog: release notes with a generated cover on headline releases. */ function LedgerChangelog({ hrefs, ...props }: LedgerChangelogProps) { return (
What’s new.
) } export { LedgerChangelog, type LedgerChangelogProps } ``` ### `registry/ballmac/components/templates/ledger/ledger-support.tsx` ```tsx // Ballmac UI: Ledger support page. https://ui.ballmac.com/templates/template-ledger "use client" import * as React from "react" import { BookOpen, CreditCard, Keyboard, LifeBuoy, Mail, Search, Wrench } from "lucide-react" import { Kbd } from "@/components/ballmac/kbd" import { LedgerHeading, LedgerShell, type LedgerHrefs } from "@/components/ballmac/templates/ledger/ledger-theme" import { cn } from "@/lib/utils" const topics = [ { icon: BookOpen, title: "Getting started", text: "Import your data, add a customer and send your first invoice.", articles: ["Import from a spreadsheet", "Your first invoice", "Set up iCloud sync"] }, { icon: CreditCard, title: "Licenses and billing", text: "Activate, move or recover a license, and manage a subscription.", articles: ["Activate a license", "Move to a new Mac", "Update a payment method"] }, { icon: Wrench, title: "Troubleshooting", text: "Fix sync conflicts, a stuck export or an app that won’t open.", articles: ["Sync says “paused”", "Rebuild the index", "Reset preferences"] }, { icon: Keyboard, title: "Shortcuts and automation", text: "Every keyboard shortcut and a few AppleScript recipes.", articles: ["All keyboard shortcuts", "Shortcuts app actions", "AppleScript dictionary"] }, ] const shortcuts: [string, string[]][] = [ ["New invoice", ["⌘", "N"]], ["Quick open", ["⌘", "K"]], ["Mark as paid", ["⌃", "⌘", "P"]], ["Export report", ["⇧", "⌘", "E"]], ["Toggle sidebar", ["⌥", "⌘", "S"]], ["Capture expense", ["⌃", "⌥", "N"]], ] type LedgerSupportProps = React.ComponentProps<"div"> & { hrefs?: Partial } /** Ledger support: a search field that filters help topics, shortcut cheat sheet and contact options. */ function LedgerSupport({ hrefs, ...props }: LedgerSupportProps) { const [query, setQuery] = React.useState("") const q = query.trim().toLowerCase() const shown = q ? topics.filter((t) => [t.title, t.text, ...t.articles].join(" ").toLowerCase().includes(q)) : topics return (
How can we help?
e.preventDefault()} className="relative mx-auto mt-8 max-w-xl">
{shown.length === 0 ? (

Nothing found

Try a shorter word, or write to us below.

) : (
    {shown.map((t) => (
    • ))}
)}

Shortcuts worth learning

    {shortcuts.map(([label, keys]) => (
  • {label}{keys.map((k) => {k})}
    • ))}

Contact

{[ { icon: Mail, title: "Email us", text: "A person writes back, usually within a day.", cta: "support@ledger.app" }, { icon: LifeBuoy, title: "System status", text: "iCloud sync and license servers are running normally.", cta: "All systems normal" }, ].map((c) => (

{c.title}

{c.text}

{c.cta}
))}
) } export { LedgerSupport, type LedgerSupportProps } ``` ### `registry/ballmac/app/ledger/page.tsx` ```tsx // Ballmac UI: Ledger template route. https://ui.ballmac.com/templates/template-ledger import type { Metadata } from "next" import { LedgerHome } from "@/components/ballmac/templates/ledger/ledger-home" export const metadata: Metadata = { title: "Ledger: Your books, kept beautifully", description: "A native Mac app for invoices, expenses and reports.", } export default function Page() { return } ``` ### `registry/ballmac/app/ledger/download/page.tsx` ```tsx // Ballmac UI: Ledger template route. https://ui.ballmac.com/templates/template-ledger import type { Metadata } from "next" import { LedgerDownload } from "@/components/ballmac/templates/ledger/ledger-download" export const metadata: Metadata = { title: "Download Ledger", description: "Download Ledger for Mac. Free for 14 days.", } export default function Page() { return } ``` ### `registry/ballmac/app/ledger/pricing/page.tsx` ```tsx // Ballmac UI: Ledger template route. https://ui.ballmac.com/templates/template-ledger import type { Metadata } from "next" import { LedgerPricing } from "@/components/ballmac/templates/ledger/ledger-pricing" export const metadata: Metadata = { title: "Ledger pricing", description: "Buy a license once, or subscribe and always have the latest.", } export default function Page() { return } ``` ### `registry/ballmac/app/ledger/changelog/page.tsx` ```tsx // Ballmac UI: Ledger template route. https://ui.ballmac.com/templates/template-ledger import type { Metadata } from "next" import { LedgerChangelog } from "@/components/ballmac/templates/ledger/ledger-changelog" export const metadata: Metadata = { title: "What’s new in Ledger", description: "Release notes for every version of Ledger.", } export default function Page() { return } ``` ### `registry/ballmac/app/ledger/support/page.tsx` ```tsx // Ballmac UI: Ledger template route. https://ui.ballmac.com/templates/template-ledger import type { Metadata } from "next" import { LedgerSupport } from "@/components/ballmac/templates/ledger/ledger-support" export const metadata: Metadata = { title: "Ledger support", description: "Help articles, shortcuts and ways to reach us.", } export default function Page() { return } ```