shadcn.io is not affiliated with official shadcn/ui
Search Changelog Block for Ark UI
A docs search tool's eight releases behind a search band: type to filter, matched words marked, a slash key that focuses the field, a live count and an empty state with a clear button, on a height that never changes.
Installation
Overview
A searchable release list for React with Ark UI, written for Findlog, a fictional docs search tool. A start-aligned header sits over a ruled band with a full-width search field, a / key hint and a live count, and under it eight release rows from rail to rail. Typing keeps the releases whose title, sentence, version or kind holds the words, ignoring case and accents, and marks the matches in the title and the sentence; Clear, or Escape, brings back the full list, and an empty state offers a Clear search button. Pressing / anywhere on the page, outside a field, focuses the search. An unseen copy of all eight releases sits in the same grid cell, so the block keeps its height and the page doesn't jump while you type. It's built from Input Group, Kbd, Search Highlight Text, Empty, Badge, Button and Guides, with your theme's tokens for every colour. The releases are example data.
FAQ
How do I change the releases?
Edit RELEASES at the top of the file, newest first: each has a version, a date as an ISO day, a title, a summary and a kind. The count line, the empty state and the placeholder read from the array. To search more fields, add them to the string in matches.
What does the search look at?
The title, the sentence, the version and the kind's name, ignoring case and accents, matching the typed text anywhere in them, so "token" finds a release whose sentence mentions tokens and "v2.8" finds two releases. Matched words are marked in the title and the sentence in a low-strength tint of your foreground colour.
How does the slash shortcut work?
While the block is on the page, / focuses the field, unless you are already typing in a field or an editor. Escape inside the field clears it and keeps focus there. The field announces its shortcut (aria-keyshortcuts), and the key hint is hidden on a phone, where there is no keyboard. The count under the field is a polite status ("3 of 8 releases"), so a screen reader hears the result of each change.
Does the page jump while I type?
No. The results and an unseen copy of all eight releases share one grid cell, so the cell is as tall as the full list whatever you type. With no match the empty state names the typed words and offers a Clear search button, which also returns focus to the field. A layout check will report the rows changing as the list narrows; that is the search working.