Back to Dictionary
Empty & Error States
●○○Ready to Use
No Search Results Animation
An animation (often a magnifying glass looking back and forth) that plays when a search query returns zero results, softening the frustrating dead end.
Live Demo
Type something to search
What It Is
An animation (often a magnifying glass looking back and forth) that plays when a search query returns zero results, softening the frustrating dead end.
✓When to Use
- Global command palettes
- E-commerce search returning nothing
- Directory queries
✕When NOT to Use
- As a replacement for helpful "Did you mean X?" text
Configuration Tips
- 01Animate the icon gently rotating left and right, pausing in between
- 02Keep it visually distinct from a 404 page
You've Seen It In
RaycastAlgolia SearchStripe Docs Search
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Add an empty search state where a magnifying glass icon gently looks left and right.
Code Example (Tailwind CSS)
export function NoSearchResultsDemo() {}