PyColorsUI

Getting Started

Learn how to set up PyColors UI and start building modern interfaces using a documentation-first design system.

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
npm install tailwindcss class-variance-authority

What is PyColors UI?

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
  1. Getting Started
  2. Why PyColors UI?
  3. Design System
  4. UI Components
  5. Patterns

Next steps

Why PyColors UI?

Philosophy, trade-offs, and design principles.

UI components

Reusable primitives built on shadcn/ui.

Why PyColors UI?

Understand the philosophy, trade-offs, and principles behind PyColors UI.

On this page

Quick startWhat is PyColors UI?Recommended reading orderNext steps