Creating Patterns
Define UI patterns that capture design decisions and usage guidelines.
What is a Pattern? #
A pattern represents a reusable UI solution that solves a common design problem. Examples include:
- Login Flow – The complete authentication experience
- Data Table – Displaying tabular data with sorting and filtering
- Confirmation Dialog – Destructive action confirmations
- Search with Filters – Search interface with faceted filtering
Creating a Pattern in UiPool #
To create a pattern in your UiPool workspace:
- Navigate to Patterns
- Click New Pattern
- Fill in the pattern details:
- Name – Human-readable pattern name
- Slug – URL-friendly ID (used in annotations)
- Category – Group patterns by type (Forms, Navigation, etc.)
- Summary – Brief description of the pattern
- Add usage guidelines (when to use / when not to use)
- Save the pattern
Pattern Fields #
| Field | Required | Description |
|---|---|---|
| Name | Yes | Display name for the pattern |
| Slug | Yes | Unique identifier (kebab-case) |
| Category | Yes | Pattern grouping |
| Summary | No | Short description |
| When to Use | No | List of appropriate use cases |
| When Not to Use | No | Anti-patterns and alternatives |
| Anatomy | No | Component parts of the pattern |
| Rules | No | Guidelines with severity levels |
| Deprecated | No | Mark pattern as deprecated |
Annotating Your Code #
Once you've created a pattern, annotate your code to track usage:
// uipool-pattern: login-flow
export function LoginPage() {
// Your login implementation
} The annotation ID must match the pattern's slug exactly.