SaaS · React
Freelancer invoicing
Site for an invoicing app for freelancers, with an invoice mock, payment reminders, plans and FAQ.
What you get
An editorial-style product site for an invoicing tool aimed at freelancers: an outstanding-invoices mock, features, a reminders split, three steps, monthly pricing, quotes and an FAQ. All content lives in src/site.ts.
Files
Exactly what is copied into a new project: 13 files, nothing generated.
Explorer 13
src/site.ts
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = { "brand": "Tallybook", "nav": [ { "label": "Features", "href": "#features" }, { "label": "Reminders", "href": "#reminders" }, { "label": "Pricing", "href": "#pricing" }, { "label": "FAQ", "href": "#faq" } ], "navCta": { "label": "Send an invoice", "href": "#start" }, "sections": [ { "kind": "hero", "variant": "editorial", "eyebrow": "Invoicing for freelancers", "title": "Get paid for the work you already did.", "text": "Tallybook turns tracked hours and expenses into a clean invoice, takes card and bank payments, and sends the polite follow-up so you don't have to.", "primary": { "label": "Send your first invoice", "href": "#start" }, "secondary": { "label": "How reminders work", "href": "#reminders" }, "visual": { "type": "mock", "title": "Outstanding · May 2026", "rows": [ { "label": "INV-0142 Harbor Street Studio", "value": "$3,480.00", "tone": "#047857" }, { "label": "INV-0141 Fenwick Bakery (logo refresh)", "value": "$1,250.00", "tone": "#b45309" }, { "label": "INV-0139 North Pier Films", "value": "$6,900.00", "tone": "#b91c1c" }, { "label": "INV-0138 Alma Rivera Coaching", "value": "$720.00", "tone": "#047857" } ], "footer": "1 overdue by 12 days · reminder scheduled for Monday 9:00" } }, { "kind": "stats", "items": [ { "value": "2 min", "label": "Typical time to send an invoice" }, { "value": "38", "label": "Currencies supported" }, { "value": "3", "label": "Automatic reminder steps" }, { "value": "0%", "label": "Tallybook fee on bank transfers" } ] }, { "kind": "features", "id": "features", "eyebrow": "What's inside", "title": "One place for hours, expenses and invoices", "columns": 2, "items": [ { "title": "Time tracking that becomes billing", "text": "Start a timer per project. When you invoice, unbilled hours are already there at your rate.", "icon": "clock" }, { "title": "Card and bank payments", "text": "Clients pay from the invoice link. You see the status change the moment money moves.", "icon": "bolt" }, { "title": "Expenses with receipts", "text": "Snap a receipt, tag the client, and re-bill it with or without markup.", "icon": "camera" }, { "title": "Tax-ready exports", "text": "Quarterly income and expense reports as CSV, ready for your accountant.", "icon": "book" } ] }, { "kind": "split", "id": "reminders", "eyebrow": "Reminders", "title": "The follow-up email you hate writing, written", "text": "Pick a tone once. Tallybook nudges three days before the due date, on the day, and a week after, then stops when the invoice is paid.", "bullets": [ "Edit each message or use ours", "Optional late fee added automatically", "Pause reminders for any client" ], "visual": { "type": "card", "tone": "#78350f", "title": "Friendly nudge · INV-0139", "lines": [ "Due 30 April, now 12 days late", "Pay link included", "Next reminder: Monday" ] } }, { "kind": "steps", "eyebrow": "Getting started", "title": "From signup to paid", "items": [ { "title": "Add your details once", "text": "Logo, tax ID, payment terms and bank details are saved for every invoice." }, { "title": "Bill hours or line items", "text": "Pull in tracked time, add fixed fees, and preview exactly what the client sees." }, { "title": "Send and get paid", "text": "Email the invoice link. Payments reconcile on their own." } ] }, { "kind": "pricing", "id": "pricing", "eyebrow": "Pricing", "title": "Pay for Tallybook, not per invoice", "text": "Card payments carry the processor's standard fee. Bank transfers carry none from us.", "plans": [ { "name": "Starter", "price": "$0", "period": "/month", "text": "Up to 3 active clients.", "features": [ "Unlimited invoices", "Card and bank payments", "Basic reminders" ], "cta": { "label": "Start free", "href": "#start" } }, { "name": "Freelancer", "price": "$9", "period": "/month", "text": "For full-time independents.", "features": [ "Unlimited clients", "Time tracking", "Custom reminder wording", "Expense re-billing" ], "featured": true, "cta": { "label": "Try it for 30 days", "href": "#start" } }, { "name": "Studio", "price": "$24", "period": "/month", "text": "For two to five people.", "features": [ "Everything in Freelancer", "Up to 5 seats", "Shared clients and rates", "Profit by project" ], "cta": { "label": "Set up a studio", "href": "#start" } } ] }, { "kind": "quotes", "eyebrow": "Freelancers on Tallybook", "title": "Fewer awkward emails", "items": [ { "quote": "The automatic reminder got me paid on an invoice I'd given up on.", "name": "Jonas W.", "role": "Freelance illustrator" }, { "quote": "My timer and my invoices finally agree with each other.", "name": "Rita O.", "role": "Web developer" }, { "quote": "My accountant asked what I'd changed. The quarterly export, that's what.", "name": "Sam D.", "role": "Copywriter" } ] }, { "kind": "faq", "id": "faq", "eyebrow": "FAQ", "title": "Common questions", "items": [ { "q": "Do my clients need an account?", "a": "No. They open a link, view the invoice and pay with a card or bank transfer." }, { "q": "Can I invoice in other currencies?", "a": "Yes, 38 of them. Reports convert to your home currency at the payment date's rate." }, { "q": "What happens to my data if I cancel?", "a": "You can export every invoice as PDF and all records as CSV before and after you cancel." } ] }, { "kind": "cta", "id": "start", "title": "Send one invoice and see how it feels", "text": "Free for your first three clients. Upgrade when you outgrow it.", "primary": { "label": "Create an invoice", "href": "#pricing" }, "secondary": { "label": "Questions first", "href": "#faq" } } ], "footer": { "text": "Invoices, reminders and payments for freelancers.", "columns": [ { "title": "Product", "links": [ "Invoicing", "Time tracking", "Expenses" ] }, { "title": "Help", "links": [ "Guides", "Contact support" ] } ], "legal": "© Tallybook. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Freelancer invoicing's files. The box is already started for you: finish “Start from Freelancer invoicing and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates
Error monitoring
Dark developer-focused site for an error tracking tool with a live issues mock, SDK steps and pricing.
Product analytics
Crisp site for a product analytics tool with a funnel mock, retention features, event pricing and FAQ.
- Featured
SaaS starter
Marketing pages, sign-in and sign-up screens, and an authenticated app area with a mocked session you replace with real auth.
Build on Freelancer invoicing
Create a free account, start from this template, and ask the AI agent to turn it into your app.