Skip to content
FreeProduction-shapedBack to Starters

A production-shaped SaaS starteryou can run in minutes.

Starter Free gives you a credible SaaS surface out of the box: auth UX, dashboard, data screens, settings, billing entrypoints, and B2B member management — mocked by design and ready to wire when you are.

Next.js App RouterTailwind v4PyColors UIMock data · No backendReal screens + UX contracts
Built on PyColors UI (already included)
@pycolors/ui

Starter Free ships with the PyColors UI primitives you’ve published: buttons, cards, badges, dialogs, sheets, tabs, toasts, tables, pagination, skeletons, empty states, and an accessible password input.

@pycolors/ui npm version@pycolors/ui npm downloads@pycolors/ui license
Open source · versioned · shipped weekly

What you get

Not a list of tech. A product surface you can ship from — then wire later.

/login + /register + /forgot
Auth UX

The mandatory entry point for any SaaS — with clean states and no extra noise.

  • Email + password
  • OAuth (Google placeholder)
  • Forgot password flow
  • States: loading / error / success

Why it matters: Without auth, it’s not a SaaS. This gives you the UX contract you’ll wire to your provider later.

/dashboard
First impression

Immediate product credibility — the screen that proves it’s real-world.

  • Header (user + org)
  • KPI placeholders
  • Primary call to action
  • Intelligent empty state

Why it matters: This is where users decide if your product feels legit. The layout and states do the work.

/projects
Core entity

A placeholder business entity with full CRUD UI surface.

  • Table list
  • Create / edit / delete
  • Empty state: “Create your first…”
  • Simple permissions surface

Why it matters: Every SaaS has a central entity. You can rename it later — the pattern stays.

/settings
Maturity

The section that turns a demo into a product — structure included.

  • Tabs: Profile / Organization / Security
  • Password & sessions placeholders
  • Danger zone surface

Why it matters: A SaaS without settings feels fake. This sells maturity instantly.

/billing
Monetization

Billing entrypoints and subscription surface — mocked, but designed to wire to Stripe.

  • Current plan surface
  • Upgrade / downgrade actions
  • Portal entrypoint (mock)
  • Subscription status placeholders

Why it matters: Billing is non-negotiable for SaaS. You get the UI surface now, wiring later.

/admin (members)
B2B-ready

Team management UI surface for multi-user orgs.

  • Member management table
  • Roles: owner / member
  • Invitations surface

Why it matters: B2B readiness is a differentiator. This proves you’re not shipping a toy.

Mocked on purpose

Starter Free is frontend-only so you can evaluate UX and structure first.

No backend required

Data is mocked so you can explore flows, layouts, and states without infrastructure.

Mock dataNo DBNo API
Wire later without rewrites

Keep screens and UX contracts. Swap the data/auth/billing layers progressively when you’re ready.

Provider-readyStripe-readyBackend-agnostic

Upgrade to Pro when you scale

Free gets you shipping faster. Pro (planned) wires the foundation for production.

FREEPRO (planned)

Start with the product surface today, then upgrade when you want it wired and production-ready.

No lock-inProgressive adoptionUpgrade-ready
CapabilityFREE (today)PRO (planned)
AuthenticationAuth screens + UX states (mocked)Auth wired (Clerk/NextAuth/Supabase)
BillingBilling entrypoints (mocked)Stripe Checkout + Portal wired
OrganizationsSingle-org UI surfaceMulti-org + org switcher
Roles & permissionsBasic roles UIRBAC + advanced permissions
Data layerMock sourcesProduction data layer + API contracts
PackagingDemo-ready baselineProduction-ready upgrades + guidance
UI componentsCore PyColors UI primitivesAdvanced components

Pro isn’t public yet — roadmap is the source of truth.

Quick start

Clone the repo, run the starter locally, and explore real SaaS screens immediately.

Fast path: run → open dashboard → inspect patterns → wire later.

Next.js App RouterPNPMMock data (no backend)
terminal
GitHub
git clone https://github.com/pycolors-io/pycolors-starter-free.git
cd pycolors-starter-free
pnpm install
pnpm dev
Then open http://localhost:3000

Start shipping faster today.

Open the demo, clone the repo, and build on a credible SaaS surface — then wire your production foundation when ready.

Real screensClear statesUpgrade path

Follow the setup guide in the docs → /docs/saas-starter