Overview

The ⌘K-sv cmdk package versionA is a port of cmdk to Svelte. It is a command menu Svelte component that can also be used as an accessible combobox. The component automatically filters and sorts rendered items. It provides various features and customization options for styling and functionality.

Features

Command [cmdk-root]: Renders the command menu inline or in a dialog. It can be controlled by binding to the value prop. Custom filter functions can be provided for ranking items. Filtering and sorting can be disabled entirely. Arrow keys can wrap around the list.
Dialog [cmdk-dialog] [cmdk-overlay]: Composes Bits UI's Dialog component. The overlay is always rendered. Props are forwarded to the Command component. The dialog can be controlled by binding to the open prop. Portalling can be enabled to specify a specific HTML element for the Dialog to portal into.
Input [cmdk-input]: Forwards all props to the underlying input element. Can be controlled as a normal input by binding to its value prop.
List [cmdk-list]: Contains items and groups. Height animation can be achieved using the --cmdk-list-height CSS variable. Item scrolling into view can be enhanced near the edges of the viewport using scroll-padding.
Item [cmdk-item] [data-disabled?] [data-selected?]: Becomes active on pointer enter. Unique values should be provided for each item, which will be automatically inferred from the .textContent if not provided. The alwaysRender prop can be used to force rendering of an item regardless of filtering.
Group [cmdk-group] [hidden?]: Groups items together and can be given a heading. Groups will not be removed from the DOM, but the hidden attribute can be applied to hide them from view. The alwaysRender prop can be used to force a group to always be visible.
Separator [cmdk-separator]: Visible when the search query is empty or alwaysRender is true, and hidden otherwise.
Empty [cmdk-empty]: Automatically renders when there are no results for the search query.
Loading [cmdk-loading]: Renders a loading indicator while loading asynchronous items.

Huntabyte

Bits UI

Cmdk Sv

Modern Saas

Shadcn Svelte

Vaul Svelte