Widget Patterns

65 documented patterns for lead-gen, CTAs, and interactive tooling.

Research-backed pattern catalog covering the conversion surfaces that B2B SaaS, fintech, DTC, and consumer brands actually use. Each pattern documented with description, variations, real-world examples with attribution, implementation notes, and brand archetype compatibility.

Documentation first, code second. The catalog teaches the design space; AI and humans handle the implementation. Component implementations follow in a future v2 workstream.

Visual representation of the 5 pattern categories: CTAs, lead capture, social proof, urgency, and interactive tooling

Five categories

Each category has its own README on GitHub with the full pattern list and structured documentation per pattern.

Components with live previews

A growing subset of components have interactive showcase pages. Browse the rendered variants, props API, and customization options.

How to use the catalog

For people working with Claude or other AI tools: paste the relevant pattern file into context, then ask the AI to implement using your stack. The pattern provides the reasoning; the AI handles the code.

For people building by hand: each pattern is a complete reference for that pattern family. Read the description, pick a variation, follow the implementation notes. Examples cite 3 to 7 real-world brands with attribution so you can study live implementations.

Each pattern also references which brand archetypes from the archetype system it fits naturally with. A Bold Confident brand uses different CTA patterns than an Editorial Restrained brand; the catalog captures those fit relationships.

Browse the full repoBack to Showcase