Skip to content
Templates

FinanceBookkeeping

Prismbook

Freelancer sales, invoices and bank registers

Prismbook

Video preview

Recorded from the actual template. The 4 animated views are included in the source.

Category
Bookkeeping
Dashboard
Views
4
animated
Interface
Light
theme
Stack
Next.js
16 · React 19
License
Unlimited
projects
Delivery
ZIP
by email

About

A pastel bookkeeping interface with graphite sales bars inside striped goals, invoice cards and two bank registers. Matching a deposit to an invoice updates sales and books while preserving the bank balance.

  • Best forDevelopers building freelancer bookkeeping products, small-business accounting apps and bank-register interfaces.

Included views

4 views
  • Overview

    Compare business spending, sales against monthly goals and unpaid or paid invoices. Two bank cards show bank and book balances separately, with shortcuts to their registers.

  • Sales

    Explore cash-basis sales or the selected accounting basis, monthly goals, payments to match and receivables by age. Filter invoices or clients and match an open invoice to a local deposit.

  • Expenses

    Inspect spending categories and comparisons, missing receipts and card spends not yet recorded in the books. Switch between expense rows and category analysis for the shared report period.

  • Banking

    Review each account's statement lines, recorded entries and uncleared items. Match or record a line and inspect the reconciliation between the bank total and the amount in Prismbook.

Animations and interactions

  • Sales inside their monthly targets

    Rounded graphite columns grow inside taller hatched goal capsules. Selection brackets, attached tooltips and Goals, Overview or Cash flow lenses keep each amount and target inspectable.

  • A deposit-to-invoice matching workflow

    Preview the exact effects of matching a deposit to an open invoice, then confirm locally. Unpaid and paid cards, sales, register counts and the recorded entry update together, with Undo.

  • Bank and book balances stay separate

    Two account registers distinguish lines to review, recorded movements and uncleared entries. The reconciliation explains bank minus unreviewed lines plus uncleared entries rather than merging balances.

  • Shared accounting periods and evidence

    Expense categories, receipt flags, invoice filters and goal editing follow the same model and report controls. Local CSV exports use the displayed records; cash and accrual views are explicitly distinguished.

  • Choreographed views and accessible controls

    The report heading, metric tiles, invoice cards and bank panels assemble in stages. Graphite columns grow inside their striped targets on each view visit. Phone layouts, keyboard navigation and initial or late reduced-motion preferences are supported; state stays shared across all four views.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

Demo data and what to connect

A fictional studio's bookkeeping data lives in browser memory. Matching, invoices, bank registers, recording and exports are local demonstrations; no bank feed, accounting platform, payment provider, backend or persistence is connected. Reload or Reset restores the seed.

  • IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
  • Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

What’s in the ZIP

  • Complete Next.js project
  • 4 animated views
  • Source files and project assets
  • README with setup and customization
  • LICENSE.md

Stack and requirements

  • StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Lucide icons
  • FontsFigtree
  • RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

Explore the source files
prismbook/
    • globals.css
    • layout.tsx
    • page.tsx
      • SalesChart.tsx
    • App.tsx
    • motion.tsx
    • dates.ts
    • engine.ts
    • invariants.ts
    • model.ts
    • money.ts
    • reduced-motion.ts
    • seed.ts
    • selectors.ts
    • store.tsx
    • use-media.ts
    • selftest.ts
  • .gitignore
  • LICENSE.md
  • next.config.ts
  • package-lock.json
  • package.json
  • postcss.config.mjs
  • README.md
  • tsconfig.json

Price, license and delivery

  • Price$9 USD, one-time payment. No subscription or renewal.
  • TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
  • LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
  • DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
  • RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
  • Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.

$9one-time

USD · Tax included

Buy · $9