Start from a pattern. Keep ownership of the code.Reusable React sections for your application screens.
PyColors Blocks compose public PyColors UI primitives into application patterns. Choose navigation, records, settings, pricing, empty states or workspace members, then connect the pattern to your own product.
Choose a Block for your next screen
Each card opens the existing documentation, with an example, the canonical source location, supported behavior and integration guidance.
Responsive sidebar
An application shell with desktop navigation, a mobile Sheet and a consumer-owned router adapter. Keep your brand, navigation and page content in your application.
Data table
Search, filter, sort and paginate records with a clear path out of empty results. Reuse controlled query and page-size controls while keeping your data layer and row actions.
Settings panel
A controlled settings form with labelled fields, validation messages and submission feedback. Your application owns values, validation and persistence.
Pricing plans
Compare offers with clear prices, billing terms, features and consumer-owned actions. Request a billing-period change without handing over pricing or payment logic.
Empty state panel
Give an empty section a clear next step, from first use to no matching results. Keep content, native actions, state and focus under your application's control.
Workspace members
Present workspace members with readable role and status labels and native actions. Keep identities, permissions, member changes and focus under your application's control.
From an example to code you own
Copy one pattern into an existing application. You do not need to adopt a complete Starter to use a Block.
Configure the UI
Set up the public UI package, tokens and semantic styles in your application before copying a Block.
Step 1 of 3Copy the source
Open the Block guide and copy its complete source directory into a location your application owns. Keep local files together.
Step 2 of 3Connect and validate
Supply your own data, actions and routes. Run your tests and build, then check keyboard behavior, narrow layouts and both themes in your application.
Step 3 of 3
Source you control, not a managed dependency
Reuse the interface composition without handing over your application architecture or data layer.
Own the source and its updates
There is no Blocks npm package, Registry installer or CLI in this workflow. The copy lives in your application, and there are no automatic updates or synchronization. Review future canonical changes deliberately before adopting them.
Keep your application behavior
Blocks provide interface composition, not authentication, billing, data fetching or persistence. Those responsibilities stay with your application. The examples use consumer-owned content and do not connect a backend for you.
Need an application foundation instead?
Use Blocks when you want one pattern in an existing app. Explore Starter Free and Starter Pro when you need a broader starting point, and compare what each includes.