Blog 95 - Blog search with instant results

Pro

Blog search section with a large search field, live result count, highlighted matches in titles and excerpts, a slash keyboard shortcut, and an empty state with suggested topics.

Shadcn Blog 95 block

Component data

ID
blog95
Access
pro
Created
Oct 13, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Blog 95 block design & features

Blog95 is a searchable article index built with shadcn/ui InputGroup, Kbd, Empty, and Button components. A left-aligned heading and description sit above a wide search field with a magnifier icon and a slash key hint. Below the field a live count reads either the total number of articles or the number of results for the current phrase, followed by a ruled list of up to twelve posts. Each row has a small square thumbnail, a linked title, a one-line excerpt, and a category, date, and read time line.

Typing filters the list immediately across titles, excerpts, categories, and tags, and every match is marked with a soft muted highlight inside the title and excerpt. Pressing the slash key anywhere on the page focuses the field, Escape clears it, and a clear button replaces the key hint once there is a query. When nothing matches, a dashed empty state explains the miss and offers outline buttons for popular searches that refill the field in one click. Rows stay static on hover apart from the title underline and a slight thumbnail dim.

This is a functional, utility-first take on a blog index, closer to a documentation search than a magazine layout. Complexity is moderate and entirely code-driven: content needs only the usual post fields, and the filtering, highlighting, and shortcut work client side without a search service. The count line is announced to screen readers as results change.

On small screens the shortcut hint is hidden and the field spans the full width.