shadcn.io is not affiliated with official shadcn/ui
Command Palette Footer Block for Vue
A centred footer for a notes app with a search-or-jump button and Command K shortcut that open a palette listing the footer's own links by group.
Installation
Overview
A centred footer with a command palette for Vue with Ark UI. A first band holds the wordmark, one sentence and a button that looks like a search field, "Search or jump to…", with ⌘ K at its end on wider screens; the link groups (a nav labelled Footer) are centred in a second band and the copyright and policies in a third. The button, or Command K or Control K while the block is on the page, opens a palette in a dialog that lists every link of the footer by group, Legal included. Type to filter, pick one with the arrows and Enter, and the palette closes and moves focus to that link in the footer. The rails and top rule come from the Guides spine, every band's rule is drawn by Guides, and none is drawn under the legal row because a footer ends the page. It is built from Command, Dialog, Kbd, Button and Guides.
FAQ
How do I change the links?
Edit GROUPS and LEGAL at the top of the file: each link has a label and a value that is unique in the footer. The palette's entries are built from the same arrays, so the footer and the palette never disagree, and the groups are listed in order with Legal last. Give each link its real href where the file has href="#".
What does choosing a link do?
It closes the palette and moves keyboard focus to that link in the footer, with the theme's focus ring, so you can press Enter to follow it. The links are # placeholders; to navigate straight away, call your router's push in the selection handler instead and let the dialog close.
How does the shortcut work?
While the block is mounted, a keydown listener opens the palette on Command K or Control K and stops the browser's own handling. The hint reads "Ctrl K" in the markup and switches to "⌘ K" once the page knows it's a Mac, so server rendering and hydration agree. On a phone the hint is hidden and the button is full width.
How does it work with a keyboard and a screen reader?
The button is named "Search or jump to…" and announces its shortcut. The palette is a dialog with a labelled field and a list you move through with the Up and Down arrows; Enter jumps and Escape closes, returning focus to the button. Groups are labelled, and when nothing matches the palette says "No links match".