Getting Started
Choose your PyColors starting point, follow its setup guide, and verify your first working screen.
Choose your starting pointLink to section
Start with the product that matches what you need to build today. Each link below opens its setup guide, with the commands and configuration for that product.
Start with one path
You do not need to install every PyColors product. Use UI in an existing app, Starter Free to evaluate a SaaS surface, a template for a landing page, or Starter Pro when you need the backend foundation.
Before you beginLink to section
- PyColors UI: have a React app with Tailwind CSS v4 and a global stylesheet. The installation guide covers the package requirements and CSS setup.
- Starter Free: have Git, Node.js, and pnpm. Clone the public starter using its installation guide. Its auth, billing, and data flows are mocked; you do not need production service credentials to explore them.
- NA-AI Landing: download and unzip your purchased template, then follow the setup guide. The base template is frontend-only.
- Starter Pro: download and unzip your purchased starter, then follow its local setup sequence. This path includes environment and database configuration.
For a starter or template, use the Node.js and package-manager versions declared by the project you downloaded. Run its commands from that project's root. For UI, run the install command inside the app that will consume the package.
Verify your first resultLink to section
Complete the check for your chosen path before changing the project structure.
PyColors UILink to section
Follow Installation to install the packages, load token CSS, register the package with Tailwind, and render the example card.
Your first result is a styled card and link in your own app. Confirm light and dark styles, visible keyboard focus, and a passing app build. Then use usage patterns to compose your next screen, or migration guidance when replacing existing UI.
Starter FreeLink to section
Follow Installation, start the local server, and
open /dashboard and /projects. Try a project action and navigate to settings.
Your first result is a navigable SaaS demo with mock data. Continue with the first-run walkthrough, then adapt one product surface. These screens do not establish real accounts, payments, or persistent backend data.
NA-AI LandingLink to section
Follow Setup to run the downloaded template. Confirm the homepage renders, check its light and dark modes, and run the documented production build.
Your first result is a local landing page that builds successfully. Continue with Customization to update your branding and content.
Starter ProLink to section
Follow Getting started in order: unpack, install, configure the local environment, set up the database, and start the app. Use that guide's foundation checks for sign-in and protected routes before customizing the product.
Your first result is a working local foundation. Running locally is one step toward launch; follow the product's separate configuration and validation guides before relying on authentication, billing, or delivery in production.
If setup does not workLink to section
- Components render without styling: check the global CSS and package scan path. Installing the JavaScript package alone does not generate its Tailwind styles.
- Dependency or runtime errors: compare your local Node.js and pnpm versions with the downloaded project's manifest before reinstalling. Use the troubleshooting section of your product's setup guide.
- Starter Free does not save real users or payments: this is its frontend-only boundary. Read the upgrade guide when backend wiring becomes your next step.
Once your first result works, follow the next guide for that product. You can return here when a different PyColors product matches the next thing you need to build.