How it works

Built for the way you work

Step 1

Browse the registry

Explore families of patterns organized by purpose — hero, pricing, testimonials, and more. Each entry includes live preview, responsive variants, and accessibility notes.

  • Search by intent, keyword, or family
  • Preview dark mode and responsive breakpoints
  • Machine-readable JSON API for agents

Step 2

Copy and customize

Grab the HTML, paste it into your project, and adjust Tailwind classes to match your brand. Every pattern uses standard utilities — no custom CSS required.

  • One-click copy for HTML, Astro, and Web Component
  • Live customization sliders for CSS properties
  • No framework lock-in — works everywhere

Step 3

Ship with confidence

Every pattern is tested for accessibility, responsive behavior, and dark mode. Quality gates ensure consistent output across your team.

  • WCAG 2.1 AA accessible
  • Responsive from mobile to ultra-wide
  • SSR-safe, zero client JavaScript