Patterns
Opinionated, production-ready feature blocks built from PyColors UI primitives.
Patterns are reusable product-level blocks.
They go beyond single components and show how real SaaS features are built:
- composition of primitives
- UX rules and decision points
- states + feedback
- accessibility constraints
- copy/paste-ready examples
Patterns are intentionally opinionated.
How Patterns differ from other sections
UI Components
- Single primitive
- Stateless
- Token-driven
- Reusable everywhere
Guides
- Explanations and principles
- Composition rules
- “How to think” and avoid mistakes
Patterns
- Feature-level building blocks
- UI + behavior + state model
- Real SaaS flows (tables, overlays, mutations)
- Copy/paste implementations
Available patterns
Data Table Pattern
A SaaS-ready table layout: states, filtering, pagination, and row actions.
Overlays Pattern
Choose the right overlay (Dropdown vs Dialog vs Sheet) with UX + a11y rules.
Async Actions Pattern
Mutation UX: toasts, optimistic UI, retry/undo, and error copy guidelines.
When to use Patterns
Use Patterns when:
- you’re building “real features”, not just UI screens
- you need consistency across multiple pages
- you want predictable states and feedback
- accessibility and UX rules matter
Patterns help you ship faster without shipping sloppy.