Skip to content
PyColorsUI
v1.0.6 · stable baselineDocs-firstGitHub

A minimal UI systembuilt to ship SaaS.

PyColors UI is a documentation-first design system built on semantic tokens and Radix primitives — including advanced interactions and data UI foundations for real product screens.

This is the foundation powering Templates and SaaS Starters.

Explore docsBrowse componentsSee Starter Free
Current version
v1.0.6
Docs format
Preview → Usage → Code → Props
Release cadence
Weekly releases
Tokens-firstRadix primitivesAccessible by defaultProduct states included
Getting startedComponentsChangelogRoadmapOpen source
@pycolors/uiOpen source

Production-ready.

A stable UI baseline for modern SaaS: documented components, predictable APIs, and real product patterns — already powering Starter Free.

  • Actively maintained with predictable weekly releases
  • Stable production baseline for real SaaS products
@pycolors/ui npm version@pycolors/ui npm downloads@pycolors/ui license
Open source · versioned · shipped weekly
Used by Starter Free
See the UI in real product screens

Starter Free lets you evaluate PyColors UI inside a complete SaaS surface: auth UX, dashboard, tables, settings, billing entrypoints, admin screens.

Open Starter FreeLive demo

Upgrade when wiring becomes the bottleneck.

What you can ship with this UI

Not “components”. Real product surfaces users expect on day one.

Auth screens
SaaS baseline

Login / register / forgot flows with clean states (loading, error, success) and predictable inputs.

See in Starter Free
CRUD + tables
Data UI

Table primitives, pagination, empty/loading states, plus dialogs and sheets for create/edit flows.

Open Table docs
Settings surface
Credibility

Profile, org, security, sessions, and a real “danger zone” layout pattern users expect.

View in demo
Billing entrypoints
Monetization

Upgrade/plan surfaces and subscription placeholders designed to wire to Stripe later.

Read concept
Admin / members
B2B-ready

Member list, role badges, and invitation surfaces — the B2B proof most starters skip.

See admin surface
Feedback & states
Product polish

Toasts, alerts, skeletons, and empty states that keep UX consistent across the whole product.

Open Toast docs

Highlights

A focused baseline for building product UIs with predictable patterns.

Advanced interactions included

Dialog, sheet, dropdown menus, tabs, and toasts — accessible Radix primitives with consistent API and docs.

Data UI foundations

Tables, pagination, empty states, and skeletons — the baseline you need for dashboards and CRUD screens.

Docs that don’t waste time

Preview → Usage → Code → Props + practical guides for forms and async UI states.

Quick start

Install the packages, import tokens, then copy components from the docs. Keep it fast.

Fast path: install → open docs → copy/paste a component → ship a screen.

Node 18+PNPM recommendedTokens-firstCopy/paste workflow
Start from a componentSee it in a starter
terminal
Repo
pnpm add @pycolors/ui @pycolors/tokens

# Next.js (App Router)
# app/globals.css
@import "@pycolors/tokens/tokens.css";

pnpm dev
Then open /docs/ui and copy a component.

What’s in v1.0.6

Advanced interactions + data UI foundations — documented, consistent, extensible.

See all components
Dialog

Accessible modal primitives built on Radix UI.

Stable baseline
Open docs →
Sheet

Slide-over panels for filters, actions, and contextual UI.

Stable baseline
Open docs →
Dropdown Menu

Groups, submenus, checkboxes/radios, shortcuts.

Stable baseline
Open docs →
Tabs

Segmented navigation with size variants and theming.

Stable baseline
Open docs →
Toast

Minimal, accessible notifications with variants.

Stable baseline
Open docs →
Table

Composable data table primitives + empty/loading states.

Stable baseline
Open docs →
Pagination

Stateless pagination UI primitives (UI-only).

Stable baseline
Open docs →
Skeleton

Loading placeholders that preserve layout.

Stable baseline
Open docs →
Empty State

Clear empty UI with optional actions and guidance.

Stable baseline
Open docs →
Password Input

Accessible show/hide toggle for auth flows.

Stable baseline
Open docs →
Next up: Blocks library + premium Templates — tracked in Roadmap.

Start here

Build your first screen with PyColors UI — then validate the full SaaS surface with Starter Free.

Public roadmapChangelog updatesDocs-first
Read the docsOpen Starter Free

Building in public. Shipping weekly.