Pattern Catalog
Browse patterns by category or framework scope. Each pattern is a complete, copy-pasteable solution.
By Framework Scope
Framework-Agnostic
These patterns work in any JavaScript/TypeScript project — vanilla, React, Vue, Node.js. No framework lock-in.
| Pattern | Description | Libraries |
|---|---|---|
| Common Snippets | One-liners: cn(), localStorage TTL, password validation, isDistinct, clipboard, download helpers | None (or lodash) |
| API Client — Core | ky instance with retry logic, error normalization, and production-safe messaging | ky |
| Observability | Lazy-loaded error tracking with pluggable backends (Sentry, custom API, console) | Optional @sentry/react |
React
These require React. Most work with any React setup — no UI library required.
| Pattern | Description | Libraries |
|---|---|---|
| Theme System | Dark / light / system theme with CSS class injection and localStorage persistence | React, Tailwind |
| Provider Composition | Compose global React providers at the app root without nesting hell | React |
| Auth Flow | Complete auth: Zustand store (4 storage modes), token refresh, API injection | React, Zustand, ky |
| Route Guards | Protect private routes, redirect unauthenticated users, preserve redirect target | TanStack Router |
| Rate-Limited Login | Client-side exponential backoff for auth forms | React, react-hook-form |
| RJSF Runtime Form | Render versioned JSON Schema forms with swappable RJSF themes | React, RJSF |
| Entity CRUD | Feature-based folder structure: list + sheet/drawer + mutations + cache invalidation | TanStack Query, react-hook-form, zod |
| Error Boundary System | Catch React errors + uncaught runtime errors, auto-reload on chunk-load failures | react-error-boundary |
| Page State Management | Sync page title and breadcrumbs from deep components up to the root layout header | Zustand |
| Accessible Animation | Framer Motion primitives that respect prefers-reduced-motion | Framer Motion |
| Multi-Layer Testing | Unit tests (Node) + browser tests (Chromium) + E2E with store reset utilities | Vitest, Playwright |
Ant Design
These are tightly coupled to Ant Design components and patterns.
| Pattern | Description | Libraries |
|---|---|---|
| Table with Synced Pagination | Table with URL-synced pagination, filter tags, and Excel export | Ant Design, lodash, xlsx |
| Responsive Form Grid | Declarative form layout with responsive columns and conditional field visibility | Ant Design |
| File Upload Pipeline | Upload wrapped for form usage with size validation | Ant Design |
| Dashboard Layout | Application shell with sidebar/navbar variants | Ant Design, Zustand |
By Domain
Getting Started
| Pattern | Scope | Description |
|---|---|---|
| Common Snippets | Framework-agnostic | One-liners and micro-patterns |
| Theme System | React | Dark / light / system theme |
| Provider Composition | React | Compose global providers cleanly |
Authentication
| Pattern | Scope | Description |
|---|---|---|
| Auth Flow | React | Complete auth stack with 4 storage modes |
| Route Guards | React | Protect private routes |
| Rate-Limited Login | React | Exponential backoff for auth forms |
Data Fetching
| Pattern | Scope | Description |
|---|---|---|
| API Client | Framework-agnostic | ky with retry, auth, and error normalization |
| Entity CRUD | React | Feature-based CRUD with sheets and mutations |
Tables & Lists
| Pattern | Scope | Description |
|---|---|---|
| Table with Synced Pagination | Ant Design | URL-synced pagination and Excel export |
Forms
| Pattern | Scope | Description |
|---|---|---|
| RJSF Runtime Form | React | Versioned JSON Schema runtime forms |
| Responsive Form Grid | Ant Design | Declarative responsive form layout |
| File Upload Pipeline | Ant Design | Upload with size validation |
Layout
| Pattern | Scope | Description |
|---|---|---|
| Dashboard Layout | Ant Design | Sidebar and navbar shell variants |
| Page State Management | React | Sync title and breadcrumbs to root layout |
Error Handling
| Pattern | Scope | Description |
|---|---|---|
| Error Boundary System | React | Catch errors, auto-reload on chunk-load |
| Observability | Framework-agnostic | Lazy-loaded error tracking |
Animation
| Pattern | Scope | Description |
|---|---|---|
| Accessible Animation | React | Framer Motion with reduced-motion support |
Testing
| Pattern | Scope | Description |
|---|---|---|
| Multi-Layer Testing | React | Unit + browser + E2E testing strategy |
How to Use a Pattern
- Pick by scope — Are you using Ant Design? Start with the Ant Design section. Building from scratch? Check Framework-Agnostic or React.
- Read the pattern page — Understand the problem it solves and what libraries it requires.
- Copy the files into your project (we recommend
src/lib/patterns/<name>/). - Wire them up following the "Usage" section.
- Adapt as needed — the code is yours.
Contributing a Pattern
See the homepage for instructions on adding new patterns.