shadcn.io is not affiliated with official shadcn/ui
Directory Blog Block for Vue
A map blog's A to Z index as a framed command palette: twenty-four posts grouped by the letter they start with, a filter field, arrow keys, a count and key hints at the foot.
Installation
Overview
An alphabetical post index for Vue with Ark UI, written for Atlasbook, a map lovers' blog. A split: at the start a short header and a polite line naming the last post opened; at the end, behind a divider, a framed command palette that lists twenty-four posts in groups by the letter their title starts with, only letters that have a post. Typing filters the titles, ignoring case and accents; the arrow keys move through the list, Enter opens the highlighted post and Escape clears the field. The foot counts what shows ("5 of 24 posts") and prints the keys. The palette keeps one height whatever you type. On a phone the palette comes straight after the header, and the key hints, which need a keyboard, are hidden. Opening a post records it in the line at the start, because a demo has nowhere to go; wire open to your router. It's built from Command, Kbd and Guides, with CSS for the entrance. For blogs, docs and archives with more posts than a menu can hold.
FAQ
How do I add my own posts?
Edit POSTS at the top of the file: an id, a title and the reading time in minutes. The list is sorted A to Z by title, the groups are the first letters that occur, and the count in the foot is derived, so nothing else needs touching. Twenty-four posts fill the palette about one and a half times; it scrolls inside its fixed height.
What does Enter do?
It opens the highlighted post, which here means the line at the start says "Opened: …", since a block with no router has nowhere to go. Replace open (or the onSelect of each item) with your router's navigation, or turn each item into a link. Clicking an item does the same as Enter.
How does the filter work, and does the palette jump?
The field matches the typed text anywhere in a title, ignoring case and accents, and groups with no match disappear. The palette has a fixed height and scrolls inside it, so filtering never moves the block; the count in the foot is a polite status ("5 of 24 posts") and an empty result says "No posts match." The list is an Ark collection: the field's text filters it and the items are grouped by letter.
How does it work with a keyboard and a screen reader?
The field is a combobox over a list: focus stays in the field, Up and Down move the highlight, Enter opens and Escape clears the typed text. Groups are labelled by their letter. The foot's count and the opened-post line are polite statuses. The palette does not take focus when the page loads.