See the components become a product.
Explore a dashboard, project workflows and account screens built with PyColors UI. Try the runnable Starter Free demo, inspect the source and bring the parts you need into your own app.
Six screens · Full source code · Demo data · No account required
One application. Six everyday workflows.
Select a screen to see the layout, understand its scope and open the corresponding demo.
PyColors Starter Free
Open source · MIT
Make the overview useful.
Sample metrics, project activity and clear next actions inside a responsive application shell.
- Cards with a clear information hierarchy
- Shared desktop and mobile navigation
Metrics and activity use demonstration data.
Light-theme captures with sample data. Authentication, payments and permissions are mocked.
Explore Starter FreeFind the pieces behind the interface.
Explore related source-copy blocks and the primitives you can compose in your own product.
Records & actions
Organize data, expose row actions and keep editing tasks in context.
Projects · Admin
Forms & account
Compose labelled fields, clear actions and feedback for account flows.
Auth · Settings
Plans & billing
Give plans, payment details and invoices a consistent visual hierarchy.
Take the example into your editor.
Run the public Starter Free repository locally. No database or API keys are needed to explore the included demo flows.
Run the starter
Use the Node.js and pnpm versions declared in the repository’s package.json.
Adapt a screen
Replace sample content, adjust the components and try your own theme.
Connect your services
Add real authentication, persistence and payment integrations when your product needs them.
git clone https://github.com/pycolors-io/pycolors-starter-free.gitcd pycolors-starter-freepnpm installpnpm devKeep building from here.
Bring a section into an existing app, shape your theme or start connecting the business layer.
Choose your building blocks
Copy focused sections into your existing app and adapt the source to your workflow.
Make the theme your own
Explore semantic colors, light and dark appearances, and typography for your interface.
Ready to connect the business layer?
Explore the authentication, Stripe billing, protected routes and database foundations in Starter Pro. Review the scope before choosing your starting point.
Compare Free and ProOne-time purchase. Configure the integrations for your product.