Skip to content
FreeProduction-shapedBack to Starters

Validate your SaaS surface first.Wire the business later.

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 so you can move fast without backend overhead.

Next.js App RouterTailwind v4PyColors UIMock data · No backendReal screens + UX contracts
Why Starter Free exists

Starter Free is the entry point of the PyColors ecosystem. Its job is simple: help you validate the product surface before you spend time wiring authentication, billing, backend contracts, and deployment infrastructure.

Built on PyColors UI (already included)
@pycolors/ui

Starter Free ships with the PyColors UI primitives you’ve already 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 just components. A product-shaped SaaS surface you can run, inspect, and adapt.

/login + /register + /forgot
Auth UX

The mandatory entry point of any SaaS — with clean states and no provider lock-in.

  • Email + password surface
  • OAuth placeholder
  • Forgot password flow
  • States: loading / error / success

Why it matters: You get the UX contract now and keep full freedom on which auth provider to wire later.

/dashboard
First impression

The screen that makes your product feel credible on first load.

  • Header with product context
  • KPI placeholders
  • Primary next action
  • Empty / structured states

Why it matters: A good dashboard makes your SaaS feel real immediately, even before production wiring.

/projects
Core entity

A realistic CRUD surface for your main business object.

  • Table list
  • Create / edit / delete
  • Empty state
  • Row actions + dialogs

Why it matters: Every SaaS has a central entity. You can rename the domain later, but the pattern already works.

/settings
Maturity

The section that turns a mock product into something people trust.

  • Tabs: profile / organization / security
  • Password and session placeholders
  • Danger zone surface

Why it matters: Without structured settings, a product feels incomplete. This adds maturity from day one.

/billing
Monetization

Billing entrypoints and subscription surfaces — mocked by design, ready to wire.

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

Why it matters: You can validate how monetization fits the product before wiring Stripe.

/admin
B2B-ready

A team and roles surface that makes the starter feel company-ready.

  • Members table
  • Roles: owner / member
  • Invitations surface

Why it matters: B2B credibility matters. This proves you’re building beyond a solo dashboard toy.

Learn before you wire

Starter Free works even better when you connect it to the rest of the ecosystem.

Guides

Read focused SaaS guides covering dashboards, auth, billing, teams, admin systems, and product structure.

UI Patterns

Move from primitives to production-shaped product surfaces built for real SaaS workflows.

Examples

Explore real SaaS interface directions and what is already available today through Starter Free.

Mocked on purpose

Starter Free is frontend-first so you can validate structure, UX, and product credibility before infrastructure.

No backend required

Data is mocked so you can explore layouts, navigation, product states, and flows without setting up a database, API, or auth provider.

Mock dataNo DBNo API
Keep the surface, swap the wiring

The goal is progressive adoption: keep the screens and UX contracts, then plug your auth, billing, and data layer when you’re ready.

Provider-agnosticStripe-readyBackend-agnostic

Free validates UX. PRO wires the business.

Starter Free helps you move fast now. PRO is the upgrade path when auth, billing, backend, and deployment become your bottleneck.

FREEPRO (coming)

Start with a credible product surface today. Upgrade when you want the business wiring done for you.

No lock-inProgressive adoptionUpgrade-ready
CapabilityFREE (today)PRO (coming)
AuthenticationScreens + UX statesProviders + sessions + protected routes
BillingBilling UI + entrypointsStripe subscriptions + portal + webhooks
Data layerMock sourcesBackend foundations + production contracts
OrganizationsSingle-org UI surfaceMulti-tenant foundations
DeploymentLocal-firstEnv setup + CI/CD + launch checklist

PRO has its own page now. Roadmap tracks delivery, but /upgrade is the source of truth for the offer.

Quick start

Clone the repo, run the starter locally, and inspect real SaaS screens in minutes.

Fast path: run → open dashboard → inspect surfaces → adapt the product copy → 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 with the surface. Upgrade when wiring matters.

Open the demo, clone the repo, and build on a credible SaaS baseline now.

Real screensClear statesUpgrade path

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