search
Find UI patterns for hero sections, pricing tables, features, and more.
tl;dr The
searchtool finds UI patterns in Popmelt's catalog. Search for "hero", "pricing", or "features" to get pattern IDs you can fetch with theusetool.
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
| Parameter | Type | Required | Description |
|---|---|---|---|
query | string | No | Search query (e.g., "pricing", "hero", "faq"). Short noun phrases work best. |
type | string | No | Search target. Currently only "pattern" is supported. |
clientTool | string | No | Client 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
| Category | Query | Examples |
|---|---|---|
| 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:
- Search for patterns:
search { query: "hero" } - Pick one from results
- Fetch it:
use { type: "pattern", name: "hero-centered" } - 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.
Related
connect- Initialize session and set active modellist- Browse available taste modelsuse- Fetch full taste model or patterncreate- Create or update a taste modelsample- Extract tokens from a website- UI Patterns - Pattern library concept
- Building Landing Pages - End-to-end workflow
Better prototypes with less prompting
Start creating