shadcn.io is not affiliated with official shadcn/ui
Searchable Timeline Block for Vue
A customer history of twelve events where a word is found rather than filtered: matches are marked, counted and stepped through with Enter, Previous and Next, and every event stays in a fixed-height scroll region.
Installation
Overview
Find a word in a long history without losing the history with this searchable timeline for Vue with Ark UI. It is written for Findspot, a fictional customer tool. A hairline frame with a plus mark on each corner holds a find field with a "/" key hint, a count that reads "1 of 5 matches for refund", and two icon buttons for the previous and the next match. Below it sits the customer's history as a vertical rail: twelve events from June to October, newest first, each with a round tile for its kind (plan, email, invoice, ticket, call, payment), a title, a date and a note. Typing marks the matching words with Search Highlight Text in titles and notes; every event stays, and the current match is outlined and scrolled into view inside the region. Enter and Shift+Enter step through the matches, Escape clears the field, and pressing "/" anywhere on the page focuses it. A word that matches nothing shows the empty state in the same height. It is built from Input Group, Kbd, Button, Empty and Search Highlight Text. For customer records, support histories and any log where the order matters as much as the match. The events are example data.
FAQ
How do I change the events?
Edit ENTRIES at the top of the file, newest first. Each event has an id, an ISO date at, a kind (an icon and a word), a title and a note. The match list, the count, the highlights and the status line are all derived from the query and those fields, so adding an event adds it to the search at once.
How does the matching work?
matchesOf() lower-cases the query and each event's title and note together and keeps the events that contain it. The highlighting uses the same rule, ignoring case and accents, so what is marked is what was counted. Step with Enter, Shift+Enter or the two buttons; both wrap around at the ends. Typing a new word starts again at the first match.
How does it scroll to the current match?
After each step or new word, one effect finds the event by a data attribute and scrolls the region itself to it. Only the region moves, never the page, and nothing scrolls on load. The current match also gets an outline and a tint, and a screen reader hears "current match" after its title.
What stays in the page, and how do I search real data?
Everything: the query and the step are local state and no request is made. For a short history keep the search in the browser as it is. For a long one, run the search on your server, return the events with the matching ranges and keep the stepping and highlighting here.
Is it accessible?
The field has a label and announces its "/" shortcut, the buttons are named "Previous match" and "Next match" and stay in the tab order, and the status line is a polite live region present from load that reads "Match 2 of 5" and the event's title. The visible count is hidden from screen readers so it is not read twice. The region can be reached with the keyboard.