Svelte command menu blocks.

100 command menu (command palette) blocks for React, each one a different tool's menu: search, switchers, pickers, actions and key bindings, data inspectors, record lookups, forms and filters, deploys and schedules. The gallery sorts them into 16 groups: Search everything, Pages and docs, Inspect data, Switchers, Visual pickers, Actions and keys, Edit and insert, Look up records, Metrics and status, Filter and select, Switches and access, Play and preview, Compose and send, Capture and keep, Run and ship, Plan and schedule. They are built on the library's Command and CommandDialog components.

Start from Basic Command Menu for a plain palette of pages with shortcuts, and Global Search Command Menu for one input that searches several types at once. Use Recent Items Command Menu for recent items, Actions Command Menu for actions that carry a key, and Keyboard Shortcuts Command Menu for a keyboard-shortcut sheet.

Each block is a shell around a menu: the page is drawn behind it as a sketch, and the menu itself is the real Command. On load the Command is drawn open in place so the preview shows it, and the header field or Ctrl or ⌘ K opens the real CommandDialog with the same rows. The file's header comment lists which parts (the "in-place" state, the scrim, the Escape and blur effects) to drop in your app.

Nothing leaves the page. The rows are typed data, choosing one only changes the drawn page behind the menu and the status line says so. In REST Client Requests Command Menu Enter re-sends a request by showing Sending for a moment and then a typed status, and in Database Schema Explorer Command Menu Copy SELECT really copies a statement but nothing is run.

Keep the CommandDialog and open it from your own key handler: in Basic Command Menu an effect listens for the K key with Ctrl or Meta in the capture phase and sets the dialog open. In the block it only fires while focus is inside, so the site's own search owns the key. In your app attach the listener to the document, call preventDefault, and toggle the dialog's open state.

Replace the typed PAGES array with your routes, each with a label, a group and a keywords string, and turn the picked row into a router push in the select handler. The groups, the shortcut keys and the count in the foot are worked out from that array. In Basic Command Menu the shortcut keys are Alt plus a letter, read from the key code, while the menu is open.

The Command is set to shouldFilter false, so the block filters the rows itself: Basic Command Menu folds accents and case and tests the label and keywords. To search a server, keep shouldFilter false, debounce the input value, fetch results into state and render them as CommandItems. Global Search Command Menu shows the shape for groups of results with a Show all row.

Recent Items Command Menu keeps recents in state and moves an opened row to the top, with a last row that clears the list. Store that list in localStorage or on your server, keyed by user, and read it as the empty-input view. Typing then searches everything, recent rows first.

The Command carries an accessible label, the foot has a polite live region that says how many results there are once typing pauses, and an empty result says what to try. The letters you typed are marked in each match with SearchHighlightText. If you change the rows, keep the count line so a screen reader hears the number.

This page lists 100 of the category's 100 command menu blocks for Svelte. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The Svelte command menu blocks are the React ones ported to Svelte, on Ark UI's Svelte primitives. They keep the layout, the copy and the theme tokens, and install with shadcn-svelte (/r/svelte/command-menu-accounts.json).

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens. Svelte needs svelte @ark-ui/svelte lucide-svelte installed once, and the CLI fetches the components a block imports.

Open a block and copy its command: `shadcn-svelte@latest add` with the block's registry URL, such as /r/svelte/command-menu-accounts.json for Account Switcher Command Menu. Run the project setup once first, and the code is yours to edit.

The block's file and the components it imports, installed before it, each as its own registry item. Nothing else changes in your project.

Use the filters above the grid: 16 kinds of command menu block, led by run and ship (10), visual pickers (9), metrics and status (9) and switches and access (8), and sort by popular or name. A good first look: Account Switcher Command Menu, Actions Command Menu and AI Prompt Picker Command Menu. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a command menu block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the find, switch and pick and act and edit kinds.

Open its page and use the full-screen viewer (/view/command-menu/svelte/accounts) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each command menu block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the command menu blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 command menu blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a command menu block, read it with get_block and install it on your Svelte stack.

Pass `category: "command-menu"` to search_blocks to search only the 100 command menu blocks, or to list_blocks for the 16 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "command-menu", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.