Home / Snippets / UI Components /

No results

Search miss UI: dashed “empty set” glyph, echoed query chip, and escape hatches to clear filters.

No snippets match

Try a shorter keyword or remove stacked filters — the catalog is large but picky.

q: clip-path chevron

Clear filters Browse all

Widely Supported

uino-js

Quick implementation

.no-results-demo { width: min(42rem, 100%); margin-inline: auto; }
.nr-icon {
  border: 2px dashed var(--card-border);
  border-radius: 50%;
}
.nr-icon::before,
.nr-icon::after {
  content: "";
  position: absolute;
  background: var(--muted);
  /* X mark */
}

Prompt this to your LLM

Echo query in a chip; never blame the user.

Create a “no results” panel.

Use .no-results-demo and .no-results-card.
CSS-only circular icon with X, title, supporting text, monospace query chip, two text links.
region + labelledby for accessibility.

Return HTML + CSS.

Why this matters in 2026

Faceted search grows dense; zero-hit states should teach users how to recover, not dead-end them.

The logic

Showing the active query prevents “but I typed that” support tickets; links should map to real router actions in production.

Accessibility & performance

Icon is decorative; the heading explains the situation. No images keeps LCP tiny.