Getting Started

PyColors UI is a modern, extensible design system and UI toolkit built with Next.js, Tailwind CSS, shadcn/ui, and Fumadocs.

It provides a clean, scalable foundation for building SaaS applications, dashboards, documentation sites, and marketing pages — with a strong focus on accessibility, consistency, and long-term maintainability.

If you want to understand the philosophy behind these choices, read Why PyColors UI?.

Quick start

npx create-next-app@latest my-app --ts --tailwind --app
cd my-app

pnpm add @pycolors/ui @pycolors/tokens
pnpm add -D @pycolors/eslint-config eslint @eslint/js eslint-config-prettier typescript-eslint globals

# app/globals.css
# @import "@pycolors/tokens/tokens.css";

pnpm dev

pnpm add @pycolors/ui @pycolors/tokens
pnpm add -D @pycolors/eslint-config eslint @eslint/js eslint-config-prettier typescript-eslint globals

How PyColors UI is structured

PyColors UI is built around three core principles:

1. Unified design language via semantic tokens
2. Composable components you fully own
3. Documentation-first workflow

These principles define how components, guides, and patterns are organized across the system.

Recommended reading order

1. Getting Started
2. Why PyColors UI?
3. Design System (tokens, colors, typography)
4. UI Components (primitives)
5. Guides & Patterns (real product usage)

Next steps