Skip to content
Starter FreeProduction-shapedFree entry point

Ship a credible SaaS UI fast. Validate the product before wiring the backend.

Starter Free gives you a production-shaped SaaS surface out of the box: auth UX, dashboard, CRUD screens, settings, billing entrypoints, and B2B member management — mocked by design so you can move fast without backend overhead.

Use it to validate the product surface now. Upgrade to Starter Pro when authentication, billing, and the business layer become the real bottleneck.

Designed for fast validationNo backend requiredUpgrade-ready when wiring matters
Next.js App RouterTailwind v4PyColors UIMock data · no backendReal screens and UX contracts
Starter Free preview
Starter Free dashboard preview
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
@pycolors/ui

Starter Free ships with the PyColors UI primitives you already publish: 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 · product-oriented
What you get

Not just components. A product-shaped SaaS surface.

Starter Free gives you a realistic product shell you can run, inspect, and adapt before backend wiring.

/login + /register + /forgot
Auth UX

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

  • Email and password surface
  • OAuth placeholder entrypoint
  • Forgot password flow
  • Loading, error, and success states

Why it matters: You validate the UX contract now and keep full freedom on how you wire auth later.

/dashboard
First impression

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

  • Header with product context
  • KPI placeholders
  • Primary next actions
  • Structured empty states

Why it matters: A strong dashboard makes your SaaS feel real before backend work even starts.

/projects
Core entity

A realistic CRUD surface for your main business object.

  • Table list
  • Create, edit, delete
  • Empty state
  • Row actions and dialogs

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

/settings
Maturity

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

  • Profile, organization, security
  • Password and session placeholders
  • Danger zone surface

Why it matters: Without settings, a SaaS 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 and downgrade actions
  • Portal entrypoint placeholder
  • Subscription status surface

Why it matters: You can validate monetization UX before wiring Stripe.

/admin
B2B-ready

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

  • Members table
  • Owner and member roles
  • Invitation surface

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

Learn before you wire

Starter Free works even better when connected to the rest of the ecosystem

Use the free starter to validate product shape, then explore patterns, guides, and examples to make your next move obvious.

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

Validate structure and credibility before infrastructure

Starter Free is frontend-first so you can explore product, navigation, and UX contracts without setting up a database, API, or auth provider.

No backend required

Data is mocked so you can validate layouts, navigation, product states, and flows without backend setup.

Mock dataNo DBNo API
Keep the surface, change the wiring

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

Provider-agnosticStripe-readyBackend-agnostic
Free vs Pro

Starter Free validates the surface. Starter Pro wires the business.

Starter Free helps you move fast now. Starter Pro is the upgrade path when auth, billing, backend, and launch readiness become your real bottleneck.

FreeStarter Pro

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

No lock-inProgressive adoptionUpgrade-ready
CapabilityStarter FreeStarter Pro
Product-shaped UI surfacesIncludedIncluded
Auth UX screens and statesIncludedIncluded + wired
Dashboard, CRUD, settings, adminIncludedIncluded + extended
Real auth providers and sessionsNoIncluded
Real Stripe billingNoIncluded
Webhooks and billing syncNoIncluded
Protected app architectureSurface onlyProduction-shaped
Best use caseValidate the product surfaceLaunch faster

Starter Free is the entry point. Starter Pro is the shortest path to a monetizable SaaS baseline.

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 only
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 becomes the bottleneck.

Open the demo, clone the repo, and build on a credible SaaS baseline now. Upgrade to Starter Pro when you want auth, billing, and the business layer already handled.

Real screensClear statesUpgrade path
See live demo

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