search

Find UI patterns for hero sections, pricing tables, features, and more.

tl;dr The search tool finds UI patterns in Popmelt's catalog. Search for "hero", "pricing", or "features" to get pattern IDs you can fetch with the use tool.

What it does

The search tool queries Popmelt's UI pattern library and returns matching patterns based on your query. Use the results to find pattern IDs for the use tool.

Parameters

ParameterTypeRequiredDescription
querystringNoSearch query (e.g., "pricing", "hero", "faq"). Short noun phrases work best.
typestringNoSearch target. Currently only "pattern" is supported.
clientToolstringNoClient platform invoking this tool

What you get back

A list of matching patterns with their IDs, names, categories, and descriptions. Use the pattern ID with the use tool to fetch the full pattern.

Examples

Search by category: search { query: "pricing" } or search { query: "hero" } or search { query: "features" }

Browse all patterns: search { type: "pattern" }

Natural language

  • "Find pricing section patterns" → search { query: "pricing" }
  • "Search for hero layouts" → search { query: "hero" }
  • "What patterns do you have?" → search { type: "pattern" }

Pattern categories

CategoryQueryExamples
Hero sections"hero"hero-centered, hero-split, hero-gradient
Feature sections"features"features-three-column, features-grid
Pricing tables"pricing"pricing-three-tier, pricing-comparison
Call to action"cta"cta-centered, cta-email
Navigation"navbar", "footer"navbar-simple, footer-four-column
Social proof"testimonials"testimonials-grid, testimonials-carousel
FAQs"faq"faq-accordion, faq-two-column
Other"team", "stats", "logos", "contact"Various layouts

Search tips

Use short queries : Single words or short noun phrases work best. search { query: "pricing" } beats search { query: "pricing section with three tiers" }.

Browse then filter : Start broad with search { type: "pattern" }, then narrow to a category.

Workflow

Building a landing page:

  1. Search for patterns: search { query: "hero" }
  2. Pick one from results
  3. Fetch it: use { type: "pattern", name: "hero-centered" }
  4. Repeat for other sections (features, pricing, CTA, footer)

Your AI handles this workflow automatically when you describe what you're building.

Common questions

What patterns are free?

All patterns in the public library are free. The entire pattern library is available on the free tier.

How do patterns work with taste models?

Search returns pattern structure only. When you use a pattern, your AI applies your active taste model's tokens to style it.

Can I create custom patterns?

Custom patterns are coming soon. For now, describe custom sections to your AI and it will generate them.

Better prototypes with less prompting

Start creating