From 5819cf117a0a3ba233de2f3e7149b09dbeecadc7 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Mon, 23 Sep 2024 15:38:50 -0400
Subject: [PATCH] next: Command (#670)

---
 .../src/lib/bits/command/command-score.ts     |  174 +++
 .../src/lib/bits/command/command.svelte.ts    | 1169 +++++++++++++++++
 .../command/components/_command-label.svelte  |   32 +
 .../command/components/command-empty.svelte   |   35 +
 .../components/command-group-heading.svelte   |   33 +
 .../components/command-group-items.svelte     |   35 +
 .../command/components/command-group.svelte   |   37 +
 .../command/components/command-input.svelte   |   39 +
 .../command/components/command-item.svelte    |   53 +
 .../components/command-link-item.svelte       |   53 +
 .../command/components/command-list.svelte    |   35 +
 .../command/components/command-loading.svelte |   35 +
 .../components/command-separator.svelte       |   37 +
 .../components/command-viewport.svelte        |   32 +
 .../bits/command/components/command.svelte    |   65 +
 .../bits-ui/src/lib/bits/command/index.ts     |   27 +
 .../bits-ui/src/lib/bits/command/types.ts     |  194 +++
 .../bits-ui/src/lib/bits/command/utils.ts     |   30 +
 packages/bits-ui/src/lib/bits/index.ts        |    1 +
 .../link-preview-content-static.svelte        |    2 +-
 .../components/link-preview-content.svelte    |    2 +-
 .../menu/components/menu-radio-item.svelte    |    2 +-
 .../menubar/components/menubar-trigger.svelte |    2 +-
 .../bits/menubar/components/menubar.svelte    |    2 +-
 .../components/navigation-menu-item.svelte    |    2 +-
 .../components/navigation-menu-link.svelte    |    2 +-
 .../select/components/select-value.svelte     |    2 +-
 .../lib/bits/switch/components/switch.svelte  |    2 +-
 .../components/toggle-group-item.svelte       |    2 +-
 .../components/tooltip-content-static.svelte  |    2 +-
 .../tooltip/components/tooltip-content.svelte |    2 +-
 .../bits-ui/src/lib/internal/afterSleep.ts    |    3 +
 packages/bits-ui/src/lib/internal/dom.ts      |    9 +
 packages/bits-ui/src/lib/internal/kbd.ts      |    3 +
 packages/bits-ui/src/lib/types.ts             |    1 +
 sites/docs/content/components/command.md      |   61 +
 .../lib/components/demos/combobox-demo.svelte |    2 +-
 .../demos/command-demo-dialog.svelte          |  122 ++
 .../lib/components/demos/command-demo.svelte  |   84 ++
 .../lib/components/demos/dialog-demo.svelte   |    1 -
 sites/docs/src/lib/components/demos/index.ts  |    2 +
 .../examples/command/command-wrapper.svelte   |   17 +
 .../command/framer/framer-command.svelte      |  120 ++
 .../examples/command/framer/framer.pcss       |  268 ++++
 .../command/framer/icons/avatar.svelte        |    8 +
 .../command/framer/icons/badge.svelte         |    8 +
 .../command/framer/icons/button.svelte        |    8 +
 .../command/framer/icons/container.svelte     |    8 +
 .../examples/command/framer/icons/index.ts    |    8 +
 .../command/framer/icons/input.svelte         |    8 +
 .../command/framer/icons/radio.svelte         |    8 +
 .../command/framer/icons/search.svelte        |   14 +
 .../command/framer/icons/slider.svelte        |    8 +
 .../examples/command/icons/copied.svelte      |   15 +
 .../examples/command/icons/copy.svelte        |   14 +
 .../examples/command/icons/figma.svelte       |   10 +
 .../examples/command/icons/framer.svelte      |    6 +
 .../examples/command/icons/github.svelte      |    6 +
 .../examples/command/icons/index.ts           |   10 +
 .../examples/command/icons/linear.svelte      |   22 +
 .../examples/command/icons/raycast.svelte     |    8 +
 .../examples/command/icons/slack.svelte       |   34 +
 .../examples/command/icons/vercel.svelte      |    3 +
 .../examples/command/icons/youtube.svelte     |    7 +
 .../command/linear/icons/assign-to-me.svelte  |   13 +
 .../command/linear/icons/assign-to.svelte     |    5 +
 .../command/linear/icons/change-labels.svelte |    7 +
 .../linear/icons/change-priority.svelte       |    5 +
 .../command/linear/icons/change-status.svelte |   10 +
 .../examples/command/linear/icons/index.ts    |    7 +
 .../command/linear/icons/remove-label.svelte  |    7 +
 .../command/linear/icons/set-due-date.svelte  |    7 +
 .../command/linear/linear-command.svelte      |   82 ++
 .../examples/command/linear/linear.pcss       |  144 ++
 .../components/examples/command/logo.svelte   |   13 +
 .../command/raycast/icons/clipboard.svelte    |   11 +
 .../command/raycast/icons/finder.svelte       |    9 +
 .../command/raycast/icons/hammer.svelte       |   11 +
 .../examples/command/raycast/icons/index.ts   |    7 +
 .../command/raycast/icons/raycast-dark.svelte |   14 +
 .../raycast/icons/raycast-light.svelte        |   14 +
 .../command/raycast/icons/star.svelte         |    9 +
 .../command/raycast/icons/window.svelte       |    9 +
 .../examples/command/raycast/item.svelte      |   29 +
 .../command/raycast/raycast-command.svelte    |  109 ++
 .../examples/command/raycast/raycast.postcss  |  552 ++++++++
 .../command/raycast/sub-command.svelte        |   82 ++
 .../examples/command/raycast/sub-item.svelte  |   15 +
 .../examples/command/theme-switcher.svelte    |  103 ++
 .../examples/command/vercel/home.svelte       |   58 +
 .../command/vercel/icons/contact.svelte       |   14 +
 .../examples/command/vercel/icons/docs.svelte |   17 +
 .../command/vercel/icons/feedback.svelte      |   15 +
 .../examples/command/vercel/icons/index.ts    |    6 +
 .../examples/command/vercel/icons/plus.svelte |   14 +
 .../command/vercel/icons/projects.svelte      |   16 +
 .../command/vercel/icons/teams.svelte         |   16 +
 .../examples/command/vercel/item.svelte       |   27 +
 .../examples/command/vercel/projects.svelte   |    9 +
 .../command/vercel/vercel-command.svelte      |   77 ++
 .../examples/command/vercel/vercel.pcss       |  154 +++
 .../src/lib/content/api-reference/command.ts  |  309 +++++
 .../command/command-filter-prop.md            |    3 +
 .../extended-types/command/index.ts           |    1 +
 .../src/lib/content/api-reference/index.ts    |    3 +
 .../src/lib/content/api-reference/tabs.ts     |    3 +-
 .../docs/src/lib/styles/command/command.pcss  |  497 +++++++
 .../docs/src/lib/styles/command/globals.pcss  |  151 +++
 sites/docs/src/lib/styles/command/icons.pcss  |   46 +
 .../examples/command/+layout.svelte           |    9 +
 .../(examples)/examples/command/+page.svelte  |   37 +
 .../examples/command/sink/+page.svelte        |   43 +
 .../src/routes/{ => (main)}/+error.svelte     |    0
 .../src/routes/{ => (main)}/+layout.svelte    |    0
 .../docs/src/routes/{ => (main)}/+page.svelte |    0
 sites/docs/src/routes/(main)/+page.ts         |    5 +
 sites/docs/src/routes/(main)/docs/+page.ts    |    5 +
 .../{ => (main)}/docs/[...slug]/+page.svelte  |    0
 .../{ => (main)}/docs/[...slug]/+page.ts      |    5 +-
 .../docs/components/[name]/+page.svelte       |    0
 .../docs/components/[name]/+page.ts           |    5 +-
 .../src/routes/{ => (main)}/sink/+page.svelte |    0
 sites/docs/src/routes/+page.ts                |    6 -
 sites/docs/src/routes/docs/+page.ts           |    6 -
 124 files changed, 5844 insertions(+), 33 deletions(-)
 create mode 100644 packages/bits-ui/src/lib/bits/command/command-score.ts
 create mode 100644 packages/bits-ui/src/lib/bits/command/command.svelte.ts
 create mode 100644 packages/bits-ui/src/lib/bits/command/components/_command-label.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/command/components/command-empty.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/command/components/command-group-heading.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/command/components/command-group-items.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/command/components/command-group.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/command/components/command-input.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/command/components/command-item.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/command/components/command-link-item.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/command/components/command-list.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/command/components/command-loading.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/command/components/command-separator.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/command/components/command-viewport.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/command/components/command.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/command/index.ts
 create mode 100644 packages/bits-ui/src/lib/bits/command/types.ts
 create mode 100644 packages/bits-ui/src/lib/bits/command/utils.ts
 create mode 100644 packages/bits-ui/src/lib/internal/afterSleep.ts
 create mode 100644 packages/bits-ui/src/lib/internal/dom.ts
 create mode 100644 sites/docs/content/components/command.md
 create mode 100644 sites/docs/src/lib/components/demos/command-demo-dialog.svelte
 create mode 100644 sites/docs/src/lib/components/demos/command-demo.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/command-wrapper.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/framer/framer-command.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/framer/framer.pcss
 create mode 100644 sites/docs/src/lib/components/examples/command/framer/icons/avatar.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/framer/icons/badge.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/framer/icons/button.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/framer/icons/container.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/framer/icons/index.ts
 create mode 100644 sites/docs/src/lib/components/examples/command/framer/icons/input.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/framer/icons/radio.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/framer/icons/search.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/framer/icons/slider.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/icons/copied.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/icons/copy.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/icons/figma.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/icons/framer.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/icons/github.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/icons/index.ts
 create mode 100644 sites/docs/src/lib/components/examples/command/icons/linear.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/icons/raycast.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/icons/slack.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/icons/vercel.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/icons/youtube.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/linear/icons/assign-to-me.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/linear/icons/assign-to.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/linear/icons/change-labels.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/linear/icons/change-priority.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/linear/icons/change-status.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/linear/icons/index.ts
 create mode 100644 sites/docs/src/lib/components/examples/command/linear/icons/remove-label.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/linear/icons/set-due-date.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/linear/linear-command.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/linear/linear.pcss
 create mode 100644 sites/docs/src/lib/components/examples/command/logo.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/raycast/icons/clipboard.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/raycast/icons/finder.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/raycast/icons/hammer.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/raycast/icons/index.ts
 create mode 100644 sites/docs/src/lib/components/examples/command/raycast/icons/raycast-dark.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/raycast/icons/raycast-light.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/raycast/icons/star.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/raycast/icons/window.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/raycast/item.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/raycast/raycast-command.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/raycast/raycast.postcss
 create mode 100644 sites/docs/src/lib/components/examples/command/raycast/sub-command.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/raycast/sub-item.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/theme-switcher.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/vercel/home.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/vercel/icons/contact.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/vercel/icons/docs.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/vercel/icons/feedback.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/vercel/icons/index.ts
 create mode 100644 sites/docs/src/lib/components/examples/command/vercel/icons/plus.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/vercel/icons/projects.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/vercel/icons/teams.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/vercel/item.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/vercel/projects.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/vercel/vercel-command.svelte
 create mode 100644 sites/docs/src/lib/components/examples/command/vercel/vercel.pcss
 create mode 100644 sites/docs/src/lib/content/api-reference/command.ts
 create mode 100644 sites/docs/src/lib/content/api-reference/extended-types/command/command-filter-prop.md
 create mode 100644 sites/docs/src/lib/content/api-reference/extended-types/command/index.ts
 create mode 100644 sites/docs/src/lib/styles/command/command.pcss
 create mode 100644 sites/docs/src/lib/styles/command/globals.pcss
 create mode 100644 sites/docs/src/lib/styles/command/icons.pcss
 create mode 100644 sites/docs/src/routes/(examples)/examples/command/+layout.svelte
 create mode 100644 sites/docs/src/routes/(examples)/examples/command/+page.svelte
 create mode 100644 sites/docs/src/routes/(examples)/examples/command/sink/+page.svelte
 rename sites/docs/src/routes/{ => (main)}/+error.svelte (100%)
 rename sites/docs/src/routes/{ => (main)}/+layout.svelte (100%)
 rename sites/docs/src/routes/{ => (main)}/+page.svelte (100%)
 create mode 100644 sites/docs/src/routes/(main)/+page.ts
 create mode 100644 sites/docs/src/routes/(main)/docs/+page.ts
 rename sites/docs/src/routes/{ => (main)}/docs/[...slug]/+page.svelte (100%)
 rename sites/docs/src/routes/{ => (main)}/docs/[...slug]/+page.ts (63%)
 rename sites/docs/src/routes/{ => (main)}/docs/components/[name]/+page.svelte (100%)
 rename sites/docs/src/routes/{ => (main)}/docs/components/[name]/+page.ts (67%)
 rename sites/docs/src/routes/{ => (main)}/sink/+page.svelte (100%)
 delete mode 100644 sites/docs/src/routes/+page.ts
 delete mode 100644 sites/docs/src/routes/docs/+page.ts

diff --git a/packages/bits-ui/src/lib/bits/command/command-score.ts b/packages/bits-ui/src/lib/bits/command/command-score.ts
new file mode 100644
index 000000000..c20459b74
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/command-score.ts
@@ -0,0 +1,174 @@
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-nocheck
+// The scores are arranged so that a continuous match of characters will
+// result in a total score of 1.
+//
+// The best case, this character is a match, and either this is the start
+// of the string, or the previous character was also a match.
+const SCORE_CONTINUE_MATCH = 1;
+// A new match at the start of a word scores better than a new match
+// elsewhere as it's more likely that the user will type the starts
+// of fragments.
+// NOTE: We score word jumps between spaces slightly higher than slashes, brackets
+// hyphens, etc.
+const SCORE_SPACE_WORD_JUMP = 0.9;
+const SCORE_NON_SPACE_WORD_JUMP = 0.8;
+// Any other match isn't ideal, but we include it for completeness.
+const SCORE_CHARACTER_JUMP = 0.17;
+// If the user transposed two letters, it should be significantly penalized.
+//
+// i.e. "ouch" is more likely than "curtain" when "uc" is typed.
+const SCORE_TRANSPOSITION = 0.1;
+// The goodness of a match should decay slightly with each missing
+// character.
+//
+// i.e. "bad" is more likely than "bard" when "bd" is typed.
+//
+// This will not change the order of suggestions based on SCORE_* until
+// 100 characters are inserted between matches.
+const PENALTY_SKIPPED = 0.999;
+// The goodness of an exact-case match should be higher than a
+// case-insensitive match by a small amount.
+//
+// i.e. "HTML" is more likely than "haml" when "HM" is typed.
+//
+// This will not change the order of suggestions based on SCORE_* until
+// 1000 characters are inserted between matches.
+const PENALTY_CASE_MISMATCH = 0.9999;
+// Match higher for letters closer to the beginning of the word
+const PENALTY_DISTANCE_FROM_START = 0.9;
+// If the word has more characters than the user typed, it should
+// be penalised slightly.
+//
+// i.e. "html" is more likely than "html5" if I type "html".
+//
+// However, it may well be the case that there's a sensible secondary
+// ordering (like alphabetical) that it makes sense to rely on when
+// there are many prefix matches, so we don't make the penalty increase
+// with the number of tokens.
+const PENALTY_NOT_COMPLETE = 0.99;
+
+const IS_GAP_REGEXP = /[\\/_+.#"@[({&]/;
+const COUNT_GAPS_REGEXP = /[\\/_+.#"@[({&]/g;
+const IS_SPACE_REGEXP = /[\s-]/;
+const COUNT_SPACE_REGEXP = /[\s-]/g;
+
+function commandScoreInner(
+	string,
+	abbreviation,
+	lowerString,
+	lowerAbbreviation,
+	stringIndex,
+	abbreviationIndex,
+	memoizedResults
+) {
+	if (abbreviationIndex === abbreviation.length) {
+		if (stringIndex === string.length) {
+			return SCORE_CONTINUE_MATCH;
+		}
+		return PENALTY_NOT_COMPLETE;
+	}
+
+	const memoizeKey = `${stringIndex},${abbreviationIndex}`;
+	if (memoizedResults[memoizeKey] !== undefined) {
+		return memoizedResults[memoizeKey];
+	}
+
+	const abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex);
+	let index = lowerString.indexOf(abbreviationChar, stringIndex);
+	let highScore = 0;
+
+	let score, transposedScore, wordBreaks, spaceBreaks;
+
+	while (index >= 0) {
+		score = commandScoreInner(
+			string,
+			abbreviation,
+			lowerString,
+			lowerAbbreviation,
+			index + 1,
+			abbreviationIndex + 1,
+			memoizedResults
+		);
+		if (score > highScore) {
+			if (index === stringIndex) {
+				score *= SCORE_CONTINUE_MATCH;
+			} else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) {
+				score *= SCORE_NON_SPACE_WORD_JUMP;
+				wordBreaks = string.slice(stringIndex, index - 1).match(COUNT_GAPS_REGEXP);
+				if (wordBreaks && stringIndex > 0) {
+					score *= PENALTY_SKIPPED ** wordBreaks.length;
+				}
+			} else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) {
+				score *= SCORE_SPACE_WORD_JUMP;
+				spaceBreaks = string.slice(stringIndex, index - 1).match(COUNT_SPACE_REGEXP);
+				if (spaceBreaks && stringIndex > 0) {
+					score *= PENALTY_SKIPPED ** spaceBreaks.length;
+				}
+			} else {
+				score *= SCORE_CHARACTER_JUMP;
+				if (stringIndex > 0) {
+					score *= PENALTY_SKIPPED ** (index - stringIndex);
+				}
+			}
+
+			if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) {
+				score *= PENALTY_CASE_MISMATCH;
+			}
+		}
+
+		if (
+			(score < SCORE_TRANSPOSITION &&
+				lowerString.charAt(index - 1) ===
+					lowerAbbreviation.charAt(abbreviationIndex + 1)) ||
+			(lowerAbbreviation.charAt(abbreviationIndex + 1) ===
+				lowerAbbreviation.charAt(abbreviationIndex) && // allow duplicate letters. Ref #7428
+				lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex))
+		) {
+			transposedScore = commandScoreInner(
+				string,
+				abbreviation,
+				lowerString,
+				lowerAbbreviation,
+				index + 1,
+				abbreviationIndex + 2,
+				memoizedResults
+			);
+
+			if (transposedScore * SCORE_TRANSPOSITION > score) {
+				score = transposedScore * SCORE_TRANSPOSITION;
+			}
+		}
+
+		if (score > highScore) {
+			highScore = score;
+		}
+
+		index = lowerString.indexOf(abbreviationChar, index + 1);
+	}
+
+	memoizedResults[memoizeKey] = highScore;
+	return highScore;
+}
+
+function formatInput(string) {
+	// convert all valid space characters to space so they match each other
+	return string.toLowerCase().replace(COUNT_SPACE_REGEXP, " ");
+}
+
+export function commandScore(string: string, abbreviation: string, aliases?: string[]): number {
+	/* NOTE:
+	 * in the original, we used to do the lower-casing on each recursive call, but this meant that toLowerCase()
+	 * was the dominating cost in the algorithm, passing both is a little ugly, but considerably faster.
+	 */
+	string = aliases && aliases.length > 0 ? `${`${string} ${aliases?.join(" ")}`}` : string;
+	return commandScoreInner(
+		string,
+		abbreviation,
+		formatInput(string),
+		formatInput(abbreviation),
+		0,
+		0,
+		{}
+	);
+}
diff --git a/packages/bits-ui/src/lib/bits/command/command.svelte.ts b/packages/bits-ui/src/lib/bits/command/command.svelte.ts
new file mode 100644
index 000000000..e8e611cf7
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/command.svelte.ts
@@ -0,0 +1,1169 @@
+import { untrack } from "svelte";
+import { findNextSibling, findPreviousSibling } from "./utils.js";
+import { commandScore } from "./command-score.js";
+import type { CommandState } from "./types.js";
+import { useRefById } from "$lib/internal/useRefById.svelte.js";
+import { createContext } from "$lib/internal/createContext.js";
+import type { WithRefProps } from "$lib/internal/types.js";
+import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
+import { afterSleep } from "$lib/internal/afterSleep.js";
+import { kbd } from "$lib/internal/kbd.js";
+import {
+	getAriaDisabled,
+	getAriaExpanded,
+	getAriaSelected,
+	getDataDisabled,
+	getDataSelected,
+} from "$lib/internal/attrs.js";
+import { getFirstNonCommentChild } from "$lib/internal/dom.js";
+import { srOnlyStyles } from "$lib/internal/style.js";
+import { afterTick } from "$lib/internal/afterTick.js";
+
+const ROOT_ATTR = "data-command-root";
+const LIST_ATTR = "data-command-list";
+const INPUT_ATTR = "data-command-input";
+const SEPARATOR_ATTR = "data-command-separator";
+const LOADING_ATTR = "data-command-loading";
+const EMPTY_ATTR = "data-command-empty";
+const GROUP_ATTR = "data-command-group";
+const GROUP_ITEMS_ATTR = "data-command-group-items";
+const GROUP_HEADING_ATTR = "data-command-group-heading";
+const ITEM_ATTR = "data-command-item";
+const VALUE_ATTR = `data-value`;
+const VIEWPORT_ATTR = "data-command-viewport";
+const INPUT_LABEL_ATTR = "data-command-input-label";
+
+const GROUP_SELECTOR = `[${GROUP_ATTR}]`;
+const GROUP_ITEMS_SELECTOR = `[${GROUP_ITEMS_ATTR}]`;
+const GROUP_HEADING_SELECTOR = `[${GROUP_HEADING_ATTR}]`;
+const ITEM_SELECTOR = `[${ITEM_ATTR}]`;
+const VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([aria-disabled="true"])`;
+
+export function defaultFilter(value: string, search: string, keywords?: string[]): number {
+	return commandScore(value, search, keywords);
+}
+
+const [setCommandRootContext, getCommandRootContext] =
+	createContext<CommandRootState>("Command.Root");
+
+const [setCommandListContext, getCommandListContext] =
+	createContext<CommandListState>("Command.List");
+
+export const [setCommandGroupContainerContext, getCommandGroupContainerContext] =
+	createContext<CommandGroupContainerState>("Command.Group");
+
+type CommandRootStateProps = WithRefProps<
+	ReadableBoxedValues<{
+		filter: (value: string, search: string, keywords?: string[]) => number;
+		shouldFilter: boolean;
+		loop: boolean;
+		vimBindings: boolean;
+		disablePointerSelection: boolean;
+	}> &
+		WritableBoxedValues<{
+			value: string;
+		}>
+>;
+
+// eslint-disable-next-line ts/no-explicit-any
+type SetState = <K extends keyof CommandState>(key: K, value: CommandState[K], opts?: any) => void;
+
+class CommandRootState {
+	allItems = new Set<string>(); // [...itemIds]
+	allGroups = new Map<string, Set<string>>(); // groupId → [...itemIds]
+	allIds = new Map<string, { value: string; keywords?: string[] }>();
+	id: CommandRootStateProps["id"];
+	ref: CommandRootStateProps["ref"];
+	filter: CommandRootStateProps["filter"];
+	shouldFilter: CommandRootStateProps["shouldFilter"];
+	loop: CommandRootStateProps["loop"];
+	// attempt to prevent the harsh delay when user is typing fast
+	key = $state(0);
+	viewportNode = $state<HTMLElement | null>(null);
+	inputNode = $state<HTMLElement | null>(null);
+	labelNode = $state<HTMLElement | null>(null);
+	valueProp: CommandRootStateProps["value"];
+	#vimBindings: CommandRootStateProps["vimBindings"];
+	disablePointerSelection: CommandRootStateProps["disablePointerSelection"];
+	// published state that the components and other things can react to
+	commandState = $state.raw<CommandState>(null!);
+	// internal state that we mutate in batches and publish to the `state` at once
+	_commandState = $state<CommandState>(null!);
+	snapshot = () => this._commandState;
+	setState: SetState = (key, value, opts) => {
+		if (Object.is(this._commandState[key], value)) return;
+		this._commandState[key] = value;
+		if (key === "search") {
+			// Filter synchronously before emitting back to children
+			this.#filterItems();
+			this.#sort();
+			this.#selectFirstItem();
+		} else if (key === "value") {
+			// opts is a boolean referring to whether it should NOT be scrolled into view
+			if (!opts) {
+				// Scroll the selected item into view
+				this.#scrollSelectedIntoView();
+			}
+		}
+		// notify subscribers that the state has changed
+		this.emit();
+	};
+	emit = () => {
+		this.commandState = $state.snapshot(this._commandState);
+	};
+
+	constructor(props: CommandRootStateProps) {
+		this.id = props.id;
+		this.ref = props.ref;
+		this.filter = props.filter;
+		this.shouldFilter = props.shouldFilter;
+		this.loop = props.loop;
+		this.valueProp = props.value;
+		this.#vimBindings = props.vimBindings;
+		this.disablePointerSelection = props.disablePointerSelection;
+
+		const defaultState = {
+			/** Value of the search query */
+			search: "",
+			/** Currnetly selected item value */
+			value: this.valueProp.current ?? "",
+			filtered: {
+				/** The count of all visible items. */
+				count: 0,
+				/** Map from visible item id to its search store. */
+				items: new Map<string, number>(),
+				/** Set of groups with at least one visible item. */
+				groups: new Set<string>(),
+			},
+		};
+		this._commandState = defaultState;
+		this.commandState = defaultState;
+
+		useRefById({
+			id: this.id,
+			ref: this.ref,
+		});
+
+		$effect(() => {
+			this._commandState.value;
+			this.#scrollSelectedIntoView();
+		});
+	}
+
+	#score = (value: string, keywords?: string[]) => {
+		const filter = this.filter.current ?? defaultFilter;
+		const score = value ? filter(value, this._commandState.search, keywords) : 0;
+		return score;
+	};
+
+	#sort = () => {
+		if (!this._commandState.search || this.shouldFilter.current === false) return;
+
+		const scores = this._commandState.filtered.items;
+
+		// sort the groups
+		const groups: [string, number][] = [];
+		for (const value of this._commandState.filtered.groups) {
+			const items = this.allGroups.get(value);
+			let max = 0;
+			if (!items) {
+				groups.push([value, max]);
+				continue;
+			}
+
+			// get the max score of the group's items
+			for (const item of items!) {
+				const score = scores.get(item);
+				max = Math.max(score ?? 0, max);
+			}
+			groups.push([value, max]);
+		}
+
+		// Sort items within groups to bottom
+		// Sort items outside of groups
+		// Sort groups to bottom (pushes all non-grouped items to the top)
+		const listInsertionElement = this.viewportNode;
+
+		const sorted = this.#getValidItems().sort((a, b) => {
+			const valueA = a.getAttribute("id");
+			const valueB = b.getAttribute("id");
+			const scoresA = scores.get(valueA!) ?? 0;
+			const scoresB = scores.get(valueB!) ?? 0;
+			return scoresB - scoresA;
+		});
+
+		for (const item of sorted) {
+			const group = item.closest(GROUP_ITEMS_SELECTOR);
+
+			if (group) {
+				const itemToAppend =
+					item.parentElement === group
+						? item
+						: item.closest(`${GROUP_ITEMS_SELECTOR} > *`);
+
+				if (itemToAppend) {
+					group.appendChild(itemToAppend);
+				}
+			} else {
+				const itemToAppend =
+					item.parentElement === listInsertionElement
+						? item
+						: item.closest(`${GROUP_ITEMS_SELECTOR} > *`);
+
+				if (itemToAppend) {
+					listInsertionElement?.appendChild(itemToAppend);
+				}
+			}
+		}
+
+		const sortedGroups = groups.sort((a, b) => b[1] - a[1]);
+
+		for (const group of sortedGroups) {
+			const element = listInsertionElement?.querySelector(
+				`${GROUP_SELECTOR}[${VALUE_ATTR}="${encodeURIComponent(group[0])}"]`
+			);
+			element?.parentElement?.appendChild(element);
+		}
+	};
+
+	setValue = (value: string, opts?: boolean) => {
+		if (value !== this.valueProp.current && value === "") {
+			afterTick(() => {
+				this.key++;
+			});
+		}
+		this.setState("value", value, opts);
+		this.valueProp.current = value;
+	};
+
+	#selectFirstItem = () => {
+		afterTick(() => {
+			const item = this.#getValidItems().find(
+				(item) => item.getAttribute("aria-disabled") !== "true"
+			);
+			const value = item?.getAttribute(VALUE_ATTR);
+			this.setValue(value || "");
+		});
+	};
+
+	#filterItems = () => {
+		if (!this._commandState.search || this.shouldFilter.current === false) {
+			this._commandState.filtered.count = this.allItems.size;
+			return;
+		}
+
+		// reset the groups
+		this._commandState.filtered.groups = new Set();
+		let itemCount = 0;
+
+		// Check which items should be included
+		for (const id of this.allItems) {
+			const value = this.allIds.get(id)?.value ?? "";
+			const keywords = this.allIds.get(id)?.keywords ?? [];
+			const rank = this.#score(value, keywords);
+			this._commandState.filtered.items.set(id, rank);
+			if (rank > 0) itemCount++;
+		}
+
+		// Check which groups have at least 1 item shown
+		for (const [groupId, group] of this.allGroups) {
+			for (const itemId of group) {
+				const currItem = this._commandState.filtered.items.get(itemId);
+
+				if (currItem && currItem > 0) {
+					this._commandState.filtered.groups.add(groupId);
+					break;
+				}
+			}
+		}
+
+		this._commandState.filtered.count = itemCount;
+	};
+
+	#getValidItems = () => {
+		const node = this.ref.current;
+		if (!node) return [];
+		const validItems = Array.from(
+			node.querySelectorAll<HTMLElement>(VALID_ITEM_SELECTOR)
+		).filter((el): el is HTMLElement => !!el);
+		return validItems;
+	};
+
+	#getSelectedItem = () => {
+		const node = this.ref.current;
+		if (!node) return;
+		const selectedNode = node.querySelector<HTMLElement>(
+			`${VALID_ITEM_SELECTOR}[aria-selected="true"]`
+		);
+		if (!selectedNode) return;
+		return selectedNode;
+	};
+
+	#scrollSelectedIntoView = () => {
+		afterSleep(1, () => {
+			const item = this.#getSelectedItem();
+			if (!item) return;
+			const firstChildOfParent = getFirstNonCommentChild(item.parentElement);
+			if (firstChildOfParent === item) {
+				item
+					?.closest(GROUP_SELECTOR)
+					?.querySelector(GROUP_HEADING_SELECTOR)
+					?.scrollIntoView({ block: "nearest" });
+			}
+			item.scrollIntoView({ block: "nearest" });
+		});
+	};
+
+	#updateSelectedToIndex = (index: number) => {
+		const items = this.#getValidItems();
+		const item = items[index];
+		if (item) {
+			this.setValue(item.getAttribute(VALUE_ATTR) ?? "");
+		}
+	};
+
+	#updateSelectedByItem = (change: 1 | -1) => {
+		const selected = this.#getSelectedItem();
+		const items = this.#getValidItems();
+		const index = items.findIndex((item) => item === selected);
+
+		// Get item at this index
+		let newSelected = items[index + change];
+
+		if (this.loop.current) {
+			newSelected =
+				index + change < 0
+					? items[items.length - 1]
+					: index + change === items.length
+						? items[0]
+						: items[index + change];
+		}
+
+		if (newSelected) {
+			this.setValue(newSelected.getAttribute(VALUE_ATTR) ?? "");
+		}
+	};
+
+	#updateSelectedByGroup = (change: 1 | -1) => {
+		const selected = this.#getSelectedItem();
+		let group = selected?.closest(GROUP_SELECTOR);
+		let item: HTMLElement | null | undefined;
+
+		while (group && !item) {
+			group =
+				change > 0
+					? findNextSibling(group, GROUP_SELECTOR)
+					: findPreviousSibling(group, GROUP_SELECTOR);
+			item = group?.querySelector(VALID_ITEM_SELECTOR);
+		}
+
+		if (item) {
+			this.setValue(item.getAttribute(VALUE_ATTR) ?? "");
+		} else {
+			this.#updateSelectedByItem(change);
+		}
+	};
+
+	// keep id -> { value, keywords } mapping up to date
+	registerValue = (id: string, value: string, keywords?: string[]) => {
+		if (value === this.allIds.get(id)?.value) return;
+		this.allIds.set(id, { value, keywords });
+		this._commandState.filtered.items.set(id, this.#score(value, keywords));
+
+		this.#sort();
+		this.emit();
+
+		return () => {
+			this.allIds.delete(id);
+		};
+	};
+
+	registerItem = (id: string, groupId: string | undefined) => {
+		this.allItems.add(id);
+
+		// Track this item within the group
+		if (groupId) {
+			if (!this.allGroups.has(groupId)) {
+				this.allGroups.set(groupId, new Set([id]));
+			} else {
+				this.allGroups.get(groupId)!.add(id);
+			}
+		}
+
+		this.#filterItems();
+		this.#sort();
+
+		// Could be initial mount, select the first item if none already selected
+		if (!this.commandState.value) {
+			this.#selectFirstItem();
+		}
+
+		this.emit();
+		return () => {
+			this.allIds.delete(id);
+			this.allItems.delete(id);
+			this.commandState.filtered.items.delete(id);
+			const selectedItem = this.#getSelectedItem();
+
+			this.#filterItems();
+
+			// The item removed have been the selected one,
+			// so selection should be moved to the first
+			if (selectedItem?.getAttribute("id") === id) this.#selectFirstItem();
+
+			this.emit();
+		};
+	};
+
+	registerGroup = (id: string) => {
+		if (!this.allGroups.has(id)) {
+			this.allGroups.set(id, new Set());
+		}
+
+		return () => {
+			this.allIds.delete(id);
+			this.allGroups.delete(id);
+		};
+	};
+
+	#last = () => {
+		return this.#updateSelectedToIndex(this.#getValidItems().length - 1);
+	};
+
+	#next = (e: KeyboardEvent) => {
+		e.preventDefault();
+
+		if (e.metaKey) {
+			this.#last();
+		} else if (e.altKey) {
+			this.#updateSelectedByGroup(1);
+		} else {
+			this.#updateSelectedByItem(1);
+		}
+	};
+
+	#prev = (e: KeyboardEvent) => {
+		e.preventDefault();
+
+		if (e.metaKey) {
+			// First item
+			this.#updateSelectedToIndex(0);
+		} else if (e.altKey) {
+			// Previous group
+			this.#updateSelectedByGroup(-1);
+		} else {
+			// Previous item
+			this.#updateSelectedByItem(-1);
+		}
+	};
+
+	#onkeydown = (e: KeyboardEvent) => {
+		switch (e.key) {
+			case kbd.n:
+			case kbd.j: {
+				// vim down
+				if (this.#vimBindings.current && e.ctrlKey) {
+					this.#next(e);
+				}
+				break;
+			}
+			case kbd.ARROW_DOWN:
+				this.#next(e);
+				break;
+			case kbd.p:
+			case kbd.k: {
+				// vim up
+				if (this.#vimBindings.current && e.ctrlKey) {
+					this.#prev(e);
+				}
+				break;
+			}
+			case kbd.ARROW_UP:
+				this.#prev(e);
+				break;
+			case kbd.HOME:
+				// first item
+				e.preventDefault();
+				this.#updateSelectedToIndex(0);
+				break;
+			case kbd.END:
+				// last item
+				e.preventDefault();
+				this.#last();
+				break;
+			case kbd.ENTER: {
+				/**
+				 * Check if IME composition is finished before triggering the select event.
+				 * This prevents unwanted triggering while user is still inputting text with IME.
+				 * e.keyCode === 229 is for the Japanese IME && Safari as `isComposing` does not
+				 * work with Japanese IME and Safari in combination.
+				 */
+				if (!e.isComposing && e.keyCode !== 229) {
+					e.preventDefault();
+					const item = this.#getSelectedItem();
+					if (item) {
+						item?.click();
+					}
+				}
+			}
+		}
+	};
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.id.current,
+				role: "application",
+				[ROOT_ATTR]: "",
+				tabindex: -1,
+				onkeydown: this.#onkeydown,
+			}) as const
+	);
+
+	createEmpty(props: CommandEmptyStateProps) {
+		return new CommandEmptyState(props, this);
+	}
+
+	createGroupContainer(props: CommandGroupContainerStateProps) {
+		return new CommandGroupContainerState(props, this);
+	}
+
+	createInput(props: CommandInputStateProps) {
+		return new CommandInputState(props, this);
+	}
+
+	createItem(props: CommandItemStateProps) {
+		return new CommandItemState(props, this);
+	}
+
+	createSeparator(props: CommandSeparatorStateProps) {
+		return new CommandSeparatorState(props, this);
+	}
+
+	createList(props: CommandListStateProps) {
+		return new CommandListState(props, this);
+	}
+
+	createLabel(props: CommandLabelStateProps) {
+		return new CommandLabelState(props, this);
+	}
+}
+
+type CommandEmptyStateProps = WithRefProps;
+
+class CommandEmptyState {
+	#ref: CommandEmptyStateProps["ref"];
+	#id: CommandEmptyStateProps["id"];
+	#root: CommandRootState;
+	#isInitialRender = true;
+	shouldRender = $derived.by(
+		() => this.#root._commandState.filtered.count === 0 && this.#isInitialRender === false
+	);
+
+	constructor(props: CommandEmptyStateProps, root: CommandRootState) {
+		this.#ref = props.ref;
+		this.#id = props.id;
+		this.#root = root;
+
+		$effect(() => {
+			this.#isInitialRender = false;
+		});
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			condition: () => this.shouldRender,
+		});
+	}
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.current,
+				role: "presentation",
+				[EMPTY_ATTR]: "",
+			}) as const
+	);
+}
+
+type CommandGroupContainerStateProps = WithRefProps<
+	ReadableBoxedValues<{
+		value: string;
+		forceMount: boolean;
+	}>
+>;
+
+class CommandGroupContainerState {
+	#ref: CommandGroupContainerStateProps["ref"];
+	id: CommandGroupContainerStateProps["id"];
+	forceMount: CommandGroupContainerStateProps["forceMount"];
+	#value: CommandGroupContainerStateProps["value"];
+	#root: CommandRootState;
+	headingNode = $state<HTMLElement | null>(null);
+
+	shouldRender = $derived.by(() => {
+		if (this.forceMount.current) return true;
+		if (this.#root.shouldFilter.current === false) return true;
+		if (!this.#root.commandState.search) return true;
+		return this.#root.commandState.filtered.groups.has(this.id.current);
+	});
+	trueValue = $state("");
+
+	constructor(props: CommandGroupContainerStateProps, root: CommandRootState) {
+		this.#ref = props.ref;
+		this.id = props.id;
+		this.#root = root;
+		this.forceMount = props.forceMount;
+		this.#value = props.value;
+		this.trueValue = props.value.current;
+
+		useRefById({
+			id: this.id,
+			ref: this.#ref,
+			condition: () => this.shouldRender,
+		});
+
+		$effect(() => {
+			return this.#root.registerGroup(this.id.current);
+		});
+
+		$effect(() => {
+			if (this.#value.current) {
+				this.trueValue = this.#value.current;
+				return this.#root.registerValue(this.id.current, this.#value.current);
+			} else if (this.headingNode && this.headingNode.textContent) {
+				this.trueValue = this.headingNode.textContent.trim().toLowerCase();
+				return this.#root.registerValue(this.id.current, this.trueValue);
+			} else if (this.#ref.current?.textContent) {
+				this.trueValue = this.#ref.current.textContent.trim().toLowerCase();
+				return this.#root.registerValue(this.id.current, this.trueValue);
+			}
+		});
+	}
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.id.current,
+				role: "presentation",
+				hidden: this.shouldRender ? undefined : true,
+				"data-value": this.trueValue,
+				[GROUP_ATTR]: "",
+			}) as const
+	);
+
+	createGroupHeading(props: CommandGroupHeadingStateProps) {
+		return new CommandGroupHeadingState(props, this);
+	}
+
+	createGroupItems(props: CommandGroupItemsStateProps) {
+		return new CommandGroupItemsState(props, this);
+	}
+}
+
+type CommandGroupHeadingStateProps = WithRefProps;
+
+class CommandGroupHeadingState {
+	#ref: CommandGroupHeadingStateProps["ref"];
+	#id: CommandGroupHeadingStateProps["id"];
+	#group: CommandGroupContainerState;
+
+	constructor(props: CommandGroupHeadingStateProps, group: CommandGroupContainerState) {
+		this.#ref = props.ref;
+		this.#id = props.id;
+		this.#group = group;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			onRefChange: (node) => {
+				this.#group.headingNode = node;
+			},
+		});
+	}
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.current,
+				[GROUP_HEADING_ATTR]: "",
+			}) as const
+	);
+}
+
+type CommandGroupItemsStateProps = WithRefProps;
+
+class CommandGroupItemsState {
+	#ref: CommandGroupItemsStateProps["ref"];
+	#id: CommandGroupItemsStateProps["id"];
+	#group: CommandGroupContainerState;
+
+	constructor(props: CommandGroupItemsStateProps, group: CommandGroupContainerState) {
+		this.#ref = props.ref;
+		this.#id = props.id;
+		this.#group = group;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+		});
+	}
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.current,
+				role: "group",
+				[GROUP_ITEMS_ATTR]: "",
+				"aria-labelledby": this.#group.headingNode?.id ?? undefined,
+			}) as const
+	);
+}
+
+type CommandInputStateProps = WithRefProps<
+	WritableBoxedValues<{
+		value: string;
+	}> &
+		ReadableBoxedValues<{
+			autofocus: boolean;
+		}>
+>;
+
+class CommandInputState {
+	#ref: CommandInputStateProps["ref"];
+	#id: CommandInputStateProps["id"];
+	#root: CommandRootState;
+	#value: CommandInputStateProps["value"];
+	#autofocus: CommandInputStateProps["autofocus"];
+
+	#selectedItemId = $derived.by(() => {
+		const item = this.#root.viewportNode?.querySelector<HTMLElement>(
+			`${ITEM_SELECTOR}[${VALUE_ATTR}="${encodeURIComponent(this.#value.current)}"]`
+		);
+		if (!item) return;
+		return item?.getAttribute("id") ?? undefined;
+	});
+
+	constructor(props: CommandInputStateProps, root: CommandRootState) {
+		this.#ref = props.ref;
+		this.#id = props.id;
+		this.#root = root;
+		this.#value = props.value;
+		this.#autofocus = props.autofocus;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			onRefChange: (node) => {
+				this.#root.inputNode = node;
+			},
+		});
+
+		$effect(() => {
+			const node = this.#ref.current;
+			untrack(() => {
+				if (node && this.#autofocus.current) {
+					afterSleep(10, () => node.focus());
+				}
+			});
+		});
+
+		$effect(() => {
+			this.#value.current;
+			untrack(() => {
+				if (this.#root.commandState.search !== this.#value.current) {
+					this.#root.setState("search", this.#value.current);
+				}
+			});
+		});
+	}
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.current,
+				type: "text",
+				[INPUT_ATTR]: "",
+				autocomplete: "off",
+				autocorrect: "off",
+				spellcheck: false,
+				"aria-autocomplete": "list",
+				role: "combobox",
+				"aria-expanded": getAriaExpanded(true),
+				"aria-controls": this.#root.viewportNode?.id ?? undefined,
+				"aria-labelledby": this.#root.labelNode?.id ?? undefined,
+				"aria-activedescendant": this.#selectedItemId,
+			}) as const
+	);
+}
+
+type CommandItemStateProps = WithRefProps<
+	ReadableBoxedValues<{
+		value: string;
+		disabled: boolean;
+		onSelect: () => void;
+		forceMount: boolean;
+		keywords: string[];
+	}> & {
+		group: CommandGroupContainerState | null;
+	}
+>;
+
+class CommandItemState {
+	#ref: CommandItemStateProps["ref"];
+	id: CommandItemStateProps["id"];
+	root: CommandRootState;
+
+	#value: CommandItemStateProps["value"];
+	#disabled: CommandItemStateProps["disabled"];
+	#onSelectProp: CommandItemStateProps["onSelect"];
+	#forceMount: CommandItemStateProps["forceMount"];
+	#group: CommandGroupContainerState | null = null;
+	#trueForceMount = $derived.by(() => {
+		return this.#forceMount.current || this.#group?.forceMount.current === true;
+	});
+	trueValue = $state("");
+	shouldRender = $derived.by(() => {
+		if (
+			this.#trueForceMount ||
+			this.root.shouldFilter.current === false ||
+			!this.root.commandState.search
+		) {
+			return true;
+		}
+		const currentScore = this.root.commandState.filtered.items.get(this.id.current);
+		if (currentScore === undefined) return false;
+		return currentScore > 0;
+	});
+
+	isSelected = $derived.by(
+		() => this.root.valueProp.current === this.trueValue && this.trueValue !== ""
+	);
+
+	constructor(props: CommandItemStateProps, root: CommandRootState) {
+		this.#ref = props.ref;
+		this.id = props.id;
+		this.root = root;
+		this.#value = props.value;
+		this.#disabled = props.disabled;
+		this.#onSelectProp = props.onSelect;
+		this.#forceMount = props.forceMount;
+		this.#group = getCommandGroupContainerContext(null);
+		this.trueValue = props.value.current;
+
+		useRefById({
+			id: this.id,
+			ref: this.#ref,
+			condition: () => Boolean(this.root.commandState.search),
+		});
+
+		$effect(() => {
+			this.id.current;
+			this.#group?.id.current;
+			if (!this.#forceMount.current) {
+				untrack(() => {
+					return this.root.registerItem(this.id.current, this.#group?.id.current);
+				});
+			}
+		});
+
+		$effect(() => {
+			const value = this.#value.current;
+			const node = this.#ref.current;
+			if (!node) return;
+			if (!value && node.textContent) {
+				this.trueValue = node.textContent.trim();
+			}
+
+			untrack(() => {
+				this.root.registerValue(
+					this.id.current,
+					this.trueValue,
+					props.keywords.current.map((keyword) => keyword.trim())
+				);
+				node.setAttribute(VALUE_ATTR, this.trueValue);
+			});
+		});
+	}
+
+	#onSelect = () => {
+		if (this.#disabled.current) return;
+		this.#select();
+		this.#onSelectProp?.current();
+	};
+
+	#select = () => {
+		if (this.#disabled.current) return;
+		this.root.setValue(this.trueValue, true);
+	};
+
+	#onpointermove = () => {
+		if (this.#disabled.current || this.root.disablePointerSelection.current) return;
+		this.#select();
+	};
+
+	#onclick = () => {
+		if (this.#disabled.current) return;
+		this.#onSelect();
+	};
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.id.current,
+				"aria-disabled": getAriaDisabled(this.#disabled.current),
+				"aria-selected": getAriaSelected(this.isSelected),
+				"data-disabled": getDataDisabled(this.#disabled.current),
+				"data-selected": getDataSelected(this.isSelected),
+				[ITEM_ATTR]: "",
+				role: "option",
+				onclick: this.#onclick,
+				onpointermove: this.#onpointermove,
+			}) as const
+	);
+}
+
+type CommandLoadingStateProps = WithRefProps<
+	ReadableBoxedValues<{
+		progress: number;
+	}>
+>;
+
+class CommandLoadingState {
+	#ref: CommandLoadingStateProps["ref"];
+	#id: CommandLoadingStateProps["id"];
+	#progress: CommandLoadingStateProps["progress"];
+
+	constructor(props: CommandLoadingStateProps) {
+		this.#ref = props.ref;
+		this.#id = props.id;
+		this.#progress = props.progress;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+		});
+	}
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.current,
+				role: "progressbar",
+				"aria-valuenow": this.#progress.current,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-label": "Loading...",
+				[LOADING_ATTR]: "",
+			}) as const
+	);
+}
+
+type CommandSeparatorStateProps = WithRefProps &
+	ReadableBoxedValues<{
+		forceMount: boolean;
+	}>;
+
+class CommandSeparatorState {
+	#ref: CommandSeparatorStateProps["ref"];
+	#id: CommandSeparatorStateProps["id"];
+	#root: CommandRootState;
+	#forceMount: CommandSeparatorStateProps["forceMount"];
+	shouldRender = $derived.by(() => !this.#root.commandState.search || this.#forceMount.current);
+
+	constructor(props: CommandSeparatorStateProps, root: CommandRootState) {
+		this.#ref = props.ref;
+		this.#id = props.id;
+		this.#root = root;
+		this.#forceMount = props.forceMount;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			condition: () => this.shouldRender,
+		});
+	}
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.current,
+				role: "separator",
+				[SEPARATOR_ATTR]: "",
+			}) as const
+	);
+}
+
+type CommandListStateProps = WithRefProps &
+	ReadableBoxedValues<{
+		ariaLabel: string;
+	}>;
+
+class CommandListState {
+	ref: CommandListStateProps["ref"];
+	#id: CommandListStateProps["id"];
+	#ariaLabel: CommandListStateProps["ariaLabel"];
+	root: CommandRootState;
+
+	constructor(props: CommandListStateProps, root: CommandRootState) {
+		this.ref = props.ref;
+		this.#id = props.id;
+		this.root = root;
+		this.#ariaLabel = props.ariaLabel;
+
+		useRefById({
+			id: this.#id,
+			ref: this.ref,
+		});
+	}
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.current,
+				role: "listbox",
+				"aria-label": this.#ariaLabel.current,
+				[LIST_ATTR]: "",
+			}) as const
+	);
+
+	createViewport(props: CommandViewportStateProps) {
+		return new CommandViewportState(props, this);
+	}
+}
+
+type CommandLabelStateProps = WithRefProps<ReadableBoxedValues<{ for?: string }>>;
+
+class CommandLabelState {
+	#ref: CommandLabelStateProps["ref"];
+	#id: CommandLabelStateProps["id"];
+	#root: CommandRootState;
+	#for: CommandLabelStateProps["for"];
+
+	constructor(props: CommandLabelStateProps, root: CommandRootState) {
+		this.#ref = props.ref;
+		this.#id = props.id;
+		this.#root = root;
+		this.#for = props.for;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			onRefChange: (node) => {
+				this.#root.labelNode = node;
+			},
+		});
+	}
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.current,
+				[INPUT_LABEL_ATTR]: "",
+				for: this.#for?.current,
+				style: srOnlyStyles,
+			}) as const
+	);
+}
+
+type CommandViewportStateProps = WithRefProps;
+
+class CommandViewportState {
+	#ref: CommandViewportStateProps["ref"];
+	#id: CommandViewportStateProps["id"];
+	#list: CommandListState;
+
+	constructor(props: CommandViewportStateProps, list: CommandListState) {
+		this.#ref = props.ref;
+		this.#id = props.id;
+		this.#list = list;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			onRefChange: (node) => {
+				this.#list.root.viewportNode = node;
+			},
+		});
+
+		$effect(() => {
+			const node = this.#ref.current;
+			const listNode = this.#list.ref.current;
+			if (!node || !listNode) return;
+			let aF: number;
+
+			const observer = new ResizeObserver(() => {
+				aF = requestAnimationFrame(() => {
+					const height = node.offsetHeight;
+					listNode.style.setProperty(
+						"--bits-command-list-height",
+						`${height.toFixed(1)}px`
+					);
+				});
+			});
+
+			observer.observe(node);
+
+			return () => {
+				cancelAnimationFrame(aF);
+				observer.unobserve(node);
+			};
+		});
+	}
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.current,
+				[VIEWPORT_ATTR]: "",
+			}) as const
+	);
+}
+
+export function useCommandRoot(props: CommandRootStateProps) {
+	return setCommandRootContext(new CommandRootState(props));
+}
+
+export function useCommandEmpty(props: CommandEmptyStateProps) {
+	return getCommandRootContext().createEmpty(props);
+}
+
+export function useCommandItem(props: CommandItemStateProps) {
+	return getCommandRootContext().createItem(props);
+}
+
+export function useCommandGroupContainer(props: CommandGroupContainerStateProps) {
+	return setCommandGroupContainerContext(getCommandRootContext().createGroupContainer(props));
+}
+
+export function useCommandGroupHeading(props: CommandGroupHeadingStateProps) {
+	return getCommandGroupContainerContext().createGroupHeading(props);
+}
+
+export function useCommandGroupItems(props: CommandGroupItemsStateProps) {
+	return getCommandGroupContainerContext().createGroupItems(props);
+}
+
+export function useCommandInput(props: CommandInputStateProps) {
+	return getCommandRootContext().createInput(props);
+}
+
+export function useCommandLoading(props: CommandLoadingStateProps) {
+	return new CommandLoadingState(props);
+}
+
+export function useCommandSeparator(props: CommandSeparatorStateProps) {
+	return getCommandRootContext().createSeparator(props);
+}
+
+export function useCommandList(props: CommandListStateProps) {
+	return setCommandListContext(getCommandRootContext().createList(props));
+}
+
+export function useCommandViewport(props: CommandViewportStateProps) {
+	return getCommandListContext().createViewport(props);
+}
+
+export function useCommandLabel(props: CommandLabelStateProps) {
+	return getCommandRootContext().createLabel(props);
+}
diff --git a/packages/bits-ui/src/lib/bits/command/components/_command-label.svelte b/packages/bits-ui/src/lib/bits/command/components/_command-label.svelte
new file mode 100644
index 000000000..38db03747
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/components/_command-label.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import { useCommandLabel } from "../command.svelte.js";
+	import {
+		type PrimitiveLabelAttributes,
+		type WithElementRef,
+		mergeProps,
+		useId,
+	} from "$lib/shared/index.js";
+	import type { WithChildren } from "$lib/internal/types.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithChildren<WithElementRef<PrimitiveLabelAttributes>> = $props();
+
+	const labelState = useCommandLabel({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, labelState.props));
+</script>
+
+<label {...mergedProps}>
+	{@render children?.()}
+</label>
diff --git a/packages/bits-ui/src/lib/bits/command/components/command-empty.svelte b/packages/bits-ui/src/lib/bits/command/components/command-empty.svelte
new file mode 100644
index 000000000..5e60188f9
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/components/command-empty.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { EmptyProps } from "../index.js";
+	import { useCommandEmpty } from "../command.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		children,
+		child,
+		...restProps
+	}: EmptyProps = $props();
+
+	const emptyState = useCommandEmpty({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(emptyState.props, restProps));
+</script>
+
+{#if emptyState.shouldRender}
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/command/components/command-group-heading.svelte b/packages/bits-ui/src/lib/bits/command/components/command-group-heading.svelte
new file mode 100644
index 000000000..852dd2b72
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/components/command-group-heading.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import { useCommandGroupHeading } from "../command.svelte.js";
+	import type { GroupHeadingProps } from "../index.js";
+	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		children,
+		child,
+		...restProps
+	}: GroupHeadingProps = $props();
+
+	const headingState = useCommandGroupHeading({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, headingState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/command/components/command-group-items.svelte b/packages/bits-ui/src/lib/bits/command/components/command-group-items.svelte
new file mode 100644
index 000000000..5072fae7f
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/components/command-group-items.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { GroupItemsProps } from "../index.js";
+	import { useCommandGroupItems } from "../command.svelte.js";
+	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		children,
+		child,
+		...restProps
+	}: GroupItemsProps = $props();
+
+	const groupItemsState = useCommandGroupItems({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, groupItemsState.props));
+</script>
+
+<div style="display: contents;">
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
+</div>
diff --git a/packages/bits-ui/src/lib/bits/command/components/command-group.svelte b/packages/bits-ui/src/lib/bits/command/components/command-group.svelte
new file mode 100644
index 000000000..a2cfe83b2
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/components/command-group.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { CommandGroupProps } from "../types.js";
+	import { useCommandGroupContainer } from "../command.svelte.js";
+	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		value = "",
+		forceMount = false,
+		children,
+		child,
+		...restProps
+	}: CommandGroupProps = $props();
+
+	const groupState = useCommandGroupContainer({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		forceMount: box.with(() => forceMount),
+		value: box.with(() => value),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, groupState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/command/components/command-input.svelte b/packages/bits-ui/src/lib/bits/command/components/command-input.svelte
new file mode 100644
index 000000000..cd7ac0da2
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/components/command-input.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { InputProps } from "../index.js";
+	import { useCommandInput } from "../command.svelte.js";
+	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		value = $bindable(""),
+		autofocus = false,
+		id = useId(),
+		ref = $bindable(null),
+		child,
+		...restProps
+	}: InputProps = $props();
+
+	const inputState = useCommandInput({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		value: box.with(
+			() => value,
+			(v) => {
+				value = v;
+			}
+		),
+		autofocus: box.with(() => autofocus ?? false),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, inputState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<input {...mergedProps} bind:value />
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/command/components/command-item.svelte b/packages/bits-ui/src/lib/bits/command/components/command-item.svelte
new file mode 100644
index 000000000..f4314da4e
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/components/command-item.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { ItemProps } from "../index.js";
+	import { getCommandGroupContainerContext, useCommandItem } from "../command.svelte.js";
+	import { noop } from "$lib/internal/callbacks.js";
+	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		value = "",
+		disabled = false,
+		children,
+		child,
+		onSelect = noop,
+		forceMount = false,
+		keywords = [],
+		...restProps
+	}: ItemProps = $props();
+
+	const group = getCommandGroupContainerContext(null);
+
+	const itemState = useCommandItem({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		value: box.with(() => value),
+		disabled: box.with(() => disabled),
+		onSelect: box.with(() => onSelect),
+		forceMount: box.with(() => forceMount),
+		keywords: box.with(() => keywords),
+		group,
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, itemState.props));
+</script>
+
+{#key itemState.root.key}
+	<div style="display: contents;">
+		{#if itemState.shouldRender}
+			{#if child}
+				{@render child({ props: mergedProps })}
+			{:else}
+				<div {...mergedProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/if}
+	</div>
+{/key}
diff --git a/packages/bits-ui/src/lib/bits/command/components/command-link-item.svelte b/packages/bits-ui/src/lib/bits/command/components/command-link-item.svelte
new file mode 100644
index 000000000..e761487c6
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/components/command-link-item.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { LinkItemProps } from "../index.js";
+	import { getCommandGroupContainerContext, useCommandItem } from "../command.svelte.js";
+	import { noop } from "$lib/internal/callbacks.js";
+	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		value = "",
+		disabled = false,
+		children,
+		child,
+		onSelect = noop,
+		forceMount = false,
+		keywords = [],
+		...restProps
+	}: LinkItemProps = $props();
+
+	const group = getCommandGroupContainerContext(null);
+
+	const itemState = useCommandItem({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		value: box.with(() => value),
+		disabled: box.with(() => disabled),
+		onSelect: box.with(() => onSelect),
+		forceMount: box.with(() => forceMount),
+		keywords: box.with(() => keywords),
+		group,
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, itemState.props));
+</script>
+
+{#key itemState.root.key}
+	<div style="display: contents;">
+		{#if itemState.shouldRender}
+			{#if child}
+				{@render child({ props: mergedProps })}
+			{:else}
+				<a {...mergedProps}>
+					{@render children?.()}
+				</a>
+			{/if}
+		{/if}
+	</div>
+{/key}
diff --git a/packages/bits-ui/src/lib/bits/command/components/command-list.svelte b/packages/bits-ui/src/lib/bits/command/components/command-list.svelte
new file mode 100644
index 000000000..ad28469e1
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/components/command-list.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { ListProps } from "../index.js";
+	import { useCommandList } from "../command.svelte.js";
+	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		child,
+		children,
+		"aria-label": ariaLabel,
+		...restProps
+	}: ListProps = $props();
+
+	const listState = useCommandList({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		ariaLabel: box.with(() => ariaLabel ?? "Suggestions..."),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, listState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/command/components/command-loading.svelte b/packages/bits-ui/src/lib/bits/command/components/command-loading.svelte
new file mode 100644
index 000000000..742a7217e
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/components/command-loading.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { LoadingProps } from "../index.js";
+	import { useCommandLoading } from "../command.svelte.js";
+	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		progress = 0,
+		id = useId(),
+		ref = $bindable(null),
+		children,
+		child,
+		...restProps
+	}: LoadingProps = $props();
+
+	const loadingState = useCommandLoading({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		progress: box.with(() => progress),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, loadingState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/command/components/command-separator.svelte b/packages/bits-ui/src/lib/bits/command/components/command-separator.svelte
new file mode 100644
index 000000000..14290140e
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/components/command-separator.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { SeparatorProps } from "../index.js";
+	import { useCommandSeparator } from "../command.svelte.js";
+	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		forceMount = false,
+		children,
+		child,
+		...restProps
+	}: SeparatorProps = $props();
+
+	const separatorState = useCommandSeparator({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		forceMount: box.with(() => forceMount),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, separatorState.props));
+</script>
+
+{#if separatorState.shouldRender}
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/command/components/command-viewport.svelte b/packages/bits-ui/src/lib/bits/command/components/command-viewport.svelte
new file mode 100644
index 000000000..2256b38f6
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/components/command-viewport.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import { useCommandViewport } from "../command.svelte.js";
+	import type { ViewportProps } from "../index.js";
+	import { useId } from "$lib/internal/useId.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		children,
+		child,
+		...restProps
+	}: ViewportProps = $props();
+
+	const listViewportState = useCommandViewport({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, listViewportState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/command/components/command.svelte b/packages/bits-ui/src/lib/bits/command/components/command.svelte
new file mode 100644
index 000000000..fd68941ff
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/components/command.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import { defaultFilter, useCommandRoot } from "../command.svelte.js";
+	import type { RootProps } from "../index.js";
+	import CommandLabel from "./_command-label.svelte";
+	import { noop } from "$lib/internal/callbacks.js";
+	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		value = $bindable(""),
+		onValueChange = noop,
+		loop = false,
+		shouldFilter = true,
+		filter = defaultFilter,
+		label = "",
+		vimBindings = true,
+		disablePointerSelection = false,
+		children,
+		child,
+		...restProps
+	}: RootProps = $props();
+
+	const rootState = useCommandRoot({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		filter: box.with(() => filter),
+		shouldFilter: box.with(() => shouldFilter),
+		loop: box.with(() => loop),
+		value: box.with(
+			() => value,
+			(v) => {
+				if (v !== value) {
+					value = v;
+					onValueChange(v);
+				}
+			}
+		),
+		vimBindings: box.with(() => vimBindings),
+		disablePointerSelection: box.with(() => disablePointerSelection),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+{#snippet Label()}
+	<CommandLabel>
+		{label}
+	</CommandLabel>
+{/snippet}
+
+{#if child}
+	{@render Label()}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render Label()}
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/command/index.ts b/packages/bits-ui/src/lib/bits/command/index.ts
new file mode 100644
index 000000000..f4e4e37fa
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/index.ts
@@ -0,0 +1,27 @@
+export { default as Root } from "./components/command.svelte";
+export { default as Empty } from "./components/command-empty.svelte";
+export { default as Group } from "./components/command-group.svelte";
+export { default as GroupHeading } from "./components/command-group-heading.svelte";
+export { default as GroupItems } from "./components/command-group-items.svelte";
+export { default as Input } from "./components/command-input.svelte";
+export { default as Item } from "./components/command-item.svelte";
+export { default as LinkItem } from "./components/command-link-item.svelte";
+export { default as List } from "./components/command-list.svelte";
+export { default as Viewport } from "./components/command-viewport.svelte";
+export { default as Loading } from "./components/command-loading.svelte";
+export { default as Separator } from "./components/command-separator.svelte";
+
+export type {
+	CommandRootProps as RootProps,
+	CommandEmptyProps as EmptyProps,
+	CommandGroupProps as GroupProps,
+	CommandGroupHeadingProps as GroupHeadingProps,
+	CommandGroupItemsProps as GroupItemsProps,
+	CommandItemProps as ItemProps,
+	CommandLinkItemProps as LinkItemProps,
+	CommandInputProps as InputProps,
+	CommandSeparatorProps as SeparatorProps,
+	CommandListProps as ListProps,
+	CommandLoadingProps as LoadingProps,
+	CommandViewportProps as ViewportProps,
+} from "./types.js";
diff --git a/packages/bits-ui/src/lib/bits/command/types.ts b/packages/bits-ui/src/lib/bits/command/types.ts
new file mode 100644
index 000000000..307b11554
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/types.ts
@@ -0,0 +1,194 @@
+import type {
+	PrimitiveAnchorAttributes,
+	PrimitiveDivAttributes,
+	PrimitiveInputAttributes,
+	WithChild,
+	Without,
+} from "$lib/shared/index.js";
+
+export type CommandState = {
+	/** The value of the search query */
+	search: string;
+	/** The value of the selected command menu item */
+	value: string;
+	/** The filtered items */
+	filtered: {
+		/** The count of all visible items. */
+		count: number;
+		/** Map from visible item id to its search store. */
+		items: Map<string, number>;
+		/** Set of groups with at least one visible item. */
+		groups: Set<string>;
+	};
+};
+
+export type CommandRootPropsWithoutHTML = WithChild<{
+	/**
+	 * An accessible label for the command menu.
+	 * Not visible & only used for screen readers.
+	 */
+	label?: string;
+
+	/**
+	 * Optionally set to `false` to turn off the automatic filtering
+	 * and sorting. If `false`, you must conditionally render valid
+	 * items yourself.
+	 */
+	shouldFilter?: boolean;
+
+	/**
+	 * A custom filter function for whether each command item should
+	 * match the query. It should return a number between `0` and `1`,
+	 * with `1` being a perfect match, and `0` being no match, resulting
+	 * in the item being hidden entirely.
+	 *
+	 * By default, it will use the `command-score` package to score.
+	 */
+	filter?: (value: string, search: string, keywords?: string[]) => number;
+
+	/**
+	 * Optionally provide or bind to the selected command menu item.
+	 */
+	value?: string;
+
+	/**
+	 * A function that is called when the selected command menu item
+	 * changes. It receives the new value as an argument.
+	 */
+	onValueChange?: (value: string) => void;
+
+	/**
+	 * Optionally set to `true` to enable looping through the items
+	 * when the user reaches the end of the list using the keyboard.
+	 */
+	loop?: boolean;
+
+	/**
+	 * Optionally set to `true` to disable selection via pointer events.
+	 */
+	disablePointerSelection?: boolean;
+
+	/**
+	 * Set the `false` to disable the option to use ctrl+n/j/p/k (vim style) navigation.
+	 *
+	 * @defaultValue true
+	 */
+	vimBindings?: boolean;
+}>;
+
+export type CommandRootProps = CommandRootPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, CommandRootPropsWithoutHTML>;
+
+export type CommandEmptyPropsWithoutHTML = WithChild;
+
+export type CommandEmptyProps = CommandEmptyPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, CommandEmptyPropsWithoutHTML>;
+
+export type CommandGroupPropsWithoutHTML = WithChild<{
+	/**
+	 * A unique value for the group.
+	 */
+	value?: string;
+
+	/**
+	 * Whether to force mount the group container regardless of
+	 * filtering logic.
+	 */
+	forceMount?: boolean;
+}>;
+
+export type CommandGroupProps = CommandGroupPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, CommandGroupPropsWithoutHTML>;
+
+export type CommandGroupHeadingPropsWithoutHTML = WithChild;
+
+export type CommandGroupHeadingProps = CommandGroupHeadingPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, CommandGroupHeadingPropsWithoutHTML>;
+
+export type CommandGroupItemsPropsWithoutHTML = WithChild;
+
+export type CommandGroupItemsProps = CommandGroupItemsPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, CommandGroupItemsPropsWithoutHTML>;
+
+export type CommandItemPropsWithoutHTML = WithChild<{
+	/**
+	 * Whether the item is disabled.
+	 *
+	 * @defaultValue false
+	 */
+	disabled?: boolean;
+
+	/**
+	 * A callback that is fired when the item is selected, either via
+	 * click or keyboard selection.
+	 */
+	onSelect?: () => void;
+
+	/**
+	 * A unique value for this item that will be used when filtering
+	 * and ranking the items. If not provided, an attempt will be made
+	 * to use the `textContent` of the item. If the `textContent` is dynamic,
+	 * you will need to provide a stable unique value for the item.
+	 */
+	value?: string;
+
+	/**
+	 * A list of keywords that will be used to filter the item.
+	 */
+	keywords?: string[];
+
+	/**
+	 * Whether to always mount the item regardless of filtering logic.
+	 */
+	forceMount?: boolean;
+}>;
+
+export type CommandItemProps = CommandItemPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, CommandItemPropsWithoutHTML>;
+
+export type CommandLinkItemPropsWithoutHTML = CommandItemPropsWithoutHTML;
+
+export type CommandLinkItemProps = CommandLinkItemPropsWithoutHTML &
+	Without<PrimitiveAnchorAttributes, CommandLinkItemPropsWithoutHTML>;
+
+export type CommandInputPropsWithoutHTML = WithChild<{
+	/**
+	 * The value of the input element, used to search/filter items.
+	 */
+	value?: string;
+}>;
+
+export type CommandInputProps = CommandInputPropsWithoutHTML &
+	Without<PrimitiveInputAttributes, CommandInputPropsWithoutHTML>;
+
+export type CommandListPropsWithoutHTML = WithChild;
+
+export type CommandListProps = CommandListPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, CommandListPropsWithoutHTML>;
+
+export type CommandSeparatorPropsWithoutHTML = WithChild<{
+	/**
+	 * Whether to force mount the separator container regardless of
+	 * filtering logic.
+	 */
+	forceMount?: boolean;
+}>;
+
+export type CommandSeparatorProps = CommandSeparatorPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, CommandSeparatorPropsWithoutHTML>;
+
+export type CommandLoadingPropsWithoutHTML = WithChild<{
+	/**
+	 * The current progress of the loading state.
+	 * This is a number between `0` and `100`.
+	 */
+	progress?: number;
+}>;
+
+export type CommandLoadingProps = CommandLoadingPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, CommandLoadingPropsWithoutHTML>;
+
+export type CommandViewportPropsWithoutHTML = WithChild;
+
+export type CommandViewportProps = CommandViewportPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, CommandViewportPropsWithoutHTML>;
diff --git a/packages/bits-ui/src/lib/bits/command/utils.ts b/packages/bits-ui/src/lib/bits/command/utils.ts
new file mode 100644
index 000000000..e910d5ea8
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/command/utils.ts
@@ -0,0 +1,30 @@
+export function findNextSibling(el: Element, selector: string) {
+	let sibling = el.nextElementSibling;
+
+	while (sibling) {
+		if (sibling.matches(selector)) return sibling;
+		sibling = sibling.nextElementSibling;
+	}
+}
+
+export function findPreviousSibling(el: Element, selector: string) {
+	let sibling = el.previousElementSibling;
+
+	while (sibling) {
+		if (sibling.matches(selector)) return sibling;
+		sibling = sibling.previousElementSibling;
+	}
+}
+
+export function findFirstStartMarkerWithImmediateSiblingAsEnd(el: Element, type: "item" | "group") {
+	const startMarkers = el.querySelectorAll<HTMLElement>(`[data-bits-command-${type}-start]`);
+
+	for (const startMarker of startMarkers) {
+		const endMarker = startMarker.nextElementSibling;
+		if (endMarker && endMarker.hasAttribute(`data-bits-command-${type}-end`)) {
+			return startMarker;
+		}
+	}
+
+	return null;
+}
diff --git a/packages/bits-ui/src/lib/bits/index.ts b/packages/bits-ui/src/lib/bits/index.ts
index 81fc69516..c078f6475 100644
--- a/packages/bits-ui/src/lib/bits/index.ts
+++ b/packages/bits-ui/src/lib/bits/index.ts
@@ -7,6 +7,7 @@ export * as Calendar from "./calendar/index.js";
 export * as Checkbox from "./checkbox/index.js";
 export * as Collapsible from "./collapsible/index.js";
 export * as Combobox from "./combobox/index.js";
+export * as Command from "./command/index.js";
 export * as ContextMenu from "./context-menu/index.js";
 export * as DateField from "./date-field/index.js";
 export * as DatePicker from "./date-picker/index.js";
diff --git a/packages/bits-ui/src/lib/bits/link-preview/components/link-preview-content-static.svelte b/packages/bits-ui/src/lib/bits/link-preview/components/link-preview-content-static.svelte
index aa01f8824..4ab9e543a 100644
--- a/packages/bits-ui/src/lib/bits/link-preview/components/link-preview-content-static.svelte
+++ b/packages/bits-ui/src/lib/bits/link-preview/components/link-preview-content-static.svelte
@@ -53,7 +53,7 @@
 		{#if child}
 			{@render child({ props })}
 		{:else}
-			<div {...props} bind:this={ref}>
+			<div {...props}>
 				{@render children?.()}
 			</div>
 		{/if}
diff --git a/packages/bits-ui/src/lib/bits/link-preview/components/link-preview-content.svelte b/packages/bits-ui/src/lib/bits/link-preview/components/link-preview-content.svelte
index 6136bd8b4..735a74aea 100644
--- a/packages/bits-ui/src/lib/bits/link-preview/components/link-preview-content.svelte
+++ b/packages/bits-ui/src/lib/bits/link-preview/components/link-preview-content.svelte
@@ -83,7 +83,7 @@
 		{#if child}
 			{@render child({ props: mergedProps })}
 		{:else}
-			<div {...mergedProps} bind:this={ref}>
+			<div {...mergedProps}>
 				{@render children?.()}
 			</div>
 		{/if}
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-radio-item.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-radio-item.svelte
index 080849e9c..39880872c 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-radio-item.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-radio-item.svelte
@@ -40,7 +40,7 @@
 {#if child}
 	{@render child({ props: mergedProps, checked: radioItemState.isChecked })}
 {:else}
-	<div {...mergedProps} bind:this={ref}>
+	<div {...mergedProps}>
 		{@render children?.({ checked: radioItemState.isChecked })}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/menubar/components/menubar-trigger.svelte b/packages/bits-ui/src/lib/bits/menubar/components/menubar-trigger.svelte
index 0652fd0bb..03665abb7 100644
--- a/packages/bits-ui/src/lib/bits/menubar/components/menubar-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/menubar/components/menubar-trigger.svelte
@@ -41,7 +41,7 @@
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}
-		<button bind:this={ref} {...mergedProps}>
+		<button {...mergedProps}>
 			{@render children?.()}
 		</button>
 	{/if}
diff --git a/packages/bits-ui/src/lib/bits/menubar/components/menubar.svelte b/packages/bits-ui/src/lib/bits/menubar/components/menubar.svelte
index b3a6e0286..e65db77bd 100644
--- a/packages/bits-ui/src/lib/bits/menubar/components/menubar.svelte
+++ b/packages/bits-ui/src/lib/bits/menubar/components/menubar.svelte
@@ -42,7 +42,7 @@
 {#if child}
 	{@render child({ props: mergedProps })}
 {:else}
-	<div {...mergedProps} bind:this={ref}>
+	<div {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-item.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-item.svelte
index 6663763ff..09c8f6643 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-item.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-item.svelte
@@ -25,7 +25,7 @@
 {#if child}
 	{@render child({ props: mergedProps })}
 {:else}
-	<li {...mergedProps} bind:this={ref}>
+	<li {...mergedProps}>
 		{@render children?.()}
 	</li>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-link.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-link.svelte
index 9911c2dc4..195e4ef93 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-link.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-link.svelte
@@ -28,7 +28,7 @@
 {#if child}
 	{@render child({ props: mergedProps })}
 {:else}
-	<a {...mergedProps} bind:this={ref}>
+	<a {...mergedProps}>
 		{@render children?.()}
 	</a>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-value.svelte b/packages/bits-ui/src/lib/bits/select/components/select-value.svelte
index 351f83d8b..d1dc2f48a 100644
--- a/packages/bits-ui/src/lib/bits/select/components/select-value.svelte
+++ b/packages/bits-ui/src/lib/bits/select/components/select-value.svelte
@@ -25,7 +25,7 @@
 {#if child}
 	{@render child({ props: mergedProps })}
 {:else}
-	<span {...mergedProps} bind:this={ref}>
+	<span {...mergedProps}>
 		{#if valueState.showPlaceholder}
 			{placeholder}
 		{:else}
diff --git a/packages/bits-ui/src/lib/bits/switch/components/switch.svelte b/packages/bits-ui/src/lib/bits/switch/components/switch.svelte
index 760731fd6..e9bef6d74 100644
--- a/packages/bits-ui/src/lib/bits/switch/components/switch.svelte
+++ b/packages/bits-ui/src/lib/bits/switch/components/switch.svelte
@@ -46,7 +46,7 @@
 {#if child}
 	{@render child({ props: mergedProps, checked: rootState.checked.current })}
 {:else}
-	<button bind:this={ref} {...mergedProps}>
+	<button {...mergedProps}>
 		{@render children?.({ checked: rootState.checked.current })}
 	</button>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group-item.svelte b/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group-item.svelte
index 9db6c2c7a..820c10915 100644
--- a/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group-item.svelte
+++ b/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group-item.svelte
@@ -32,7 +32,7 @@
 {#if child}
 	{@render child({ props: mergedProps, pressed: itemState.isPressed })}
 {:else}
-	<button bind:this={ref} {...mergedProps}>
+	<button {...mergedProps}>
 		{@render children?.({ pressed: itemState.isPressed })}
 	</button>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/tooltip/components/tooltip-content-static.svelte b/packages/bits-ui/src/lib/bits/tooltip/components/tooltip-content-static.svelte
index e1861d89f..5992f184a 100644
--- a/packages/bits-ui/src/lib/bits/tooltip/components/tooltip-content-static.svelte
+++ b/packages/bits-ui/src/lib/bits/tooltip/components/tooltip-content-static.svelte
@@ -54,7 +54,7 @@
 		{#if child}
 			{@render child({ props: mergedProps })}
 		{:else}
-			<div {...mergedProps} bind:this={ref}>
+			<div {...mergedProps}>
 				{@render children?.()}
 			</div>
 		{/if}
diff --git a/packages/bits-ui/src/lib/bits/tooltip/components/tooltip-content.svelte b/packages/bits-ui/src/lib/bits/tooltip/components/tooltip-content.svelte
index c016989e2..5e767571c 100644
--- a/packages/bits-ui/src/lib/bits/tooltip/components/tooltip-content.svelte
+++ b/packages/bits-ui/src/lib/bits/tooltip/components/tooltip-content.svelte
@@ -80,7 +80,7 @@
 		{#if child}
 			{@render child({ props: mergedProps })}
 		{:else}
-			<div {...mergedProps} bind:this={ref}>
+			<div {...mergedProps}>
 				{@render children?.()}
 			</div>
 		{/if}
diff --git a/packages/bits-ui/src/lib/internal/afterSleep.ts b/packages/bits-ui/src/lib/internal/afterSleep.ts
new file mode 100644
index 000000000..af05a4fea
--- /dev/null
+++ b/packages/bits-ui/src/lib/internal/afterSleep.ts
@@ -0,0 +1,3 @@
+export function afterSleep(ms: number, cb: () => void) {
+	setTimeout(cb, ms);
+}
diff --git a/packages/bits-ui/src/lib/internal/dom.ts b/packages/bits-ui/src/lib/internal/dom.ts
new file mode 100644
index 000000000..c5905eb72
--- /dev/null
+++ b/packages/bits-ui/src/lib/internal/dom.ts
@@ -0,0 +1,9 @@
+export function getFirstNonCommentChild(element: HTMLElement | null) {
+	if (!element) return null;
+	for (const child of element.childNodes) {
+		if (child.nodeType !== Node.COMMENT_NODE) {
+			return child;
+		}
+	}
+	return null;
+}
diff --git a/packages/bits-ui/src/lib/internal/kbd.ts b/packages/bits-ui/src/lib/internal/kbd.ts
index cb62084e4..ace1d9bf6 100644
--- a/packages/bits-ui/src/lib/internal/kbd.ts
+++ b/packages/bits-ui/src/lib/internal/kbd.ts
@@ -74,4 +74,7 @@ export const kbd = {
 	P: "P",
 	A: "A",
 	p: "p",
+	n: "n",
+	j: "j",
+	k: "k",
 };
diff --git a/packages/bits-ui/src/lib/types.ts b/packages/bits-ui/src/lib/types.ts
index 9e378f8a6..da8832c74 100644
--- a/packages/bits-ui/src/lib/types.ts
+++ b/packages/bits-ui/src/lib/types.ts
@@ -7,6 +7,7 @@ export type * from "$lib/bits/calendar/types.js";
 export type * from "$lib/bits/checkbox/types.js";
 export type * from "$lib/bits/collapsible/types.js";
 export type * from "$lib/bits/combobox/types.js";
+export type * from "$lib/bits/command/types.js";
 export type * from "$lib/bits/context-menu/types.js";
 export type * from "$lib/bits/date-field/types.js";
 export type * from "$lib/bits/date-picker/types.js";
diff --git a/sites/docs/content/components/command.md b/sites/docs/content/components/command.md
new file mode 100644
index 000000000..d04692924
--- /dev/null
+++ b/sites/docs/content/components/command.md
@@ -0,0 +1,61 @@
+---
+title: Command
+description: A command menu component that can be used to search, filter, and select items.
+---
+
+<script>
+	import { APISection, ComponentPreviewV2, CommandDemo, CommandDemoDialog } from '$lib/components/index.js'
+	export let schemas;
+</script>
+
+<ComponentPreviewV2 name="command-demo" comp="Command">
+
+{#snippet preview()}
+<CommandDemo />
+{/snippet}
+
+</ComponentPreviewV2>
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { Combobox } from "bits-ui";
+</script>
+
+<Command.Root>
+	<Combobox.Input />
+	<Command.List>
+		<Command.Viewport>
+			<Command.Empty />
+			<Command.Loading />
+			<Command.Group>
+				<Command.GroupHeading />
+				<Command.GroupItems>
+					<Command.Item />
+					<Command.LinkItem />
+				</Command.GroupItems>
+			</Command.Group>
+			<Command.Separator />
+			<Command.Item />
+			<Command.LinkItem />
+		</Command.Viewport>
+	</Command.List>
+</Command.Root>
+```
+
+## Within a Dialog
+
+You can combine the `Command` component with the `Dialog` component to display the command menu within a modal.
+
+<br>
+
+<ComponentPreviewV2 name="command-demo-dialog" comp="Command" size="xs">
+
+{#snippet preview()}
+<CommandDemoDialog />
+{/snippet}
+
+</ComponentPreviewV2>
+
+<APISection {schemas} />
diff --git a/sites/docs/src/lib/components/demos/combobox-demo.svelte b/sites/docs/src/lib/components/demos/combobox-demo.svelte
index c7d0f1568..13b616ce5 100644
--- a/sites/docs/src/lib/components/demos/combobox-demo.svelte
+++ b/sites/docs/src/lib/components/demos/combobox-demo.svelte
@@ -70,7 +70,7 @@
 			<Combobox.Viewport class="p-1">
 				{#each filteredFruits as fruit, i (i + fruit.value)}
 					<Combobox.Item
-						class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none duration-75 data-[highlighted]:bg-muted"
+						class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none  data-[highlighted]:bg-muted"
 						value={fruit.value}
 						label={fruit.label}
 					>
diff --git a/sites/docs/src/lib/components/demos/command-demo-dialog.svelte b/sites/docs/src/lib/components/demos/command-demo-dialog.svelte
new file mode 100644
index 000000000..120dc6eec
--- /dev/null
+++ b/sites/docs/src/lib/components/demos/command-demo-dialog.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { Command, Dialog } from "bits-ui";
+	import Sticker from "phosphor-svelte/lib/Sticker";
+	import CodeBlock from "phosphor-svelte/lib/CodeBlock";
+	import Palette from "phosphor-svelte/lib/Palette";
+	import CalendarBlank from "phosphor-svelte/lib/CalendarBlank";
+	import RadioButton from "phosphor-svelte/lib/RadioButton";
+	import Textbox from "phosphor-svelte/lib/Textbox";
+
+	let dialogOpen = $state(false);
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			dialogOpen = true;
+		}
+	}
+</script>
+
+<svelte:document onkeydown={handleKeydown} />
+
+<Dialog.Root bind:open={dialogOpen}>
+	<Dialog.Trigger
+		class="inline-flex h-12 select-none
+	items-center justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
+	text-[15px] font-semibold text-background shadow-mini transition-colors hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+	>
+		Open Command Menu ⌘J
+	</Dialog.Trigger>
+	<Dialog.Portal>
+		<Dialog.Overlay
+			class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+		/>
+		<Dialog.Content
+			class="fixed left-[50%] top-[50%] z-50 w-full max-w-[94%] translate-x-[-50%] translate-y-[-50%] rounded-card-lg  bg-background shadow-popover outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:max-w-[490px] md:w-full"
+		>
+			<Dialog.Title class="sr-only">Command Menu</Dialog.Title>
+			<Dialog.Description class="sr-only">
+				This is the command menu. Use the arrow keys to navigate and press ⌘K to open the
+				search bar.
+			</Dialog.Description>
+			<Command.Root
+				class="flex h-full w-full flex-col divide-y divide-border self-start overflow-hidden rounded-xl border border-muted bg-background"
+			>
+				<Command.Input
+					class="focus-override inline-flex h-input w-[296px] truncate rounded-xl bg-background px-4 text-sm transition-colors placeholder:text-foreground-alt/50 focus:outline-none focus:ring-0"
+					placeholder="Search for something..."
+				/>
+				<Command.List class="max-h-[280px] overflow-y-auto overflow-x-hidden px-2 pb-2">
+					<Command.Viewport>
+						<Command.Empty
+							class="flex w-full items-center justify-center pb-6 pt-8 text-sm text-muted-foreground"
+						>
+							No results found.
+						</Command.Empty>
+						<Command.Group>
+							<Command.GroupHeading
+								class="px-3 pb-2 pt-4 text-xs text-muted-foreground"
+							>
+								Suggestions
+							</Command.GroupHeading>
+							<Command.GroupItems>
+								<Command.Item
+									class="flex h-10 cursor-pointer select-none items-center gap-2 rounded-button px-3 py-2.5 text-sm capitalize outline-none data-[selected]:bg-muted"
+									keywords={["getting started", "tutorial"]}
+								>
+									<Sticker class="size-4" />
+									Introduction
+								</Command.Item>
+								<Command.Item
+									class="flex h-10 cursor-pointer select-none items-center gap-2 rounded-button px-3 py-2.5 text-sm capitalize outline-none data-[selected]:bg-muted"
+									keywords={["child", "custom element", "snippets"]}
+								>
+									<CodeBlock class="size-4 " />
+									Delegation
+								</Command.Item>
+								<Command.Item
+									class="flex h-10 cursor-pointer select-none items-center gap-2 rounded-button px-3 py-2.5 text-sm capitalize outline-none data-[selected]:bg-muted"
+									keywords={["css", "theme", "colors", "fonts", "tailwind"]}
+								>
+									<Palette class="size-4" />
+									Styling
+								</Command.Item>
+							</Command.GroupItems>
+						</Command.Group>
+						<Command.Separator />
+						<Command.Group>
+							<Command.GroupHeading
+								class="px-3 pb-2 pt-4 text-xs text-muted-foreground"
+							>
+								Components
+							</Command.GroupHeading>
+							<Command.GroupItems>
+								<Command.Item
+									class="flex h-10 cursor-pointer select-none items-center gap-2 rounded-button px-3 py-2.5 text-sm capitalize outline-none data-[selected]:bg-muted"
+									keywords={["dates", "times"]}
+								>
+									<CalendarBlank class="size-4" />
+									Calendar
+								</Command.Item>
+								<Command.Item
+									class="flex h-10 cursor-pointer select-none items-center gap-2 rounded-button px-3 py-2.5 text-sm capitalize outline-none data-[selected]:bg-muted"
+									keywords={["buttons", "forms"]}
+								>
+									<RadioButton class="size-4" />
+									Radio Group
+								</Command.Item>
+								<Command.Item
+									class="flex h-10 cursor-pointer select-none items-center gap-2 rounded-button px-3 py-2.5 text-sm capitalize outline-none data-[selected]:bg-muted"
+									keywords={["inputs", "text", "autocomplete"]}
+								>
+									<Textbox class="size-4" />
+									Combobox
+								</Command.Item>
+							</Command.GroupItems>
+						</Command.Group>
+					</Command.Viewport>
+				</Command.List>
+			</Command.Root>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
diff --git a/sites/docs/src/lib/components/demos/command-demo.svelte b/sites/docs/src/lib/components/demos/command-demo.svelte
new file mode 100644
index 000000000..d4f1978ca
--- /dev/null
+++ b/sites/docs/src/lib/components/demos/command-demo.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { Command } from "bits-ui";
+	import Sticker from "phosphor-svelte/lib/Sticker";
+	import CodeBlock from "phosphor-svelte/lib/CodeBlock";
+	import Palette from "phosphor-svelte/lib/Palette";
+	import CalendarBlank from "phosphor-svelte/lib/CalendarBlank";
+	import RadioButton from "phosphor-svelte/lib/RadioButton";
+	import Textbox from "phosphor-svelte/lib/Textbox";
+</script>
+
+<Command.Root
+	class="flex h-full w-full flex-col divide-y divide-border self-start overflow-hidden rounded-xl border border-muted bg-background"
+>
+	<Command.Input
+		class="focus-override inline-flex h-input w-[296px] truncate rounded-xl bg-background px-4 text-sm transition-colors placeholder:text-foreground-alt/50 focus:outline-none focus:ring-0"
+		placeholder="Search for something..."
+	/>
+	<Command.List class="max-h-[280px] overflow-y-auto overflow-x-hidden px-2 pb-2">
+		<Command.Viewport>
+			<Command.Empty
+				class="flex w-full items-center justify-center pb-6 pt-8 text-sm text-muted-foreground"
+			>
+				No results found.
+			</Command.Empty>
+			<Command.Group>
+				<Command.GroupHeading class="px-3 pb-2 pt-4 text-xs text-muted-foreground">
+					Suggestions
+				</Command.GroupHeading>
+				<Command.GroupItems>
+					<Command.Item
+						class="flex h-10 cursor-pointer select-none items-center gap-2 rounded-button px-3 py-2.5 text-sm capitalize outline-none data-[selected]:bg-muted"
+						keywords={["getting started", "tutorial"]}
+					>
+						<Sticker class="size-4" />
+						Introduction
+					</Command.Item>
+					<Command.Item
+						class="flex h-10 cursor-pointer select-none items-center gap-2 rounded-button px-3 py-2.5 text-sm capitalize outline-none data-[selected]:bg-muted"
+						keywords={["child", "custom element", "snippets"]}
+					>
+						<CodeBlock class="size-4 " />
+						Delegation
+					</Command.Item>
+					<Command.Item
+						class="flex h-10 cursor-pointer select-none items-center gap-2 rounded-button px-3 py-2.5 text-sm capitalize outline-none data-[selected]:bg-muted"
+						keywords={["css", "theme", "colors", "fonts", "tailwind"]}
+					>
+						<Palette class="size-4" />
+						Styling
+					</Command.Item>
+				</Command.GroupItems>
+			</Command.Group>
+			<Command.Separator />
+			<Command.Group>
+				<Command.GroupHeading class="px-3 pb-2 pt-4 text-xs text-muted-foreground">
+					Components
+				</Command.GroupHeading>
+				<Command.GroupItems>
+					<Command.Item
+						class="flex h-10 cursor-pointer select-none items-center gap-2 rounded-button px-3 py-2.5 text-sm capitalize outline-none data-[selected]:bg-muted"
+						keywords={["dates", "times"]}
+					>
+						<CalendarBlank class="size-4" />
+						Calendar
+					</Command.Item>
+					<Command.Item
+						class="flex h-10 cursor-pointer select-none items-center gap-2 rounded-button px-3 py-2.5 text-sm capitalize outline-none data-[selected]:bg-muted"
+						keywords={["buttons", "forms"]}
+					>
+						<RadioButton class="size-4" />
+						Radio Group
+					</Command.Item>
+					<Command.Item
+						class="flex h-10 cursor-pointer select-none items-center gap-2 rounded-button px-3 py-2.5 text-sm capitalize outline-none data-[selected]:bg-muted"
+						keywords={["inputs", "text", "autocomplete"]}
+					>
+						<Textbox class="size-4" />
+						Combobox
+					</Command.Item>
+				</Command.GroupItems>
+			</Command.Group>
+		</Command.Viewport>
+	</Command.List>
+</Command.Root>
diff --git a/sites/docs/src/lib/components/demos/dialog-demo.svelte b/sites/docs/src/lib/components/demos/dialog-demo.svelte
index 537018a7d..7f087519f 100644
--- a/sites/docs/src/lib/components/demos/dialog-demo.svelte
+++ b/sites/docs/src/lib/components/demos/dialog-demo.svelte
@@ -17,7 +17,6 @@
 			class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
 		/>
 		<Dialog.Content
-			trapFocus={false}
 			class="fixed left-[50%] top-[50%] z-50 w-full max-w-[94%] translate-x-[-50%] translate-y-[-50%] rounded-card-lg border bg-background p-5 shadow-popover outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:max-w-[490px] md:w-full"
 		>
 			<Dialog.Title
diff --git a/sites/docs/src/lib/components/demos/index.ts b/sites/docs/src/lib/components/demos/index.ts
index 65c5c538e..e9fbfe4c7 100644
--- a/sites/docs/src/lib/components/demos/index.ts
+++ b/sites/docs/src/lib/components/demos/index.ts
@@ -11,6 +11,8 @@ export { default as CheckboxDemoCustom } from "./checkbox-demo-custom.svelte";
 export { default as CollapsibleDemo } from "./collapsible-demo.svelte";
 export { default as CollapsibleDemoTransitions } from "./collapsible-demo-transitions.svelte";
 export { default as ComboboxDemo } from "./combobox-demo.svelte";
+export { default as CommandDemo } from "./command-demo.svelte";
+export { default as CommandDemoDialog } from "./command-demo-dialog.svelte";
 export { default as ContextMenuDemo } from "./context-menu-demo.svelte";
 export { default as DateFieldDemo } from "./date-field-demo.svelte";
 export { default as DateRangeFieldDemo } from "./date-range-field-demo.svelte";
diff --git a/sites/docs/src/lib/components/examples/command/command-wrapper.svelte b/sites/docs/src/lib/components/examples/command/command-wrapper.svelte
new file mode 100644
index 000000000..fb1557012
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/command-wrapper.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	let { children }: { children?: Snippet } = $props();
+</script>
+
+<div style:position="relative" style:width="100%">
+	<div
+		style:height="475px"
+		style:width="100%"
+		style:position="absolute"
+		style:top="0"
+		style:left="0"
+	>
+		{@render children?.()}
+	</div>
+</div>
diff --git a/sites/docs/src/lib/components/examples/command/framer/framer-command.svelte b/sites/docs/src/lib/components/examples/command/framer/framer-command.svelte
new file mode 100644
index 000000000..8a5de8eb6
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/framer/framer-command.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+	import type { Component } from "svelte";
+	import { Command } from "bits-ui";
+	import {
+		AvatarIcon,
+		BadgeIcon,
+		ButtonIcon,
+		ContainerIcon,
+		InputIcon,
+		RadioIcon,
+		SearchIcon,
+		SliderIcon,
+	} from "./icons/index.js";
+	import "./framer.pcss";
+
+	let value = $state("Button");
+
+	type Comp = {
+		value: string;
+		subtitle: string;
+		icon: Component;
+	};
+
+	const components: Comp[] = [
+		{
+			value: "Button",
+			subtitle: "Trigger actions",
+			icon: ButtonIcon,
+		},
+		{
+			value: "Input",
+			subtitle: "Retrieve user input",
+			icon: InputIcon,
+		},
+		{
+			value: "Radio",
+			subtitle: "Single choice input",
+			icon: RadioIcon,
+		},
+		{
+			value: "Badge",
+			subtitle: "Annotate context",
+			icon: BadgeIcon,
+		},
+		{
+			value: "Slider",
+			subtitle: "Free range picker",
+			icon: SliderIcon,
+		},
+		{
+			value: "Avatar",
+			subtitle: "Illustrate the user",
+			icon: AvatarIcon,
+		},
+		{
+			value: "Container",
+			subtitle: "Lay out items",
+			icon: ContainerIcon,
+		},
+	];
+</script>
+
+<div class="framer">
+	<Command.Root bind:value>
+		<div data-command-framer-header="">
+			<SearchIcon />
+			<Command.Input autofocus placeholder="Find components, packages, and interactions..." />
+		</div>
+		<Command.List>
+			<Command.Viewport>
+				<div data-command-framer-items="">
+					<div data-command-framer-left="">
+						<Command.Group>
+							<Command.GroupHeading>Components</Command.GroupHeading>
+							<Command.GroupItems>
+								{#each components as { value, subtitle, icon }}
+									{@const Icon = icon}
+									<Command.Item {value}>
+										<div data-command-framer-icon-wrapper="">
+											<Icon />
+										</div>
+										<div data-command-framer-item-meta="">
+											{value}
+											<span data-command-framer-item-subtitle="">
+												{subtitle}
+											</span>
+										</div>
+									</Command.Item>
+								{/each}
+							</Command.GroupItems>
+						</Command.Group>
+					</div>
+					<hr data-command-framer-separator="" />
+					<div data-command-framer-right="">
+						{#if value === "Button"}
+							<button>Primary</button>
+						{:else if value === "Input"}
+							<input type="text" placeholder="Placeholder" />
+						{:else if value === "Badge"}
+							<div data-command-framer-badge="">Badge</div>
+						{:else if value === "Radio"}
+							<label data-command-framer-radio="">
+								<input type="radio" checked />
+								Radio Button
+							</label>
+						{:else if value === "Avatar"}
+							<img src="/rauno.jpeg" alt="Avatar of Rauno" />
+						{:else if value === "Slider"}
+							<div data-command-framer-slider="">
+								<div></div>
+							</div>
+						{:else if value === "Container"}
+							<div data-command-framer-container=""></div>
+						{/if}
+					</div>
+				</div>
+			</Command.Viewport>
+		</Command.List>
+	</Command.Root>
+</div>
diff --git a/sites/docs/src/lib/components/examples/command/framer/framer.pcss b/sites/docs/src/lib/components/examples/command/framer/framer.pcss
new file mode 100644
index 000000000..b82a6ef1a
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/framer/framer.pcss
@@ -0,0 +1,268 @@
+.framer {
+	[data-command-root] {
+		max-width: 640px;
+		width: 100%;
+		padding: 8px;
+		background: #ffffff;
+		border-radius: 16px;
+		overflow: hidden;
+		font-family: var(--font-sans);
+		border: 1px solid var(--gray6);
+		box-shadow: var(--command-shadow);
+
+		.dark & {
+			background: var(--gray2);
+		}
+	}
+
+	[data-command-framer-header] {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		height: 48px;
+		padding: 0 8px;
+		border-bottom: 1px solid var(--gray5);
+		margin-bottom: 12px;
+		padding-bottom: 8px;
+
+		& svg {
+			width: 20px;
+			height: 20px;
+			color: var(--gray9);
+			transform: translateY(1px);
+		}
+	}
+
+	[data-command-input] {
+		font-family: var(--font-sans);
+		border: none;
+		width: 100%;
+		font-size: 16px;
+		outline: none;
+		background: var(--bg);
+		color: var(--gray12);
+
+		&::placeholder {
+			color: var(--gray9);
+		}
+	}
+
+	[data-command-item] {
+		content-visibility: auto;
+
+		cursor: pointer;
+		border-radius: 12px;
+		font-size: 14px;
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		color: var(--gray12);
+		padding: 8px 8px;
+		margin-right: 8px;
+		font-weight: 500;
+		transition: all 150ms ease;
+		transition-property: none;
+
+		&[data-selected] {
+			background: var(--blue9);
+			color: #ffffff;
+
+			[data-command-framer-item-subtitle] {
+				color: #ffffff;
+			}
+		}
+
+		&[data-disabled] {
+			color: var(--gray8);
+			cursor: not-allowed;
+		}
+
+		& + [data-command-item] {
+			margin-top: 4px;
+		}
+
+		& svg {
+			width: 16px;
+			height: 16px;
+			color: #ffffff;
+		}
+	}
+
+	[data-command-framer-icon-wrapper] {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 32px;
+		height: 32px;
+		background: orange;
+		border-radius: 8px;
+	}
+
+	[data-command-framer-item-meta] {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	[data-command-framer-item-subtitle] {
+		font-size: 12px;
+		font-weight: 400;
+		color: var(--gray11);
+	}
+
+	[data-command-framer-items] {
+		min-height: 308px;
+		display: flex;
+	}
+
+	[data-command-framer-left] {
+		width: 40%;
+	}
+
+	[data-command-framer-separator] {
+		width: 1px;
+		border: 0;
+		margin-right: 8px;
+		background: var(--gray6);
+	}
+
+	[data-command-framer-right] {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+		margin-left: 8px;
+		width: 60%;
+
+		& button {
+			width: 120px;
+			height: 40px;
+			background: var(--blue9);
+			border-radius: 6px;
+			font-weight: 500;
+			color: white;
+			font-size: 14px;
+		}
+
+		& input[type="text"] {
+			height: 40px;
+			width: 160px;
+			border: 1px solid var(--gray6);
+			background: #ffffff;
+			border-radius: 6px;
+			padding: 0 8px;
+			font-size: 14px;
+			font-family: var(--font-sans);
+			box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.08);
+
+			&::placeholder {
+				color: var(--gray9);
+			}
+		}
+
+		[data-command-framer-radio] {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+			color: var(--gray12);
+			font-weight: 500;
+			font-size: 14px;
+			accent-color: var(--blue9);
+
+			& input {
+				width: 20px;
+				height: 20px;
+			}
+		}
+
+		& img {
+			width: 40px;
+			height: 40px;
+			border-radius: 9999px;
+			border: 1px solid var(--gray6);
+		}
+
+		[data-command-framer-container] {
+			width: 100px;
+			height: 100px;
+			background: var(--blue9);
+			border-radius: 16px;
+		}
+
+		[data-command-framer-badge] {
+			background: var(--blue3);
+			padding: 0 8px;
+			height: 28px;
+			font-size: 14px;
+			line-height: 28px;
+			color: var(--blue11);
+			border-radius: 9999px;
+			font-weight: 500;
+		}
+
+		[data-command-framer-slider] {
+			height: 20px;
+			width: 200px;
+			background: linear-gradient(90deg, var(--blue9) 40%, var(--gray3) 0%);
+			border-radius: 9999px;
+
+			& div {
+				width: 20px;
+				height: 20px;
+				background: #ffffff;
+				border-radius: 9999px;
+				box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.32);
+				transform: translateX(70px);
+			}
+		}
+	}
+
+	[data-command-list] {
+		overflow: auto;
+	}
+
+	[data-command-separator] {
+		height: 1px;
+		width: 100%;
+		background: var(--gray5);
+		margin: 4px 0;
+	}
+
+	[data-command-group-heading] {
+		user-select: none;
+		font-size: 12px;
+		color: var(--gray11);
+		padding: 0 8px;
+		display: flex;
+		align-items: center;
+		margin-bottom: 8px;
+	}
+
+	[data-command-empty] {
+		font-size: 14px;
+		padding: 32px;
+		white-space: pre-wrap;
+		color: var(--gray11);
+	}
+}
+
+@media (max-width: 640px) {
+	.framer {
+		[data-command-framer-icon-wrapper] {
+		}
+
+		[data-command-framer-item-subtitle] {
+			display: none;
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.framer {
+		[data-command-framer-right] {
+			& input[type="text"] {
+				background: var(--gray3);
+			}
+		}
+	}
+}
diff --git a/sites/docs/src/lib/components/examples/command/framer/icons/avatar.svelte b/sites/docs/src/lib/components/examples/command/framer/icons/avatar.svelte
new file mode 100644
index 000000000..3f9e1924b
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/framer/icons/avatar.svelte
@@ -0,0 +1,8 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M0.877014 7.49988C0.877014 3.84219 3.84216 0.877045 7.49985 0.877045C11.1575 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1575 14.1227 7.49985 14.1227C3.84216 14.1227 0.877014 11.1575 0.877014 7.49988ZM7.49985 1.82704C4.36683 1.82704 1.82701 4.36686 1.82701 7.49988C1.82701 8.97196 2.38774 10.3131 3.30727 11.3213C4.19074 9.94119 5.73818 9.02499 7.50023 9.02499C9.26206 9.02499 10.8093 9.94097 11.6929 11.3208C12.6121 10.3127 13.1727 8.97172 13.1727 7.49988C13.1727 4.36686 10.6328 1.82704 7.49985 1.82704ZM10.9818 11.9787C10.2839 10.7795 8.9857 9.97499 7.50023 9.97499C6.01458 9.97499 4.71624 10.7797 4.01845 11.9791C4.97952 12.7272 6.18765 13.1727 7.49985 13.1727C8.81227 13.1727 10.0206 12.727 10.9818 11.9787ZM5.14999 6.50487C5.14999 5.207 6.20212 4.15487 7.49999 4.15487C8.79786 4.15487 9.84999 5.207 9.84999 6.50487C9.84999 7.80274 8.79786 8.85487 7.49999 8.85487C6.20212 8.85487 5.14999 7.80274 5.14999 6.50487ZM7.49999 5.10487C6.72679 5.10487 6.09999 5.73167 6.09999 6.50487C6.09999 7.27807 6.72679 7.90487 7.49999 7.90487C8.27319 7.90487 8.89999 7.27807 8.89999 6.50487C8.89999 5.73167 8.27319 5.10487 7.49999 5.10487Z"
+		fill="currentColor"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/framer/icons/badge.svelte b/sites/docs/src/lib/components/examples/command/framer/icons/badge.svelte
new file mode 100644
index 000000000..04d66d8f9
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/framer/icons/badge.svelte
@@ -0,0 +1,8 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M3.5 6H11.5C12.3284 6 13 6.67157 13 7.5C13 8.32843 12.3284 9 11.5 9H3.5C2.67157 9 2 8.32843 2 7.5C2 6.67157 2.67157 6 3.5 6ZM1 7.5C1 6.11929 2.11929 5 3.5 5H11.5C12.8807 5 14 6.11929 14 7.5C14 8.88071 12.8807 10 11.5 10H3.5C2.11929 10 1 8.88071 1 7.5ZM4.5 7C4.22386 7 4 7.22386 4 7.5C4 7.77614 4.22386 8 4.5 8H10.5C10.7761 8 11 7.77614 11 7.5C11 7.22386 10.7761 7 10.5 7H4.5Z"
+		fill="currentColor"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/framer/icons/button.svelte b/sites/docs/src/lib/components/examples/command/framer/icons/button.svelte
new file mode 100644
index 000000000..1121dc104
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/framer/icons/button.svelte
@@ -0,0 +1,8 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M2 5H13C13.5523 5 14 5.44772 14 6V9C14 9.55228 13.5523 10 13 10H2C1.44772 10 1 9.55228 1 9V6C1 5.44772 1.44772 5 2 5ZM0 6C0 4.89543 0.895431 4 2 4H13C14.1046 4 15 4.89543 15 6V9C15 10.1046 14.1046 11 13 11H2C0.89543 11 0 10.1046 0 9V6ZM4.5 6.75C4.08579 6.75 3.75 7.08579 3.75 7.5C3.75 7.91421 4.08579 8.25 4.5 8.25C4.91421 8.25 5.25 7.91421 5.25 7.5C5.25 7.08579 4.91421 6.75 4.5 6.75ZM6.75 7.5C6.75 7.08579 7.08579 6.75 7.5 6.75C7.91421 6.75 8.25 7.08579 8.25 7.5C8.25 7.91421 7.91421 8.25 7.5 8.25C7.08579 8.25 6.75 7.91421 6.75 7.5ZM10.5 6.75C10.0858 6.75 9.75 7.08579 9.75 7.5C9.75 7.91421 10.0858 8.25 10.5 8.25C10.9142 8.25 11.25 7.91421 11.25 7.5C11.25 7.08579 10.9142 6.75 10.5 6.75Z"
+		fill="currentColor"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/framer/icons/container.svelte b/sites/docs/src/lib/components/examples/command/framer/icons/container.svelte
new file mode 100644
index 000000000..faedf43f8
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/framer/icons/container.svelte
@@ -0,0 +1,8 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M2 1.5C2 1.77614 1.77614 2 1.5 2C1.22386 2 1 1.77614 1 1.5C1 1.22386 1.22386 1 1.5 1C1.77614 1 2 1.22386 2 1.5ZM5 13H10V2L5 2L5 13ZM4 13C4 13.5523 4.44772 14 5 14H10C10.5523 14 11 13.5523 11 13V2C11 1.44772 10.5523 1 10 1H5C4.44772 1 4 1.44771 4 2V13ZM13.5 2C13.7761 2 14 1.77614 14 1.5C14 1.22386 13.7761 1 13.5 1C13.2239 1 13 1.22386 13 1.5C13 1.77614 13.2239 2 13.5 2ZM2 3.5C2 3.77614 1.77614 4 1.5 4C1.22386 4 1 3.77614 1 3.5C1 3.22386 1.22386 3 1.5 3C1.77614 3 2 3.22386 2 3.5ZM13.5 4C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3C13.2239 3 13 3.22386 13 3.5C13 3.77614 13.2239 4 13.5 4ZM2 5.5C2 5.77614 1.77614 6 1.5 6C1.22386 6 1 5.77614 1 5.5C1 5.22386 1.22386 5 1.5 5C1.77614 5 2 5.22386 2 5.5ZM13.5 6C13.7761 6 14 5.77614 14 5.5C14 5.22386 13.7761 5 13.5 5C13.2239 5 13 5.22386 13 5.5C13 5.77614 13.2239 6 13.5 6ZM2 7.5C2 7.77614 1.77614 8 1.5 8C1.22386 8 1 7.77614 1 7.5C1 7.22386 1.22386 7 1.5 7C1.77614 7 2 7.22386 2 7.5ZM13.5 8C13.7761 8 14 7.77614 14 7.5C14 7.22386 13.7761 7 13.5 7C13.2239 7 13 7.22386 13 7.5C13 7.77614 13.2239 8 13.5 8ZM2 9.5C2 9.77614 1.77614 10 1.5 10C1.22386 10 1 9.77614 1 9.5C1 9.22386 1.22386 9 1.5 9C1.77614 9 2 9.22386 2 9.5ZM13.5 10C13.7761 10 14 9.77614 14 9.5C14 9.22386 13.7761 9 13.5 9C13.2239 9 13 9.22386 13 9.5C13 9.77614 13.2239 10 13.5 10ZM2 11.5C2 11.7761 1.77614 12 1.5 12C1.22386 12 1 11.7761 1 11.5C1 11.2239 1.22386 11 1.5 11C1.77614 11 2 11.2239 2 11.5ZM13.5 12C13.7761 12 14 11.7761 14 11.5C14 11.2239 13.7761 11 13.5 11C13.2239 11 13 11.2239 13 11.5C13 11.7761 13.2239 12 13.5 12ZM2 13.5C2 13.7761 1.77614 14 1.5 14C1.22386 14 1 13.7761 1 13.5C1 13.2239 1.22386 13 1.5 13C1.77614 13 2 13.2239 2 13.5ZM13.5 14C13.7761 14 14 13.7761 14 13.5C14 13.2239 13.7761 13 13.5 13C13.2239 13 13 13.2239 13 13.5C13 13.7761 13.2239 14 13.5 14Z"
+		fill="currentColor"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/framer/icons/index.ts b/sites/docs/src/lib/components/examples/command/framer/icons/index.ts
new file mode 100644
index 000000000..9082a4f47
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/framer/icons/index.ts
@@ -0,0 +1,8 @@
+export { default as AvatarIcon } from "./avatar.svelte";
+export { default as BadgeIcon } from "./badge.svelte";
+export { default as ButtonIcon } from "./button.svelte";
+export { default as ContainerIcon } from "./container.svelte";
+export { default as InputIcon } from "./input.svelte";
+export { default as RadioIcon } from "./radio.svelte";
+export { default as SearchIcon } from "./search.svelte";
+export { default as SliderIcon } from "./slider.svelte";
diff --git a/sites/docs/src/lib/components/examples/command/framer/icons/input.svelte b/sites/docs/src/lib/components/examples/command/framer/icons/input.svelte
new file mode 100644
index 000000000..91491de8c
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/framer/icons/input.svelte
@@ -0,0 +1,8 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M6.5 1C6.22386 1 6 1.22386 6 1.5C6 1.77614 6.22386 2 6.5 2C7.12671 2 7.45718 2.20028 7.65563 2.47812C7.8781 2.78957 8 3.28837 8 4V11C8 11.7116 7.8781 12.2104 7.65563 12.5219C7.45718 12.7997 7.12671 13 6.5 13C6.22386 13 6 13.2239 6 13.5C6 13.7761 6.22386 14 6.5 14C7.37329 14 8.04282 13.7003 8.46937 13.1031C8.47976 13.0886 8.48997 13.0739 8.5 13.0591C8.51003 13.0739 8.52024 13.0886 8.53063 13.1031C8.95718 13.7003 9.62671 14 10.5 14C10.7761 14 11 13.7761 11 13.5C11 13.2239 10.7761 13 10.5 13C9.87329 13 9.54282 12.7997 9.34437 12.5219C9.1219 12.2104 9 11.7116 9 11V4C9 3.28837 9.1219 2.78957 9.34437 2.47812C9.54282 2.20028 9.87329 2 10.5 2C10.7761 2 11 1.77614 11 1.5C11 1.22386 10.7761 1 10.5 1C9.62671 1 8.95718 1.29972 8.53063 1.89688C8.52024 1.91143 8.51003 1.92611 8.5 1.9409C8.48997 1.92611 8.47976 1.91143 8.46937 1.89688C8.04282 1.29972 7.37329 1 6.5 1ZM14 5H11V4H14C14.5523 4 15 4.44772 15 5V10C15 10.5523 14.5523 11 14 11H11V10H14V5ZM6 4V5H1L1 10H6V11H1C0.447715 11 0 10.5523 0 10V5C0 4.44772 0.447715 4 1 4H6Z"
+		fill="currentColor"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/framer/icons/radio.svelte b/sites/docs/src/lib/components/examples/command/framer/icons/radio.svelte
new file mode 100644
index 000000000..44e950cc8
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/framer/icons/radio.svelte
@@ -0,0 +1,8 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M7.49985 0.877045C3.84216 0.877045 0.877014 3.84219 0.877014 7.49988C0.877014 11.1575 3.84216 14.1227 7.49985 14.1227C11.1575 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1575 0.877045 7.49985 0.877045ZM1.82701 7.49988C1.82701 4.36686 4.36683 1.82704 7.49985 1.82704C10.6328 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6328 13.1727 7.49985 13.1727C4.36683 13.1727 1.82701 10.6329 1.82701 7.49988ZM7.49999 9.49999C8.60456 9.49999 9.49999 8.60456 9.49999 7.49999C9.49999 6.39542 8.60456 5.49999 7.49999 5.49999C6.39542 5.49999 5.49999 6.39542 5.49999 7.49999C5.49999 8.60456 6.39542 9.49999 7.49999 9.49999Z"
+		fill="currentColor"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/framer/icons/search.svelte b/sites/docs/src/lib/components/examples/command/framer/icons/search.svelte
new file mode 100644
index 000000000..1c577a2a0
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/framer/icons/search.svelte
@@ -0,0 +1,14 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	class="h-6 w-6"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke="currentColor"
+	stroke-width={1.5}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/framer/icons/slider.svelte b/sites/docs/src/lib/components/examples/command/framer/icons/slider.svelte
new file mode 100644
index 000000000..06f110174
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/framer/icons/slider.svelte
@@ -0,0 +1,8 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M10.3004 7.49991C10.3004 8.4943 9.49426 9.30041 8.49988 9.30041C7.50549 9.30041 6.69938 8.4943 6.69938 7.49991C6.69938 6.50553 7.50549 5.69942 8.49988 5.69942C9.49426 5.69942 10.3004 6.50553 10.3004 7.49991ZM11.205 8C10.9699 9.28029 9.84816 10.2504 8.49988 10.2504C7.1516 10.2504 6.0299 9.28029 5.79473 8H0.5C0.223858 8 0 7.77614 0 7.5C0 7.22386 0.223858 7 0.5 7H5.7947C6.0298 5.71962 7.15154 4.74942 8.49988 4.74942C9.84822 4.74942 10.97 5.71962 11.2051 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H11.205Z"
+		fill="currentColor"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/icons/copied.svelte b/sites/docs/src/lib/components/examples/command/icons/copied.svelte
new file mode 100644
index 000000000..6727b7f24
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/icons/copied.svelte
@@ -0,0 +1,15 @@
+<svg
+	width="16"
+	height="16"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M5 13L9 17L19 7"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/icons/copy.svelte b/sites/docs/src/lib/components/examples/command/icons/copy.svelte
new file mode 100644
index 000000000..69d07e348
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/icons/copy.svelte
@@ -0,0 +1,14 @@
+<svg width="16" height="16" stroke-width="1.5" viewBox="0 0 24 24" fill="none">
+	<path
+		d="M19.4 20H9.6C9.26863 20 9 19.7314 9 19.4V9.6C9 9.26863 9.26863 9 9.6 9H19.4C19.7314 9 20 9.26863 20 9.6V19.4C20 19.7314 19.7314 20 19.4 20Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M15 9V4.6C15 4.26863 14.7314 4 14.4 4H4.6C4.26863 4 4 4.26863 4 4.6V14.4C4 14.7314 4.26863 15 4.6 15H9"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/icons/figma.svelte b/sites/docs/src/lib/components/examples/command/icons/figma.svelte
new file mode 100644
index 000000000..82b185ce5
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/icons/figma.svelte
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px">
+	<path fill="#e64a19" d="M26,17h-8c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h8V17z" />
+	<path fill="#7c4dff" d="M25,31h-7c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7V31z" />
+	<path
+		fill="#66bb6a"
+		d="M18,45L18,45c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7v7C25,41.866,21.866,45,18,45z"
+	/>
+	<path fill="#ff7043" d="M32,17h-7V3h7c3.866,0,7,3.134,7,7v0C39,13.866,35.866,17,32,17z" />
+	<circle cx="32" cy="24" r="7" fill="#29b6f6" />
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/icons/framer.svelte b/sites/docs/src/lib/components/examples/command/icons/framer.svelte
new file mode 100644
index 000000000..f87831ff1
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/icons/framer.svelte
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 24">
+	<path
+		d="M 16 0 L 16 8 L 8 8 L 0 0 Z M 0 8 L 8 8 L 16 16 L 8 16 L 8 24 L 0 16 Z"
+		fill="var(--highContrast)"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/icons/github.svelte b/sites/docs/src/lib/components/examples/command/icons/github.svelte
new file mode 100644
index 000000000..25b567fb4
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/icons/github.svelte
@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M7 0.175049C3.128 0.175049 0 3.30305 0 7.17505C0 10.259 2.013 12.885 4.79 13.825C5.14 13.891 5.272 13.672 5.272 13.497V12.316C3.325 12.731 2.909 11.375 2.909 11.375C2.581 10.565 2.122 10.347 2.122 10.347C1.488 9.90905 2.166 9.93105 2.166 9.93105C2.866 9.97505 3.237 10.653 3.237 10.653C3.872 11.725 4.878 11.419 5.272 11.243C5.338 10.784 5.512 10.478 5.709 10.303C4.156 10.128 2.516 9.51605 2.516 6.84705C2.516 6.08105 2.778 5.46905 3.237 4.96605C3.172 4.79105 2.931 4.06905 3.303 3.10605C3.303 3.10605 3.893 2.90905 5.228 3.82805C5.79831 3.67179 6.38668 3.5911 6.978 3.58805C7.568 3.58805 8.181 3.67505 8.728 3.82805C10.063 2.93105 10.653 3.10605 10.653 3.10605C11.025 4.06905 10.784 4.79105 10.719 4.96605C11.179 5.44605 11.441 6.08105 11.441 6.84605C11.441 9.53705 9.8 10.128 8.247 10.303C8.487 10.522 8.728 10.937 8.728 11.593V13.519C8.728 13.716 8.859 13.934 9.209 13.847C11.988 12.884 14 10.259 14 7.17505C14 3.30305 10.872 0.175049 7 0.175049V0.175049Z"
+		fill="currentColor"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/icons/index.ts b/sites/docs/src/lib/components/examples/command/icons/index.ts
new file mode 100644
index 000000000..bc4205cd0
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/icons/index.ts
@@ -0,0 +1,10 @@
+export { default as CopiedIcon } from "./copied.svelte";
+export { default as CopyIcon } from "./copy.svelte";
+export { default as FigmaIcon } from "./figma.svelte";
+export { default as FramerIcon } from "./framer.svelte";
+export { default as GitHubIcon } from "./github.svelte";
+export { default as LinearIcon } from "./linear.svelte";
+export { default as RaycastIcon } from "./raycast.svelte";
+export { default as SlackIcon } from "./slack.svelte";
+export { default as VercelIcon } from "./vercel.svelte";
+export { default as YouTubeIcon } from "./youtube.svelte";
diff --git a/sites/docs/src/lib/components/examples/command/icons/linear.svelte b/sites/docs/src/lib/components/examples/command/icons/linear.svelte
new file mode 100644
index 000000000..b1b61cc89
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/icons/linear.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	let { style }: { style?: string } = $props();
+</script>
+
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" {style}>
+	<path
+		d="M0.403013 37.3991L26.6009 63.597C13.2225 61.3356 2.66442 50.7775 0.403013 37.3991Z"
+		fill="#5E6AD2"
+	/>
+	<path
+		d="M0 30.2868L33.7132 64C35.7182 63.8929 37.6742 63.6013 39.5645 63.142L0.85799 24.4355C0.398679 26.3259 0.10713 28.2818 0 30.2868Z"
+		fill="#5E6AD2"
+	/>
+	<path
+		d="M2.53593 19.4042L44.5958 61.4641C46.1277 60.8066 47.598 60.0331 48.9956 59.1546L4.84543 15.0044C3.96691 16.402 3.19339 17.8723 2.53593 19.4042Z"
+		fill="#5E6AD2"
+	/>
+	<path
+		d="M7.69501 11.1447C13.5677 4.32093 22.2677 0 31.9769 0C49.6628 0 64 14.3372 64 32.0231C64 41.7323 59.6791 50.4323 52.8553 56.305L7.69501 11.1447Z"
+		fill="#5E6AD2"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/icons/raycast.svelte b/sites/docs/src/lib/components/examples/command/icons/raycast.svelte
new file mode 100644
index 000000000..9b0c8c17a
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/icons/raycast.svelte
@@ -0,0 +1,8 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M7 18.073V20.994L0 13.994L1.46 12.534L7 18.075V18.073ZM9.921 20.994H7L14 27.994L15.46 26.534L9.921 20.994V20.994ZM26.535 15.456L27.996 13.994L13.996 -0.00598145L12.538 1.46002L18.077 6.99802H14.73L10.864 3.14002L9.404 4.60002L11.809 7.00402H10.129V17.87H20.994V16.19L23.399 18.594L24.859 17.134L20.994 13.268V9.92102L26.534 15.456H26.535ZM7.73 6.27002L6.265 7.73202L7.833 9.29802L9.294 7.83802L7.73 6.27002ZM20.162 18.702L18.702 20.164L20.268 21.732L21.73 20.27L20.162 18.702V18.702ZM4.596 9.40402L3.134 10.866L7 14.732V11.809L4.596 9.40402ZM16.192 21H13.268L17.134 24.866L18.596 23.404L16.192 21Z"
+		fill="#FF6363"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/icons/slack.svelte b/sites/docs/src/lib/components/examples/command/icons/slack.svelte
new file mode 100644
index 000000000..056732412
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/icons/slack.svelte
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px">
+	<path
+		fill="#33d375"
+		d="M33,8c0-2.209-1.791-4-4-4s-4,1.791-4,4c0,1.254,0,9.741,0,11c0,2.209,1.791,4,4,4s4-1.791,4-4	C33,17.741,33,9.254,33,8z"
+	/>
+	<path
+		fill="#33d375"
+		d="M43,19c0,2.209-1.791,4-4,4c-1.195,0-4,0-4,0s0-2.986,0-4c0-2.209,1.791-4,4-4S43,16.791,43,19z"
+	/>
+	<path
+		fill="#40c4ff"
+		d="M8,14c-2.209,0-4,1.791-4,4s1.791,4,4,4c1.254,0,9.741,0,11,0c2.209,0,4-1.791,4-4s-1.791-4-4-4	C17.741,14,9.254,14,8,14z"
+	/>
+	<path
+		fill="#40c4ff"
+		d="M19,4c2.209,0,4,1.791,4,4c0,1.195,0,4,0,4s-2.986,0-4,0c-2.209,0-4-1.791-4-4S16.791,4,19,4z"
+	/>
+	<path
+		fill="#e91e63"
+		d="M14,39.006C14,41.212,15.791,43,18,43s4-1.788,4-3.994c0-1.252,0-9.727,0-10.984	c0-2.206-1.791-3.994-4-3.994s-4,1.788-4,3.994C14,29.279,14,37.754,14,39.006z"
+	/>
+	<path
+		fill="#e91e63"
+		d="M4,28.022c0-2.206,1.791-3.994,4-3.994c1.195,0,4,0,4,0s0,2.981,0,3.994c0,2.206-1.791,3.994-4,3.994	S4,30.228,4,28.022z"
+	/>
+	<path
+		fill="#ffc107"
+		d="M39,33c2.209,0,4-1.791,4-4s-1.791-4-4-4c-1.254,0-9.741,0-11,0c-2.209,0-4,1.791-4,4s1.791,4,4,4	C29.258,33,37.746,33,39,33z"
+	/>
+	<path
+		fill="#ffc107"
+		d="M28,43c-2.209,0-4-1.791-4-4c0-1.195,0-4,0-4s2.986,0,4,0c2.209,0,4,1.791,4,4S30.209,43,28,43z"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/icons/vercel.svelte b/sites/docs/src/lib/components/examples/command/icons/vercel.svelte
new file mode 100644
index 000000000..fbfbd3d94
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/icons/vercel.svelte
@@ -0,0 +1,3 @@
+<svg aria-label="Vercel Logo" fill="var(--highContrast)" height="26" viewBox="0 0 75 65">
+	<path d="M37.59.25l36.95 64H.64l36.95-64z" />
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/icons/youtube.svelte b/sites/docs/src/lib/components/examples/command/icons/youtube.svelte
new file mode 100644
index 000000000..6a3a43414
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/icons/youtube.svelte
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px">
+	<path
+		fill="#FF3D00"
+		d="M43.2,33.9c-0.4,2.1-2.1,3.7-4.2,4c-3.3,0.5-8.8,1.1-15,1.1c-6.1,0-11.6-0.6-15-1.1c-2.1-0.3-3.8-1.9-4.2-4C4.4,31.6,4,28.2,4,24c0-4.2,0.4-7.6,0.8-9.9c0.4-2.1,2.1-3.7,4.2-4C12.3,9.6,17.8,9,24,9c6.2,0,11.6,0.6,15,1.1c2.1,0.3,3.8,1.9,4.2,4c0.4,2.3,0.9,5.7,0.9,9.9C44,28.2,43.6,31.6,43.2,33.9z"
+	/>
+	<path fill="#FFF" d="M20 31L20 17 32 24z" />
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/linear/icons/assign-to-me.svelte b/sites/docs/src/lib/components/examples/command/linear/icons/assign-to-me.svelte
new file mode 100644
index 000000000..e24c0ddc6
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/linear/icons/assign-to-me.svelte
@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+	<path
+		d="M7.00003 7C8.38128 7 9.50003 5.88125 9.50003 4.5C9.50003 3.11875 8.38128 2 7.00003 2C5.61878 2 4.50003 3.11875 4.50003 4.5C4.50003 5.88125 5.61878 7 7.00003 7Z"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M7.00005 8C5.66505 8 3.00006 8.89333 3.00006 10.6667V11.3333C3.00006 11.7 3.22506 12 3.50006 12H3.98973C4.01095 11.9415 4.04535 11.8873 4.09266 11.8425L7.21783 8.88444C7.28966 8.81658 7.38297 8.77917 7.4796 8.77949C7.69459 8.78018 7.86826 8.96356 7.86753 9.1891L7.86214 10.629C9.00553 10.5858 10.0366 10.4354 10.9441 10.231C10.5539 8.74706 8.22087 8 7.00005 8Z"
+	/>
+	<path
+		d="M6.72511 14.718C6.80609 14.7834 6.91767 14.7955 7.01074 14.749C7.10407 14.7036 7.16321 14.6087 7.16295 14.5047L7.1605 13.7849C11.4352 13.5894 12.9723 10.3023 12.9722 10.2563C12.9722 10.1147 12.8634 9.9971 12.7225 9.98626L12.7009 9.98634C12.5685 9.98689 12.4561 10.0833 12.4351 10.2142C12.4303 10.2413 10.4816 11.623 7.15364 11.7666L7.1504 10.8116C7.14981 10.662 7.02829 10.5412 6.87896 10.5418C6.81184 10.5421 6.74721 10.5674 6.69765 10.6127L4.54129 12.5896C4.43117 12.6906 4.42367 12.862 4.52453 12.9723C4.53428 12.9829 4.54488 12.9928 4.55621 13.0018L6.72511 14.718Z"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/linear/icons/assign-to.svelte b/sites/docs/src/lib/components/examples/command/linear/icons/assign-to.svelte
new file mode 100644
index 000000000..b0c04b307
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/linear/icons/assign-to.svelte
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+	<path
+		d="M7 7a2.5 2.5 0 10.001-4.999A2.5 2.5 0 007 7zm0 1c-1.335 0-4 .893-4 2.667v.666c0 .367.225.667.5.667h2.049c.904-.909 2.417-1.911 4.727-2.009v-.72a.27.27 0 01.007-.063C9.397 8.404 7.898 8 7 8zm4.427 2.028a.266.266 0 01.286.032l2.163 1.723a.271.271 0 01.013.412l-2.163 1.97a.27.27 0 01-.452-.2v-.956c-3.328.133-5.282 1.508-5.287 1.535a.27.27 0 01-.266.227h-.022a.27.27 0 01-.249-.271c0-.046 1.549-3.328 5.824-3.509v-.72a.27.27 0 01.153-.243z"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/linear/icons/change-labels.svelte b/sites/docs/src/lib/components/examples/command/linear/icons/change-labels.svelte
new file mode 100644
index 000000000..4b5f0bab3
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/linear/icons/change-labels.svelte
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M10.2105 4C10.6337 4 11.0126 4.18857 11.24 4.48L14 8L11.24 11.52C11.0126 11.8114 10.6337 12 10.2105 12L3.26316 11.9943C2.56842 11.9943 2 11.4857 2 10.8571V5.14286C2 4.51429 2.56842 4.00571 3.26316 4.00571L10.2105 4ZM11.125 9C11.6773 9 12.125 8.55228 12.125 8C12.125 7.44772 11.6773 7 11.125 7C10.5727 7 10.125 7.44772 10.125 8C10.125 8.55228 10.5727 9 11.125 9Z"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/linear/icons/change-priority.svelte b/sites/docs/src/lib/components/examples/command/linear/icons/change-priority.svelte
new file mode 100644
index 000000000..e8d29a29f
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/linear/icons/change-priority.svelte
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+	<rect x="1" y="8" width="3" height="6" rx="1" />
+	<rect x="6" y="5" width="3" height="9" rx="1" />
+	<rect x="11" y="2" width="3" height="12" rx="1" />
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/linear/icons/change-status.svelte b/sites/docs/src/lib/components/examples/command/linear/icons/change-status.svelte
new file mode 100644
index 000000000..a5062a13b
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/linear/icons/change-status.svelte
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="-1 -1 15 15" fill="currentColor">
+	<path
+		d="M10.5714 7C10.5714 8.97245 8.97245 10.5714 7 10.5714L6.99975 3.42857C8.9722 3.42857 10.5714 5.02755 10.5714 7Z"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M7 12.5C10.0376 12.5 12.5 10.0376 12.5 7C12.5 3.96243 10.0376 1.5 7 1.5C3.96243 1.5 1.5 3.96243 1.5 7C1.5 10.0376 3.96243 12.5 7 12.5ZM7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/linear/icons/index.ts b/sites/docs/src/lib/components/examples/command/linear/icons/index.ts
new file mode 100644
index 000000000..6ba8a7ea3
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/linear/icons/index.ts
@@ -0,0 +1,7 @@
+export { default as AssignToIcon } from "./assign-to.svelte";
+export { default as AssignToMeIcon } from "./assign-to-me.svelte";
+export { default as ChangeLabelsIcon } from "./change-labels.svelte";
+export { default as ChangePriorityIcon } from "./change-priority.svelte";
+export { default as ChangeStatusIcon } from "./change-status.svelte";
+export { default as RemoveLabelIcon } from "./remove-label.svelte";
+export { default as SetDueDateIcon } from "./set-due-date.svelte";
diff --git a/sites/docs/src/lib/components/examples/command/linear/icons/remove-label.svelte b/sites/docs/src/lib/components/examples/command/linear/icons/remove-label.svelte
new file mode 100644
index 000000000..4b5f0bab3
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/linear/icons/remove-label.svelte
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M10.2105 4C10.6337 4 11.0126 4.18857 11.24 4.48L14 8L11.24 11.52C11.0126 11.8114 10.6337 12 10.2105 12L3.26316 11.9943C2.56842 11.9943 2 11.4857 2 10.8571V5.14286C2 4.51429 2.56842 4.00571 3.26316 4.00571L10.2105 4ZM11.125 9C11.6773 9 12.125 8.55228 12.125 8C12.125 7.44772 11.6773 7 11.125 7C10.5727 7 10.125 7.44772 10.125 8C10.125 8.55228 10.5727 9 11.125 9Z"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/linear/icons/set-due-date.svelte b/sites/docs/src/lib/components/examples/command/linear/icons/set-due-date.svelte
new file mode 100644
index 000000000..4ed378bf3
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/linear/icons/set-due-date.svelte
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M15 5C15 2.79086 13.2091 1 11 1H5C2.79086 1 1 2.79086 1 5V11C1 13.2091 2.79086 15 5 15H6.25C6.66421 15 7 14.6642 7 14.25C7 13.8358 6.66421 13.5 6.25 13.5H5C3.61929 13.5 2.5 12.3807 2.5 11V6H13.5V6.25C13.5 6.66421 13.8358 7 14.25 7C14.6642 7 15 6.66421 15 6.25V5ZM11.5001 8C11.9143 8 12.2501 8.33579 12.2501 8.75V10.75L14.2501 10.75C14.6643 10.75 15.0001 11.0858 15.0001 11.5C15.0001 11.9142 14.6643 12.25 14.2501 12.25L12.2501 12.25V14.25C12.2501 14.6642 11.9143 15 11.5001 15C11.0859 15 10.7501 14.6642 10.7501 14.25V12.25H8.75C8.33579 12.25 8 11.9142 8 11.5C8 11.0858 8.33579 10.75 8.75 10.75L10.7501 10.75V8.75C10.7501 8.33579 11.0859 8 11.5001 8Z"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/linear/linear-command.svelte b/sites/docs/src/lib/components/examples/command/linear/linear-command.svelte
new file mode 100644
index 000000000..40bbce68f
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/linear/linear-command.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { Component } from "svelte";
+	import { Command } from "bits-ui";
+	import {
+		AssignToIcon,
+		AssignToMeIcon,
+		ChangeLabelsIcon,
+		ChangePriorityIcon,
+		ChangeStatusIcon,
+		RemoveLabelIcon,
+		SetDueDateIcon,
+	} from "./icons/index.js";
+	import "./linear.pcss";
+
+	type Item = {
+		icon: Component;
+		label: string;
+		shortcut: string[];
+	};
+
+	const items: Item[] = [
+		{
+			icon: AssignToIcon,
+			label: "Assign to...",
+			shortcut: ["A"],
+		},
+		{
+			icon: AssignToMeIcon,
+			label: "Assign to me",
+			shortcut: ["I"],
+		},
+		{
+			icon: ChangeStatusIcon,
+			label: "Change status...",
+			shortcut: ["S"],
+		},
+		{
+			icon: ChangePriorityIcon,
+			label: "Change priority...",
+			shortcut: ["P"],
+		},
+		{
+			icon: ChangeLabelsIcon,
+			label: "Change labels...",
+			shortcut: ["L"],
+		},
+		{
+			icon: RemoveLabelIcon,
+			label: "Remove label...",
+			shortcut: ["⇧", "L"],
+		},
+		{
+			icon: SetDueDateIcon,
+			label: "Set due date...",
+			shortcut: ["⇧", "D"],
+		},
+	];
+</script>
+
+<div class="linear">
+	<Command.Root>
+		<div data-command-linear-badge="">Issue - FUN-343</div>
+		<Command.Input autofocus placeholder="Type a command or search..." />
+		<Command.List>
+			<Command.Viewport>
+				<Command.Empty>No results found.</Command.Empty>
+				{#each items as { label, shortcut, icon }}
+					{@const Icon = icon}
+					<Command.Item value={label}>
+						<Icon />
+						{label}
+						<div data-command-linear-shortcuts="">
+							{#each shortcut as key}
+								<kbd>{key}</kbd>
+							{/each}
+						</div>
+					</Command.Item>
+				{/each}
+			</Command.Viewport>
+		</Command.List>
+	</Command.Root>
+</div>
diff --git a/sites/docs/src/lib/components/examples/command/linear/linear.pcss b/sites/docs/src/lib/components/examples/command/linear/linear.pcss
new file mode 100644
index 000000000..864c14d79
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/linear/linear.pcss
@@ -0,0 +1,144 @@
+.linear {
+	[data-command-root] {
+		max-width: 640px;
+		width: 100%;
+		background: #ffffff;
+		border-radius: 8px;
+		overflow: hidden;
+		padding: 0;
+		font-family: var(--font-sans);
+		box-shadow: var(--command-shadow);
+
+		.dark & {
+			background: linear-gradient(136.61deg, rgb(39, 40, 43) 13.72%, rgb(45, 46, 49) 74.3%);
+		}
+	}
+
+	[data-command-linear-badge] {
+		height: 24px;
+		padding: 0 8px;
+		font-size: 12px;
+		color: var(--gray11);
+		background: var(--gray3);
+		border-radius: 4px;
+		width: fit-content;
+		display: flex;
+		align-items: center;
+		margin: 16px 16px 0;
+	}
+
+	[data-command-linear-shortcuts] {
+		display: flex;
+		margin-left: auto;
+		gap: 8px;
+
+		& kbd {
+			font-family: var(--font-sans);
+			font-size: 13px;
+			color: var(--gray11);
+		}
+	}
+
+	[data-command-input] {
+		font-family: var(--font-sans);
+		border: none;
+		width: 100%;
+		font-size: 18px;
+		padding: 20px;
+		outline: none;
+		background: var(--bg);
+		color: var(--gray12);
+		border-bottom: 1px solid var(--gray6);
+		border-radius: 0;
+		caret-color: #6e5ed2;
+		margin: 0;
+
+		&::placeholder {
+			color: var(--gray9);
+		}
+	}
+
+	[data-command-item] {
+		content-visibility: auto;
+
+		cursor: pointer;
+		height: 48px;
+		font-size: 14px;
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 0 16px;
+		color: var(--gray12);
+		user-select: none;
+		will-change: background, color;
+		transition: all 150ms ease;
+		transition-property: none;
+		position: relative;
+
+		&[data-selected] {
+			background: var(--gray3);
+
+			svg {
+				color: var(--gray12);
+			}
+
+			&:after {
+				content: "";
+				position: absolute;
+				left: 0;
+				z-index: 123;
+				width: 3px;
+				height: 100%;
+				background: #5f6ad2;
+			}
+		}
+
+		&[data-disabled] {
+			color: var(--gray8);
+			cursor: not-allowed;
+		}
+
+		&:active {
+			transition-property: background;
+			background: var(--gray4);
+		}
+
+		& + [data-command-item] {
+			margin-top: 4px;
+		}
+
+		& svg {
+			width: 16px;
+			height: 16px;
+			color: var(--gray10);
+		}
+	}
+
+	[data-command-list] {
+		height: min(300px, var(--command-list-height));
+		max-height: 400px;
+		overflow: auto;
+		overscroll-behavior: contain;
+		transition: 100ms ease;
+		transition-property: height;
+	}
+
+	[data-command-group-heading] {
+		user-select: none;
+		font-size: 12px;
+		color: var(--gray11);
+		padding: 0 8px;
+		display: flex;
+		align-items: center;
+	}
+
+	[data-command-empty] {
+		font-size: 14px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 64px;
+		white-space: pre-wrap;
+		color: var(--gray11);
+	}
+}
diff --git a/sites/docs/src/lib/components/examples/command/logo.svelte b/sites/docs/src/lib/components/examples/command/logo.svelte
new file mode 100644
index 000000000..330cf263d
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/logo.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	let { size = "20px", children }: { size?: string; children: Snippet } = $props();
+</script>
+
+<div class="blurLogo" style:width={size} style:height={size}>
+	<div class="bg" aria-hidden="true">
+		{@render children?.()}
+	</div>
+	<div class="inner">
+		{@render children?.()}
+	</div>
+</div>
diff --git a/sites/docs/src/lib/components/examples/command/raycast/icons/clipboard.svelte b/sites/docs/src/lib/components/examples/command/raycast/icons/clipboard.svelte
new file mode 100644
index 000000000..0c672d632
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/raycast/icons/clipboard.svelte
@@ -0,0 +1,11 @@
+<div data-command-raycast-clipboard-icon="">
+	<svg width="32" height="32" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M6.07512 2.75H4.75C3.64543 2.75 2.75 3.64543 2.75 4.75V12.25C2.75 13.3546 3.64543 14.25 4.75 14.25H11.25C12.3546 14.25 13.25 13.3546 13.25 12.25V4.75C13.25 3.64543 12.3546 2.75 11.25 2.75H9.92488M9.88579 3.02472L9.5934 4.04809C9.39014 4.75952 8.73989 5.25 8 5.25V5.25C7.26011 5.25 6.60986 4.75952 6.4066 4.04809L6.11421 3.02472C5.93169 2.38591 6.41135 1.75 7.07573 1.75H8.92427C9.58865 1.75 10.0683 2.3859 9.88579 3.02472Z"
+			stroke="currentColor"
+			stroke-width="1.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</div>
diff --git a/sites/docs/src/lib/components/examples/command/raycast/icons/finder.svelte b/sites/docs/src/lib/components/examples/command/raycast/icons/finder.svelte
new file mode 100644
index 000000000..751dc67b3
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/raycast/icons/finder.svelte
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M5 4.75V6.25M11 4.75V6.25M8.75 1.75H3.75C2.64543 1.75 1.75 2.64543 1.75 3.75V12.25C1.75 13.3546 2.64543 14.25 3.75 14.25H8.75M8.75 1.75H12.25C13.3546 1.75 14.25 2.64543 14.25 3.75V12.25C14.25 13.3546 13.3546 14.25 12.25 14.25H8.75M8.75 1.75L7.08831 7.1505C6.9202 7.69686 7.32873 8.25 7.90037 8.25C8.36961 8.25 8.75 8.63039 8.75 9.09963V14.25M5 10.3203C5 10.3203 5.95605 11.25 8 11.25C10.0439 11.25 11 10.3203 11 10.3203"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/raycast/icons/hammer.svelte b/sites/docs/src/lib/components/examples/command/raycast/icons/hammer.svelte
new file mode 100644
index 000000000..7d84901a7
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/raycast/icons/hammer.svelte
@@ -0,0 +1,11 @@
+<div data-command-raycast-hammer-icon="">
+	<svg width="32" height="32" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M6.73762 6.19288L2.0488 11.2217C1.6504 11.649 1.6504 12.3418 2.0488 12.769L3.13083 13.9295C3.52923 14.3568 4.17515 14.3568 4.57355 13.9295L9.26238 8.90071M6.73762 6.19288L7.0983 5.80605C7.4967 5.37877 7.4967 4.686 7.0983 4.25872L6.01627 3.09822L6.37694 2.71139C7.57213 1.42954 9.50991 1.42954 10.7051 2.71139L13.9512 6.19288C14.3496 6.62017 14.3496 7.31293 13.9512 7.74021L12.8692 8.90071C12.4708 9.328 11.8248 9.328 11.4265 8.90071L11.0658 8.51388C10.6674 8.0866 10.0215 8.0866 9.62306 8.51388L9.26238 8.90071M6.73762 6.19288L9.26238 8.90071"
+			stroke="currentColor"
+			stroke-width="1.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</div>
diff --git a/sites/docs/src/lib/components/examples/command/raycast/icons/index.ts b/sites/docs/src/lib/components/examples/command/raycast/icons/index.ts
new file mode 100644
index 000000000..d99502ed2
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/raycast/icons/index.ts
@@ -0,0 +1,7 @@
+export { default as ClipboardIcon } from "./clipboard.svelte";
+export { default as FinderIcon } from "./finder.svelte";
+export { default as HammerIcon } from "./hammer.svelte";
+export { default as RaycastDarkIcon } from "./raycast-dark.svelte";
+export { default as RaycastLightIcon } from "./raycast-light.svelte";
+export { default as StarIcon } from "./star.svelte";
+export { default as WindowIcon } from "./window.svelte";
diff --git a/sites/docs/src/lib/components/examples/command/raycast/icons/raycast-dark.svelte b/sites/docs/src/lib/components/examples/command/raycast/icons/raycast-dark.svelte
new file mode 100644
index 000000000..b7545fffe
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/raycast/icons/raycast-dark.svelte
@@ -0,0 +1,14 @@
+<svg
+	width="1024"
+	height="1024"
+	viewBox="0 0 1024 1024"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M301.144 634.799V722.856L90 511.712L134.244 467.804L301.144 634.799ZM389.201 722.856H301.144L512.288 934L556.34 889.996L389.201 722.856ZM889.996 555.956L934 511.904L512.096 90L468.092 134.052L634.799 300.952H534.026L417.657 184.679L373.605 228.683L446.065 301.144H395.631V628.561H723.048V577.934L795.509 650.395L839.561 606.391L723.048 489.878V389.105L889.996 555.956ZM323.17 278.926L279.166 322.978L326.385 370.198L370.39 326.145L323.17 278.926ZM697.855 653.61L653.994 697.615L701.214 744.834L745.218 700.782L697.855 653.61ZM228.731 373.413L184.679 417.465L301.144 533.93V445.826L228.731 373.413ZM578.174 722.856H490.07L606.535 839.321L650.587 795.269L578.174 722.856Z"
+		fill="#FF6363"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/raycast/icons/raycast-light.svelte b/sites/docs/src/lib/components/examples/command/raycast/icons/raycast-light.svelte
new file mode 100644
index 000000000..ffa4744d5
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/raycast/icons/raycast-light.svelte
@@ -0,0 +1,14 @@
+<svg
+	width="1024"
+	height="1024"
+	viewBox="0 0 1024 1024"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M934.302 511.971L890.259 556.017L723.156 388.902V300.754L934.302 511.971ZM511.897 89.5373L467.854 133.583L634.957 300.698H723.099L511.897 89.5373ZM417.334 184.275L373.235 228.377L445.776 300.923H533.918L417.334 184.275ZM723.099 490.061V578.209L795.641 650.755L839.74 606.652L723.099 490.061ZM697.868 653.965L723.099 628.732H395.313V300.754L370.081 325.987L322.772 278.675L278.56 322.833L325.869 370.146L300.638 395.379V446.071L228.097 373.525L183.997 417.627L300.638 534.275V634.871L133.59 467.925L89.4912 512.027L511.897 934.461L555.996 890.359L388.892 723.244H489.875L606.516 839.892L650.615 795.79L578.074 723.244H628.762L653.994 698.011L701.303 745.323L745.402 701.221L697.868 653.965Z"
+		fill="#FF6363"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/raycast/icons/star.svelte b/sites/docs/src/lib/components/examples/command/raycast/icons/star.svelte
new file mode 100644
index 000000000..69f3faf84
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/raycast/icons/star.svelte
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M7.43376 2.17103C7.60585 1.60966 8.39415 1.60966 8.56624 2.17103L9.61978 5.60769C9.69652 5.85802 9.92611 6.02873 10.186 6.02873H13.6562C14.2231 6.02873 14.4665 6.75397 14.016 7.10088L11.1582 9.3015C10.9608 9.45349 10.8784 9.71341 10.9518 9.95262L12.0311 13.4735C12.2015 14.0292 11.5636 14.4777 11.1051 14.1246L8.35978 12.0106C8.14737 11.847 7.85263 11.847 7.64022 12.0106L4.89491 14.1246C4.43638 14.4777 3.79852 14.0292 3.96889 13.4735L5.04824 9.95262C5.12157 9.71341 5.03915 9.45349 4.84178 9.3015L1.98404 7.10088C1.53355 6.75397 1.77692 6.02873 2.34382 6.02873H5.81398C6.07389 6.02873 6.30348 5.85802 6.38022 5.60769L7.43376 2.17103Z"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/raycast/icons/window.svelte b/sites/docs/src/lib/components/examples/command/raycast/icons/window.svelte
new file mode 100644
index 000000000..0d4d9b85c
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/raycast/icons/window.svelte
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M14.25 4.75V3.75C14.25 2.64543 13.3546 1.75 12.25 1.75H3.75C2.64543 1.75 1.75 2.64543 1.75 3.75V4.75M14.25 4.75V12.25C14.25 13.3546 13.3546 14.25 12.25 14.25H3.75C2.64543 14.25 1.75 13.3546 1.75 12.25V4.75M14.25 4.75H1.75"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/raycast/item.svelte b/sites/docs/src/lib/components/examples/command/raycast/item.svelte
new file mode 100644
index 000000000..a1ca58252
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/raycast/item.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { Command } from "bits-ui";
+
+	let {
+		value,
+		isCommand = false,
+		onSelect,
+		keywords,
+		children,
+	}: {
+		value: string;
+		isCommand?: boolean;
+		onSelect?: Command.ItemProps["onSelect"];
+		keywords?: string[];
+		children: Snippet;
+	} = $props();
+</script>
+
+<Command.Item {value} {onSelect} {keywords}>
+	{@render children?.()}
+	<span data-command-raycast-meta="">
+		{#if isCommand}
+			Command
+		{:else}
+			Application
+		{/if}
+	</span>
+</Command.Item>
diff --git a/sites/docs/src/lib/components/examples/command/raycast/raycast-command.svelte b/sites/docs/src/lib/components/examples/command/raycast/raycast-command.svelte
new file mode 100644
index 000000000..6f4e1207b
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/raycast/raycast-command.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { mode } from "mode-watcher";
+	import "./raycast.postcss";
+	import { Command } from "bits-ui";
+	import { FigmaIcon, LinearIcon, RaycastIcon, SlackIcon, YouTubeIcon } from "../icons/index.js";
+	import Logo from "../logo.svelte";
+	import Item from "./item.svelte";
+	import { ClipboardIcon, HammerIcon, RaycastDarkIcon, RaycastLightIcon } from "./icons/index.js";
+	import SubCommand from "./sub-command.svelte";
+
+	let value = $state("linear");
+	let inputEl = $state<HTMLInputElement | null>(null);
+	let listEl = $state<HTMLElement | null>(null);
+</script>
+
+<div class="raycast">
+	<Command.Root bind:value>
+		<div data-command-raycast-top-shine=""></div>
+		<Command.Input autofocus placeholder="Search for apps and commands..." bind:ref={inputEl} />
+		<hr data-command-raycast-loader="" />
+		<Command.List bind:ref={listEl}>
+			<Command.Viewport>
+				<Command.Empty>No results found.</Command.Empty>
+				<Command.Group>
+					<Command.GroupHeading>Suggestions</Command.GroupHeading>
+					<Command.GroupItems>
+						<Item value="linear" keywords={["issue", "sprint"]}>
+							<Logo>
+								<LinearIcon style="width: 12px; height: 12px" />
+							</Logo>
+							Linear
+						</Item>
+						<Item value="figma" keywords={["design", "ui", "ux"]}>
+							<Logo>
+								<FigmaIcon />
+							</Logo>
+							Figma
+						</Item>
+						<Item value="slack" keywords={["chat", "team", "communication"]}>
+							<Logo>
+								<SlackIcon />
+							</Logo>
+							Slack
+						</Item>
+						<Item value="youtube" keywords={["video", "watch", "stream"]}>
+							<Logo>
+								<YouTubeIcon />
+							</Logo>
+							YouTube
+						</Item>
+						<Item value="raycast" keywords={["productivity", "tools", "apps"]}>
+							<Logo>
+								<RaycastIcon />
+							</Logo>
+							Raycast
+						</Item>
+					</Command.GroupItems>
+				</Command.Group>
+				<Command.Group>
+					<Command.GroupHeading>Commands</Command.GroupHeading>
+					<Command.GroupItems>
+						<Item
+							isCommand
+							value="clipboard history"
+							keywords={["copy", "paste", "clipboard"]}
+						>
+							<Logo>
+								<ClipboardIcon />
+							</Logo>
+							Clipboard History
+						</Item>
+						<Item isCommand value="import extension" keywords={["import", "extension"]}>
+							<Logo>
+								<HammerIcon />
+							</Logo>
+							Import Extension
+						</Item>
+						<Item
+							isCommand
+							value="manage extensions"
+							keywords={["manage", "extension"]}
+						>
+							<Logo>
+								<HammerIcon />
+							</Logo>
+							Manage Extensions
+						</Item>
+					</Command.GroupItems>
+				</Command.Group>
+			</Command.Viewport>
+		</Command.List>
+
+		<div data-command-raycast-footer="">
+			{#if $mode === "dark"}
+				<RaycastDarkIcon />
+			{:else}
+				<RaycastLightIcon />
+			{/if}
+			<button data-command-raycast-open-trigger="">
+				Open Application
+				<kbd>↵</kbd>
+			</button>
+
+			<hr />
+
+			<SubCommand {listEl} {inputEl} selectedValue={value} />
+		</div>
+	</Command.Root>
+</div>
diff --git a/sites/docs/src/lib/components/examples/command/raycast/raycast.postcss b/sites/docs/src/lib/components/examples/command/raycast/raycast.postcss
new file mode 100644
index 000000000..2a0611c32
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/raycast/raycast.postcss
@@ -0,0 +1,552 @@
+.raycast {
+	[data-command-root] {
+		max-width: 640px;
+		width: 100%;
+		background: var(--gray1);
+		border-radius: 12px;
+		padding: 8px 0;
+		font-family: var(--font-sans);
+		box-shadow: var(--command-shadow);
+		border: 1px solid var(--gray6);
+		position: relative;
+
+		.dark & {
+			background: var(--gray2);
+			border: 0;
+
+			&:after {
+				content: "";
+				background: linear-gradient(
+					to right,
+					var(--gray6) 20%,
+					var(--gray6) 40%,
+					var(--gray10) 50%,
+					var(--gray10) 55%,
+					var(--gray6) 70%,
+					var(--gray6) 100%
+				);
+				z-index: -1;
+				position: absolute;
+				border-radius: 12px;
+				top: -1px;
+				left: -1px;
+				width: calc(100% + 2px);
+				height: calc(100% + 2px);
+				animation: shine 3s ease forwards 0.1s;
+				background-size: 200% auto;
+			}
+
+			&:before {
+				content: "";
+				z-index: -1;
+				position: absolute;
+				border-radius: 12px;
+				top: -1px;
+				left: -1px;
+				width: calc(100% + 2px);
+				height: calc(100% + 2px);
+				box-shadow: 0 0 0 1px transparent;
+				animation: border 1s linear forwards 0.5s;
+			}
+		}
+
+		& kbd {
+			font-family: var(--font-sans);
+			background: var(--gray3);
+			color: var(--gray11);
+			height: 20px;
+			width: 20px;
+			border-radius: 4px;
+			padding: 0 4px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			&:first-of-type {
+				margin-left: 8px;
+			}
+		}
+	}
+
+	[data-command-input] {
+		font-family: var(--font-sans);
+		border: none;
+		width: 100%;
+		font-size: 15px;
+		padding: 8px 16px;
+		outline: none;
+		background: var(--bg);
+		color: var(--gray12);
+
+		&::placeholder {
+			color: var(--gray9);
+		}
+	}
+
+	[data-command-raycast-top-shine] {
+		.dark & {
+			background: linear-gradient(
+				90deg,
+				rgba(56, 189, 248, 0),
+				var(--gray5) 20%,
+				var(--gray9) 67.19%,
+				rgba(236, 72, 153, 0)
+			);
+			height: 1px;
+			position: absolute;
+			top: -1px;
+			width: 100%;
+			z-index: -1;
+			opacity: 0;
+			animation: showTopShine 0.1s ease forwards 0.2s;
+		}
+	}
+
+	[data-command-raycast-loader] {
+		--loader-color: var(--gray9);
+		border: 0;
+		width: 100%;
+		width: 100%;
+		left: 0;
+		height: 1px;
+		background: var(--gray6);
+		position: relative;
+		overflow: visible;
+		display: block;
+		margin-top: 12px;
+		margin-bottom: 12px;
+
+		&:after {
+			content: "";
+			width: 50%;
+			height: 1px;
+			position: absolute;
+			background: linear-gradient(
+				90deg,
+				transparent 0%,
+				var(--loader-color) 50%,
+				transparent 100%
+			);
+			top: -1px;
+			opacity: 0;
+			animation-duration: 1.5s;
+			animation-delay: 1s;
+			animation-timing-function: ease;
+			animation-name: loading;
+		}
+	}
+
+	[data-command-item] {
+		content-visibility: auto;
+
+		cursor: pointer;
+		height: 40px;
+		border-radius: 8px;
+		font-size: 14px;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 0 8px;
+		color: var(--gray12);
+		user-select: none;
+		will-change: background, color;
+		transition: all 150ms ease;
+		transition-property: none;
+
+		&[data-selected] {
+			background: var(--gray4);
+			color: var(--gray12);
+		}
+
+		&[data-disabled] {
+			color: var(--gray8);
+			cursor: not-allowed;
+		}
+
+		&:first-child {
+			margin-top: 8px;
+		}
+
+		&:active {
+			transition-property: background;
+			background: var(--gray4);
+		}
+
+		& + [data-command-item] {
+			margin-top: 4px;
+		}
+
+		& svg {
+			width: 18px;
+			height: 18px;
+		}
+	}
+
+	[data-command-raycast-meta] {
+		margin-left: auto;
+		color: var(--gray11);
+		font-size: 13px;
+	}
+
+	[data-command-list] {
+		padding: 0 8px;
+		height: 393px;
+		overflow: auto;
+		overscroll-behavior: contain;
+		scroll-padding-block-end: 40px;
+		transition: 100ms ease;
+		transition-property: height;
+		padding-bottom: 40px;
+	}
+
+	[data-command-raycast-open-trigger],
+	[data-command-raycast-subcommand-trigger] {
+		color: var(--gray11);
+		padding: 0px 4px 0px 8px;
+		border-radius: 6px;
+		font-weight: 500;
+		font-size: 12px;
+		height: 28px;
+		letter-spacing: -0.25px;
+	}
+
+	[data-command-raycast-clipboard-icon],
+	[data-command-raycast-hammer-icon] {
+		width: 20px;
+		height: 20px;
+		border-radius: 6px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #ffffff;
+
+		& svg {
+			width: 14px;
+			height: 14px;
+		}
+	}
+
+	[data-command-raycast-clipboard-icon] {
+		background: linear-gradient(to bottom, #f55354, #eb4646);
+	}
+
+	[data-command-raycast-hammer-icon] {
+		background: linear-gradient(to bottom, #6cb9a3, #2c6459);
+	}
+
+	[data-command-raycast-open-trigger] {
+		display: flex;
+		align-items: center;
+		color: var(--gray12);
+	}
+
+	[data-command-raycast-subcommand-trigger] {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		right: 8px;
+		bottom: 8px;
+
+		& svg {
+			width: 14px;
+			height: 14px;
+		}
+
+		& hr {
+			height: 100%;
+			background: var(--gray6);
+			border: 0;
+			width: 1px;
+		}
+
+		&[aria-expanded="true"],
+		&:hover {
+			background: var(--gray4);
+
+			& kbd {
+				background: var(--gray7);
+			}
+		}
+	}
+
+	[data-command-separator] {
+		height: 1px;
+		width: 100%;
+		background: var(--gray5);
+		margin: 4px 0;
+	}
+
+	& *:not([hidden]) + [data-command-group] {
+		margin-top: 8px;
+	}
+
+	[data-command-group-heading] {
+		user-select: none;
+		font-size: 12px;
+		color: var(--gray11);
+		padding: 0 8px;
+		display: flex;
+		align-items: center;
+	}
+
+	[data-command-raycast-footer] {
+		display: flex;
+		height: 40px;
+		align-items: center;
+		width: 100%;
+		position: absolute;
+		background: var(--gray1);
+		bottom: 0;
+		padding: 8px;
+		border-top: 1px solid var(--gray6);
+		border-radius: 0 0 12px 12px;
+		z-index: 2;
+
+		& svg {
+			width: 20px;
+			height: 20px;
+			filter: grayscale(1);
+			margin-right: auto;
+		}
+
+		& hr {
+			height: 12px;
+			width: 1px;
+			border: 0;
+			background: var(--gray6);
+			margin: 0 4px 0px 12px;
+		}
+	}
+
+	[data-command-dialog] {
+		z-index: var(--layer-portal);
+		position: fixed;
+		left: 50%;
+		top: var(--page-top);
+		transform: translateX(-50%);
+
+		[data-command-root] {
+			width: 640px;
+			transform-origin: center center;
+			animation: dialogIn var(--transition-fast) forwards;
+		}
+
+		&[data-state="closed"] [data-command-root] {
+			animation: dialogOut var(--transition-fast) forwards;
+		}
+	}
+
+	[data-command-empty] {
+		font-size: 14px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 64px;
+		white-space: pre-wrap;
+		color: var(--gray11);
+	}
+}
+
+@keyframes loading {
+	0% {
+		opacity: 0;
+		transform: translateX(0);
+	}
+
+	50% {
+		opacity: 1;
+		transform: translateX(100%);
+	}
+
+	100% {
+		opacity: 0;
+		transform: translateX(0);
+	}
+}
+
+@keyframes shine {
+	to {
+		background-position: 200% center;
+		opacity: 0;
+	}
+}
+
+@keyframes border {
+	to {
+		box-shadow: 0 0 0 1px var(--gray6);
+	}
+}
+
+@keyframes showTopShine {
+	to {
+		opacity: 1;
+	}
+}
+
+.raycast-submenu {
+	z-index: 50;
+
+	[data-command-root] {
+		display: flex;
+		flex-direction: column;
+		width: 320px;
+		border: 1px solid var(--gray6);
+		background: var(--gray2);
+		border-radius: 8px;
+	}
+
+	[data-command-list] {
+		padding: 8px;
+		overflow: auto;
+		overscroll-behavior: contain;
+		transition: 100ms ease;
+		transition-property: height;
+	}
+
+	[data-command-item] {
+		height: 40px;
+
+		cursor: pointer;
+		height: 40px;
+		border-radius: 8px;
+		font-size: 13px;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 0 8px;
+		color: var(--gray12);
+		user-select: none;
+		will-change: background, color;
+		transition: all 150ms ease;
+		transition-property: none;
+
+		&[aria-selected="true"] {
+			background: var(--gray5);
+			color: var(--gray12);
+
+			[data-command-raycast-submenu-shortcuts] kbd {
+				background: var(--gray7);
+			}
+		}
+
+		&[aria-disabled="true"] {
+			color: var(--gray8);
+			cursor: not-allowed;
+		}
+
+		& svg {
+			width: 16px;
+			height: 16px;
+		}
+
+		[data-command-raycast-submenu-shortcuts] {
+			display: flex;
+			margin-left: auto;
+			gap: 2px;
+
+			& kbd {
+				font-family: var(--font-sans);
+				background: var(--gray5);
+				color: var(--gray11);
+				height: 20px;
+				width: 20px;
+				border-radius: 4px;
+				padding: 0 4px;
+				font-size: 12px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				&:first-of-type {
+					margin-left: 8px;
+				}
+			}
+		}
+	}
+
+	[data-command-group-heading] {
+		text-transform: capitalize;
+		font-size: 12px;
+		color: var(--gray11);
+		font-weight: 500;
+		margin-bottom: 8px;
+		margin-top: 8px;
+		margin-left: 4px;
+	}
+
+	[data-command-input] {
+		padding: 12px;
+		font-family: var(--font-sans);
+		border: 0;
+		border-top: 1px solid var(--gray6);
+		font-size: 13px;
+		background: transparent;
+		margin-top: auto;
+		width: 100%;
+		outline: 0;
+		border-radius: 0;
+	}
+
+	animation-duration: 0.2s;
+	animation-timing-function: ease;
+	animation-fill-mode: forwards;
+	transform-origin: var(--radix-popover-content-transform-origin);
+
+	&[data-state="open"] {
+		animation-name: slideIn;
+	}
+
+	&[data-state="closed"] {
+		animation-name: slideOut;
+	}
+
+	[data-command-empty] {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 64px;
+		white-space: pre-wrap;
+		font-size: 14px;
+		color: var(--gray11);
+	}
+}
+
+@keyframes slideIn {
+	0% {
+		opacity: 0;
+		transform: scale(0.96);
+	}
+
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+@keyframes slideOut {
+	0% {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	100% {
+		opacity: 0;
+		transform: scale(0.96);
+	}
+}
+
+@media (max-width: 640px) {
+	.raycast {
+		[data-command-input] {
+			font-size: 16px;
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.raycast {
+		[data-command-raycast-footer] {
+			background: var(--gray2);
+		}
+	}
+}
diff --git a/sites/docs/src/lib/components/examples/command/raycast/sub-command.svelte b/sites/docs/src/lib/components/examples/command/raycast/sub-command.svelte
new file mode 100644
index 000000000..95a59ce20
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/raycast/sub-command.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { Command, Popover } from "bits-ui";
+	import SubItem from "./sub-item.svelte";
+	import { FinderIcon, StarIcon, WindowIcon } from "./icons/index.js";
+
+	type Props = {
+		listEl: HTMLElement | null;
+		inputEl: HTMLInputElement | null;
+		selectedValue: string;
+	};
+
+	let { listEl, inputEl, selectedValue = $bindable() }: Props = $props();
+
+	let open = $state(false);
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			open = true;
+		}
+	}
+
+	$effect(() => {
+		if (!listEl) return;
+		if (open) {
+			listEl.style.overflow = "hidden";
+		} else {
+			listEl.style.overflow = "";
+		}
+	});
+</script>
+
+<svelte:document onkeydown={handleKeydown} />
+
+<Popover.Root bind:open>
+	<Popover.Trigger>
+		{#snippet child({ props })}
+			<button {...props} data-command-raycast-subcommand-trigger="" aria-expanded={open}>
+				Actions
+				<kbd>⌘</kbd>
+				<kbd>K</kbd>
+			</button>
+		{/snippet}
+	</Popover.Trigger>
+	<Popover.Portal>
+		<Popover.Content
+			onCloseAutoFocus={(e) => {
+				e.preventDefault();
+				inputEl?.focus();
+			}}
+			preventScroll={true}
+			class="raycast-submenu"
+			side="top"
+			align="end"
+		>
+			<Command.Root>
+				<Command.List>
+					<Command.Group>
+						<Command.GroupHeading>{selectedValue}</Command.GroupHeading>
+						<SubItem shortcut="↵">
+							<WindowIcon />
+							Open Application
+						</SubItem>
+						<SubItem shortcut="⌘ ↵">
+							<FinderIcon />
+							Show in Finder
+						</SubItem>
+						<SubItem shortcut="⌘ I">
+							<FinderIcon />
+							Show Info in Finder
+						</SubItem>
+						<SubItem shortcut="⌘ ⇧ F">
+							<StarIcon />
+							Add to Favorites
+						</SubItem>
+					</Command.Group>
+				</Command.List>
+				<Command.Input placeholder="Search for actions..." />
+			</Command.Root>
+		</Popover.Content>
+	</Popover.Portal>
+</Popover.Root>
diff --git a/sites/docs/src/lib/components/examples/command/raycast/sub-item.svelte b/sites/docs/src/lib/components/examples/command/raycast/sub-item.svelte
new file mode 100644
index 000000000..3f57711e5
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/raycast/sub-item.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { Command } from "bits-ui";
+
+	let { shortcut, children }: { shortcut: string; children: Snippet } = $props();
+</script>
+
+<Command.Item>
+	{@render children?.()}
+	<div data-command-raycast-submenu-shortcuts="">
+		{#each shortcut.split(" ") as key, i (i)}
+			<kbd>{key}</kbd>
+		{/each}
+	</div>
+</Command.Item>
diff --git a/sites/docs/src/lib/components/examples/command/theme-switcher.svelte b/sites/docs/src/lib/components/examples/command/theme-switcher.svelte
new file mode 100644
index 000000000..30e4b7fa1
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/theme-switcher.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+	import type { Component } from "svelte";
+	import { crossfade } from "svelte/transition";
+	import { cubicInOut } from "svelte/easing";
+	import { FramerIcon, LinearIcon, RaycastIcon, VercelIcon } from "./icons/index.js";
+
+	type Themes = "raycast" | "linear" | "vercel" | "framer";
+
+	let { theme = $bindable("raycast") }: { theme: Themes } = $props();
+
+	let showArrowKeyHint = $state(false);
+
+	function isTheme(value: unknown): value is Themes {
+		return (
+			typeof value === "string" && ["raycast", "linear", "vercel", "framer"].includes(value)
+		);
+	}
+
+	type ThemeObj = {
+		icon: Component;
+		key: Themes;
+	};
+
+	const themes: ThemeObj[] = [
+		{
+			icon: RaycastIcon,
+			key: "raycast",
+		},
+		{
+			icon: LinearIcon,
+			key: "linear",
+		},
+		{
+			icon: VercelIcon,
+			key: "vercel",
+		},
+		{
+			icon: FramerIcon,
+			key: "framer",
+		},
+	];
+
+	function handleKeydown(e: KeyboardEvent) {
+		const themeNames = themes.map(({ key }) => key);
+
+		if (e.key === "ArrowRight") {
+			const currentIndex = themeNames.indexOf(theme);
+			const nextIndex = currentIndex + 1;
+			const nextTheme = themeNames[nextIndex];
+
+			if (isTheme(nextTheme)) {
+				theme = nextTheme;
+			}
+		}
+		if (e.key === "ArrowLeft") {
+			const currentIndex = themeNames.indexOf(theme);
+			const nextIndex = currentIndex - 1;
+			const nextTheme = themeNames[nextIndex];
+
+			if (isTheme(nextTheme)) {
+				theme = nextTheme;
+			}
+		}
+	}
+
+	function handleButtonClick(key: Themes) {
+		theme = key;
+		if (showArrowKeyHint === false) {
+			showArrowKeyHint = true;
+		}
+	}
+
+	const [send, receive] = crossfade({
+		duration: 250,
+		easing: cubicInOut,
+	});
+</script>
+
+<svelte:document onkeydown={handleKeydown} />
+
+<div class="switcher">
+	<span class="arrow" style:left="100px" style:transform="translateX(-24px) translateZ(0px)">
+		←
+	</span>
+	{#each themes as { key, icon }}
+		{@const isActive = theme === key}
+		{@const Icon = icon}
+		<button data-selected={isActive} onclick={() => handleButtonClick(key)}>
+			<Icon />
+			{key}
+			{#if isActive}
+				<div
+					class="activeTheme"
+					in:send={{ key: "active" }}
+					out:receive={{ key: "active" }}
+				></div>
+			{/if}
+		</button>
+	{/each}
+	<span class="arrow" style:right="100px" style:transform="translateX(20px) translateZ(0px)">
+		→
+	</span>
+</div>
diff --git a/sites/docs/src/lib/components/examples/command/vercel/home.svelte b/sites/docs/src/lib/components/examples/command/vercel/home.svelte
new file mode 100644
index 000000000..78cf10aa7
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/vercel/home.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { Command } from "bits-ui";
+	import {
+		ContactIcon,
+		DocsIcon,
+		FeedbackIcon,
+		PlusIcon,
+		ProjectsIcon,
+		TeamsIcon,
+	} from "./icons/index.js";
+	import Item from "./item.svelte";
+
+	let { searchProjects }: { searchProjects: () => void } = $props();
+</script>
+
+<Command.Group>
+	<Command.GroupHeading>Projects</Command.GroupHeading>
+	<Command.GroupItems>
+		<Item shortcut="S P" onSelect={searchProjects} value="Search Projects...">
+			<ProjectsIcon />
+			Search Projects...
+		</Item>
+		<Item value="Create New Project...">
+			<PlusIcon />
+			Create New Project...
+		</Item>
+	</Command.GroupItems>
+</Command.Group>
+<Command.Group>
+	<Command.GroupHeading>Teams</Command.GroupHeading>
+	<Command.GroupItems>
+		<Item shortcut="⇧ P" value="Search Teams...">
+			<TeamsIcon />
+			Search Teams...
+		</Item>
+		<Item value="Create New Team...">
+			<PlusIcon />
+			Create New Team...
+		</Item>
+	</Command.GroupItems>
+</Command.Group>
+<Command.Group>
+	<Command.GroupHeading>Help</Command.GroupHeading>
+	<Command.GroupItems>
+		<Item shortcut="⇧ D" value="Search Docs...">
+			<DocsIcon />
+			Search Docs...
+		</Item>
+		<Item value="Send Feedback...">
+			<FeedbackIcon />
+			Send Feedback...
+		</Item>
+		<Item value="Contact Support">
+			<ContactIcon />
+			Contact Support
+		</Item>
+	</Command.GroupItems>
+</Command.Group>
diff --git a/sites/docs/src/lib/components/examples/command/vercel/icons/contact.svelte b/sites/docs/src/lib/components/examples/command/vercel/icons/contact.svelte
new file mode 100644
index 000000000..b51599da7
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/vercel/icons/contact.svelte
@@ -0,0 +1,14 @@
+<svg
+	fill="none"
+	height="24"
+	shape-rendering="geometricPrecision"
+	stroke="currentColor"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	width="24"
+>
+	<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+	<path d="M22 6l-10 7L2 6" />
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/vercel/icons/docs.svelte b/sites/docs/src/lib/components/examples/command/vercel/icons/docs.svelte
new file mode 100644
index 000000000..2657f2002
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/vercel/icons/docs.svelte
@@ -0,0 +1,17 @@
+<svg
+	fill="none"
+	height="24"
+	shape-rendering="geometricPrecision"
+	stroke="currentColor"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	width="24"
+>
+	<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+	<path d="M14 2v6h6" />
+	<path d="M16 13H8" />
+	<path d="M16 17H8" />
+	<path d="M10 9H8" />
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/vercel/icons/feedback.svelte b/sites/docs/src/lib/components/examples/command/vercel/icons/feedback.svelte
new file mode 100644
index 000000000..d56e60978
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/vercel/icons/feedback.svelte
@@ -0,0 +1,15 @@
+<svg
+	fill="none"
+	height="24"
+	shape-rendering="geometricPrecision"
+	stroke="currentColor"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	width="24"
+>
+	<path
+		d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"
+	/>
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/vercel/icons/index.ts b/sites/docs/src/lib/components/examples/command/vercel/icons/index.ts
new file mode 100644
index 000000000..f1c265847
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/vercel/icons/index.ts
@@ -0,0 +1,6 @@
+export { default as ContactIcon } from "./contact.svelte";
+export { default as DocsIcon } from "./docs.svelte";
+export { default as FeedbackIcon } from "./feedback.svelte";
+export { default as PlusIcon } from "./plus.svelte";
+export { default as ProjectsIcon } from "./projects.svelte";
+export { default as TeamsIcon } from "./teams.svelte";
diff --git a/sites/docs/src/lib/components/examples/command/vercel/icons/plus.svelte b/sites/docs/src/lib/components/examples/command/vercel/icons/plus.svelte
new file mode 100644
index 000000000..1869cca84
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/vercel/icons/plus.svelte
@@ -0,0 +1,14 @@
+<svg
+	fill="none"
+	height="24"
+	shape-rendering="geometricPrecision"
+	stroke="currentColor"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	width="24"
+>
+	<path d="M12 5v14" />
+	<path d="M5 12h14" />
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/vercel/icons/projects.svelte b/sites/docs/src/lib/components/examples/command/vercel/icons/projects.svelte
new file mode 100644
index 000000000..ebaf96360
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/vercel/icons/projects.svelte
@@ -0,0 +1,16 @@
+<svg
+	fill="none"
+	height="24"
+	shape-rendering="geometricPrecision"
+	stroke="currentColor"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	width="24"
+>
+	<path d="M3 3h7v7H3z" />
+	<path d="M14 3h7v7h-7z" />
+	<path d="M14 14h7v7h-7z" />
+	<path d="M3 14h7v7H3z" />
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/vercel/icons/teams.svelte b/sites/docs/src/lib/components/examples/command/vercel/icons/teams.svelte
new file mode 100644
index 000000000..c10e8c36f
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/vercel/icons/teams.svelte
@@ -0,0 +1,16 @@
+<svg
+	fill="none"
+	height="24"
+	shape-rendering="geometricPrecision"
+	stroke="currentColor"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	width="24"
+>
+	<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+	<circle cx="9" cy="7" r="4" />
+	<path d="M23 21v-2a4 4 0 00-3-3.87" />
+	<path d="M16 3.13a4 4 0 010 7.75" />
+</svg>
diff --git a/sites/docs/src/lib/components/examples/command/vercel/item.svelte b/sites/docs/src/lib/components/examples/command/vercel/item.svelte
new file mode 100644
index 000000000..f9763530f
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/vercel/item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { Command } from "bits-ui";
+
+	let {
+		shortcut = "",
+		onSelect = () => {},
+		value,
+		children,
+	}: {
+		shortcut?: string;
+		onSelect?: (() => void) | undefined;
+		value: string;
+		children: Snippet;
+	} = $props();
+</script>
+
+<Command.Item {onSelect} {value}>
+	{@render children?.()}
+	{#if shortcut}
+		<div data-command-vercel-shortcuts="">
+			{#each shortcut.split(" ") as key}
+				<kbd>{key}</kbd>
+			{/each}
+		</div>
+	{/if}
+</Command.Item>
diff --git a/sites/docs/src/lib/components/examples/command/vercel/projects.svelte b/sites/docs/src/lib/components/examples/command/vercel/projects.svelte
new file mode 100644
index 000000000..5236e0a08
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/vercel/projects.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Item from "./item.svelte";
+</script>
+
+{#each { length: 6 } as _, i}
+	<Item value="Project {i + 1}">
+		Project {i + 1}
+	</Item>
+{/each}
diff --git a/sites/docs/src/lib/components/examples/command/vercel/vercel-command.svelte b/sites/docs/src/lib/components/examples/command/vercel/vercel-command.svelte
new file mode 100644
index 000000000..ee4ad63b1
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/vercel/vercel-command.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { Command } from "bits-ui";
+	import Home from "./home.svelte";
+	import Projects from "./projects.svelte";
+	import "./vercel.pcss";
+
+	let inputValue = $state("");
+
+	let pages = $state<string[]>(["home"]);
+
+	const activePage = $derived(pages[pages.length - 1]);
+	const isHome = $derived(activePage === "home");
+
+	function popPage() {
+		const next = [...pages];
+		next.splice(-1, 1);
+		pages = next;
+	}
+
+	function bounce(node: HTMLElement) {
+		node.style.transform = "scale(0.96)";
+		setTimeout(() => {
+			node.style.transform = "";
+		}, 100);
+
+		inputValue = "";
+	}
+
+	function handleKeydown(e: KeyboardEvent & { currentTarget: HTMLElement }) {
+		const currTarget = e.currentTarget;
+		if (!currTarget) return;
+
+		if (e.key === "Enter") {
+			bounce(currTarget);
+		}
+
+		if (isHome || inputValue.length) {
+			return;
+		}
+
+		if (e.key === "Backspace") {
+			e.preventDefault();
+			popPage();
+			bounce(currTarget);
+		}
+	}
+</script>
+
+<div class="vercel">
+	<Command.Root onkeydown={handleKeydown}>
+		<div>
+			{#each pages as page}
+				<div data-command-vercel-badge="">
+					{page}
+				</div>
+			{/each}
+		</div>
+		<Command.Input autofocus placeholder="What do you need?" bind:value={inputValue} />
+		<Command.List>
+			<Command.Viewport>
+				<Command.Empty>No results found.</Command.Empty>
+				{#key activePage}
+					{#if activePage === "home"}
+						<Home
+							searchProjects={() => {
+								pages = [...pages, "projects"];
+							}}
+						/>
+					{/if}
+					{#if activePage === "projects"}
+						<Projects />
+					{/if}
+				{/key}
+			</Command.Viewport>
+		</Command.List>
+	</Command.Root>
+</div>
diff --git a/sites/docs/src/lib/components/examples/command/vercel/vercel.pcss b/sites/docs/src/lib/components/examples/command/vercel/vercel.pcss
new file mode 100644
index 000000000..e693d59e0
--- /dev/null
+++ b/sites/docs/src/lib/components/examples/command/vercel/vercel.pcss
@@ -0,0 +1,154 @@
+.vercel {
+	[data-command-root] {
+		max-width: 640px;
+		width: 100%;
+		padding: 8px;
+		background: #ffffff;
+		border-radius: 12px;
+		overflow: hidden;
+		font-family: var(--font-sans);
+		border: 1px solid var(--gray6);
+		box-shadow: var(--command-shadow);
+		transition: transform 100ms ease;
+
+		.dark & {
+			background: rgba(22, 22, 22, 0.7);
+		}
+	}
+
+	[data-command-input] {
+		font-family: var(--font-sans);
+		border: none;
+		width: 100%;
+		font-size: 17px;
+		padding: 8px 8px 16px 8px;
+		outline: none;
+		background: var(--bg);
+		color: var(--gray12);
+		border-bottom: 1px solid var(--gray6);
+		margin-bottom: 16px;
+		border-radius: 0;
+
+		&::placeholder {
+			color: var(--gray9);
+		}
+	}
+
+	[data-command-vercel-badge] {
+		height: 20px;
+		background: var(--grayA3);
+		display: inline-flex;
+		align-items: center;
+		padding: 0 8px;
+		font-size: 12px;
+		color: var(--grayA11);
+		border-radius: 4px;
+		margin: 4px 0 4px 4px;
+		user-select: none;
+		text-transform: capitalize;
+		font-weight: 500;
+	}
+
+	[data-command-item] {
+		content-visibility: auto;
+
+		cursor: pointer;
+		height: 48px;
+		border-radius: 8px;
+		font-size: 14px;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 0 16px;
+		color: var(--gray11);
+		user-select: none;
+		will-change: background, color;
+		transition: all 150ms ease;
+		transition-property: none;
+
+		&[data-selected] {
+			background: var(--grayA3);
+			color: var(--gray12);
+		}
+
+		&[data-disabled] {
+			color: var(--gray8);
+			cursor: not-allowed;
+		}
+
+		&:active {
+			transition-property: background;
+			background: var(--gray4);
+		}
+
+		& + [data-command-item] {
+			margin-top: 4px;
+		}
+
+		svg {
+			width: 18px;
+			height: 18px;
+		}
+	}
+
+	[data-command-list] {
+		height: min(330px, calc(var(--bits-command-list-height)));
+		max-height: 400px;
+		overflow: auto;
+		overscroll-behavior: contain;
+		transition: 100ms ease;
+		transition-property: height;
+	}
+
+	[data-command-vercel-shortcuts] {
+		display: flex;
+		margin-left: auto;
+		gap: 8px;
+
+		& kbd {
+			font-family: var(--font-sans);
+			font-size: 12px;
+			min-width: 20px;
+			padding: 4px;
+			height: 20px;
+			border-radius: 4px;
+			color: var(--gray11);
+			background: var(--gray4);
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			text-transform: uppercase;
+		}
+	}
+
+	[data-command-separator] {
+		height: 1px;
+		width: 100%;
+		background: var(--gray5);
+		margin: 4px 0;
+	}
+
+	*:not([hidden]) + [data-command-group] {
+		margin-top: 8px;
+	}
+
+	[data-command-group-heading] {
+		user-select: none;
+		font-size: 12px;
+		color: var(--gray11);
+		padding: 0 8px;
+		display: flex;
+		align-items: center;
+		margin-bottom: 8px;
+	}
+
+	[data-command-empty] {
+		font-size: 14px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 48px;
+		white-space: pre-wrap;
+		color: var(--gray11);
+	}
+}
diff --git a/sites/docs/src/lib/content/api-reference/command.ts b/sites/docs/src/lib/content/api-reference/command.ts
new file mode 100644
index 000000000..d721ec65e
--- /dev/null
+++ b/sites/docs/src/lib/content/api-reference/command.ts
@@ -0,0 +1,309 @@
+import type {
+	CommandEmptyPropsWithoutHTML,
+	CommandGroupHeadingPropsWithoutHTML,
+	CommandGroupItemsPropsWithoutHTML,
+	CommandGroupPropsWithoutHTML,
+	CommandInputPropsWithoutHTML,
+	CommandItemPropsWithoutHTML,
+	CommandLinkItemPropsWithoutHTML,
+	CommandListPropsWithoutHTML,
+	CommandLoadingPropsWithoutHTML,
+	CommandRootPropsWithoutHTML,
+	CommandSeparatorPropsWithoutHTML,
+	CommandViewportPropsWithoutHTML,
+} from "bits-ui";
+import { NoopProp, OnStringValueChangeProp } from "./extended-types/shared/index.js";
+import { CommandFilterProp } from "./extended-types/command/index.js";
+import {
+	createApiSchema,
+	createBooleanProp,
+	createCSSVarSchema,
+	createDataAttrSchema,
+	createFunctionProp,
+	createNumberProp,
+	createPropSchema,
+	createStringProp,
+	withChildProps,
+} from "$lib/content/api-reference/helpers.js";
+import * as C from "$lib/content/constants.js";
+
+const root = createApiSchema<CommandRootPropsWithoutHTML>({
+	title: "Root",
+	description: "The root command component which manages & scopes the state of the command.",
+	props: {
+		value: createStringProp({
+			default: "",
+			description: "The value of the command.",
+			bindable: true,
+		}),
+		onValueChange: createFunctionProp({
+			definition: OnStringValueChangeProp,
+			description: "A callback that is fired when the command value changes.",
+		}),
+		label: createStringProp({
+			description:
+				"An accessible label for the command menu. This is not visible and is only used for screen readers.",
+		}),
+		filter: createFunctionProp({
+			definition: CommandFilterProp,
+			description:
+				"A custom filter function used to filter items. This function should return a number between `0` and `1`, with `1` being a perfect match, and `0` being no match, resulting in the item being hidden entirely. The items are  sorted/filtered based on this score.",
+		}),
+		shouldFilter: createBooleanProp({
+			default: C.TRUE,
+			description:
+				"Whether or not the command menu should filter items. This is useful when you want to apply custom filtering logic outside of the Command component.",
+		}),
+		loop: createBooleanProp({
+			default: C.FALSE,
+			description:
+				"Whether or not the command menu should loop through items when navigating with the keyboard.",
+		}),
+		disablePointerSelection: createBooleanProp({
+			default: C.FALSE,
+			description:
+				"Set this to true to prevent items from being selected when the users pointer moves over them.",
+		}),
+		vimBindings: createBooleanProp({
+			default: C.TRUE,
+			description:
+				"Whether VIM bindings should be enabled or not, which allow the user to navigate using ctrl+n/j/p/k",
+		}),
+		...withChildProps({
+			elType: "HTMLDivElement",
+		}),
+	},
+	dataAttributes: [
+		createDataAttrSchema({
+			name: "command-root",
+			description: "Present on the root element.",
+		}),
+	],
+});
+
+const input = createApiSchema<CommandInputPropsWithoutHTML>({
+	title: "Input",
+	description:
+		"A representation of the combobox input element, which is typically displayed in the content.",
+	props: {
+		value: createStringProp({
+			description:
+				"The value of the search query. This is used to filter items and to search for items.",
+			bindable: true,
+		}),
+		...withChildProps({ elType: "HTMLInputElement" }),
+	},
+	dataAttributes: [
+		createDataAttrSchema({
+			name: "command-input",
+			description: "Present on the input element.",
+		}),
+	],
+});
+
+const list = createApiSchema<CommandListPropsWithoutHTML>({
+	title: "List",
+	description: "The container for the viewport and its items of the command menu.",
+	props: {
+		...withChildProps({ elType: "HTMLDivElement" }),
+	},
+	dataAttributes: [
+		createDataAttrSchema({
+			name: "command-list",
+			description: "Present on the list element.",
+		}),
+	],
+	cssVars: [
+		createCSSVarSchema({
+			name: "--bits-command-list-height",
+			description:
+				"The height of the command list element, which is computed by the `Command.Viewport` component.",
+		}),
+	],
+});
+
+const viewport = createApiSchema<CommandViewportPropsWithoutHTML>({
+	title: "Viewport",
+	description:
+		"The viewport component which contains the items of the command menu. This component tracks the height of the viewport and updates the `--bits-command-list-height` CSS variable on the `Command.List` component.",
+	props: {
+		...withChildProps({ elType: "HTMLDivElement" }),
+	},
+	dataAttributes: [
+		createDataAttrSchema({
+			name: "command-viewport",
+			description: "Present on the viewport element.",
+		}),
+	],
+});
+
+const group = createApiSchema<CommandGroupPropsWithoutHTML>({
+	title: "Group",
+	description: "A group of items within the command menu.",
+	props: {
+		value: createStringProp({
+			description:
+				"If a `Command.GroupHeading` is used within this group, the contents of the heading will be used as the value. If the content is dynamic or you wish to have a more specific value, you can provide a unique value for the group here.",
+		}),
+		forceMount: createBooleanProp({
+			default: C.FALSE,
+			description:
+				"Whether or not the group should always be mounted to the DOM, regardless of the internal filtering logic",
+		}),
+		...withChildProps({ elType: "HTMLDivElement" }),
+	},
+	dataAttributes: [
+		createDataAttrSchema({
+			name: "command-group",
+			description: "Present on the group element.",
+		}),
+	],
+});
+
+const groupHeading = createApiSchema<CommandGroupHeadingPropsWithoutHTML>({
+	title: "GroupHeading",
+	description: "A heading for a group of items within the command menu.",
+	props: {
+		...withChildProps({ elType: "HTMLDivElement" }),
+	},
+	dataAttributes: [
+		createDataAttrSchema({
+			name: "command-group-heading",
+			description: "Present on the group heading element.",
+		}),
+	],
+});
+
+const groupItems = createApiSchema<CommandGroupItemsPropsWithoutHTML>({
+	title: "GroupItems",
+	description: "The container for the items within a group.",
+	props: {
+		...withChildProps({ elType: "HTMLDivElement" }),
+	},
+	dataAttributes: [
+		createDataAttrSchema({
+			name: "command-group-items",
+			description: "Present on the group items element.",
+		}),
+	],
+});
+
+const item = createApiSchema<CommandItemPropsWithoutHTML>({
+	title: "Item",
+	description:
+		"Represents a single item within the command menu. If you wish to render an anchor element to link to a page, use the `Command.LinkItem` component.",
+	props: {
+		value: createStringProp({
+			description: "The value of the item.",
+			required: true,
+		}),
+		keywords: createPropSchema({
+			type: "string[]",
+			description:
+				"An array of additional keywords or aliases that will be used to filter the item.",
+		}),
+		forceMount: createBooleanProp({
+			description:
+				"Whether or not the item should always be mounted to the DOM, regardless of the internal filtering logic",
+			default: C.FALSE,
+		}),
+		onSelect: createFunctionProp({
+			definition: NoopProp,
+			description: "A callback that is fired when the item is selected.",
+		}),
+		disabled: createBooleanProp({
+			default: C.FALSE,
+			description:
+				"Whether or not the combobox item is disabled. This will prevent interaction/selection.",
+		}),
+		...withChildProps({ elType: "HTMLDivElement" }),
+	},
+	dataAttributes: [
+		createDataAttrSchema({
+			name: "disabled",
+			description: "Present when the item is disabled.",
+		}),
+		createDataAttrSchema({
+			name: "selected",
+			description: "Present when the item is selected.",
+		}),
+		createDataAttrSchema({
+			name: "command-item",
+			description: "Present on the item element.",
+		}),
+	],
+});
+
+const linkItem = createApiSchema<CommandLinkItemPropsWithoutHTML>({
+	...item,
+	title: "LinkItem",
+	description:
+		"Similar to the `Command.Item` component, but renders an anchor element to take advantage of preloading before navigation.",
+});
+
+const empty = createApiSchema<CommandEmptyPropsWithoutHTML>({
+	title: "Empty",
+	description: "The empty state of the command menu. Shown when there are no items to display.",
+	props: {
+		...withChildProps({ elType: "HTMLDivElement" }),
+	},
+	dataAttributes: [
+		createDataAttrSchema({
+			name: "command-empty",
+			description: "Present on the empty element.",
+		}),
+	],
+});
+
+const loading = createApiSchema<CommandLoadingPropsWithoutHTML>({
+	title: "Loading",
+	description: "The loading state of the command menu. Shown when the menu is loading items.",
+	props: {
+		progress: createNumberProp({
+			default: "0",
+			description: "The progress of the loading state.",
+		}),
+		...withChildProps({ elType: "HTMLDivElement" }),
+	},
+	dataAttributes: [
+		createDataAttrSchema({
+			name: "command-loading",
+			description: "Present on the loading element.",
+		}),
+	],
+});
+
+const separator = createApiSchema<CommandSeparatorPropsWithoutHTML>({
+	title: "Separator",
+	description:
+		"A visual separator for use between items and groups. Visible when the search query is empty or the `forceMount` prop is `true`.",
+	props: {
+		forceMount: createBooleanProp({
+			default: C.FALSE,
+			description:
+				"Whether or not the separator should always be mounted to the DOM, regardless of the internal filtering logic",
+		}),
+		...withChildProps({ elType: "HTMLDivElement" }),
+	},
+	dataAttributes: [
+		createDataAttrSchema({
+			name: "command-separator",
+			description: "Present on the separator element.",
+		}),
+	],
+});
+
+export const command = [
+	root,
+	input,
+	list,
+	viewport,
+	group,
+	groupHeading,
+	groupItems,
+	item,
+	linkItem,
+	empty,
+	loading,
+	separator,
+];
diff --git a/sites/docs/src/lib/content/api-reference/extended-types/command/command-filter-prop.md b/sites/docs/src/lib/content/api-reference/extended-types/command/command-filter-prop.md
new file mode 100644
index 000000000..e7cfe5d7d
--- /dev/null
+++ b/sites/docs/src/lib/content/api-reference/extended-types/command/command-filter-prop.md
@@ -0,0 +1,3 @@
+```ts
+(value: string, search: string, keywords?: string[]) => number;
+```
diff --git a/sites/docs/src/lib/content/api-reference/extended-types/command/index.ts b/sites/docs/src/lib/content/api-reference/extended-types/command/index.ts
new file mode 100644
index 000000000..f8f1ad8e3
--- /dev/null
+++ b/sites/docs/src/lib/content/api-reference/extended-types/command/index.ts
@@ -0,0 +1 @@
+export { default as CommandFilterProp } from "./command-filter-prop.md";
diff --git a/sites/docs/src/lib/content/api-reference/index.ts b/sites/docs/src/lib/content/api-reference/index.ts
index b8008a077..e573460d3 100644
--- a/sites/docs/src/lib/content/api-reference/index.ts
+++ b/sites/docs/src/lib/content/api-reference/index.ts
@@ -7,6 +7,7 @@ import { calendar } from "./calendar.js";
 import { checkbox } from "./checkbox.js";
 import { collapsible } from "./collapsible.js";
 import { combobox } from "./combobox.js";
+import { command } from "./command.js";
 import { contextMenu } from "./context-menu.js";
 import { dateField } from "./date-field.js";
 import { datePicker } from "./date-picker.js";
@@ -47,6 +48,7 @@ export const bits = [
 	"checkbox",
 	"collapsible",
 	"combobox",
+	"command",
 	"context-menu",
 	"date-field",
 	"date-picker",
@@ -95,6 +97,7 @@ export const apiSchemas: Record<Bit, APISchema[]> = {
 	checkbox,
 	collapsible,
 	combobox,
+	command,
 	"context-menu": contextMenu,
 	"date-field": dateField,
 	"date-picker": datePicker,
diff --git a/sites/docs/src/lib/content/api-reference/tabs.ts b/sites/docs/src/lib/content/api-reference/tabs.ts
index edc3e0a3d..8334cf1f1 100644
--- a/sites/docs/src/lib/content/api-reference/tabs.ts
+++ b/sites/docs/src/lib/content/api-reference/tabs.ts
@@ -4,6 +4,7 @@ import type {
 	TabsRootPropsWithoutHTML,
 	TabsTriggerPropsWithoutHTML,
 } from "bits-ui";
+import { OnStringValueChangeProp } from "./extended-types/shared/index.js";
 import {
 	createApiSchema,
 	createBooleanProp,
@@ -24,7 +25,7 @@ const root = createApiSchema<TabsRootPropsWithoutHTML>({
 			bindable: true,
 		}),
 		onValueChange: createFunctionProp({
-			definition: "(value: string) => void",
+			definition: OnStringValueChangeProp,
 			description: "A callback function called when the active tab value changes.",
 		}),
 		activationMode: createEnumProp({
diff --git a/sites/docs/src/lib/styles/command/command.pcss b/sites/docs/src/lib/styles/command/command.pcss
new file mode 100644
index 000000000..e76472c9e
--- /dev/null
+++ b/sites/docs/src/lib/styles/command/command.pcss
@@ -0,0 +1,497 @@
+.main {
+	width: 100vw;
+	min-height: 100vh;
+	position: relative;
+	display: flex;
+	justify-content: center;
+	padding: 120px 24px 160px 24px;
+
+	&:before {
+		background: radial-gradient(circle, rgba(2, 0, 36, 0) 0, var(--gray1) 100%);
+		position: absolute;
+		content: "";
+		z-index: 2;
+		width: 100%;
+		height: 100%;
+		top: 0;
+	}
+
+	&:after {
+		content: "";
+		background-image: url("/grid.svg");
+		position: absolute;
+		z-index: -1;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0.2;
+		filter: invert(1);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		&:after {
+			filter: unset;
+		}
+	}
+
+	& h1 {
+		font-size: 32px;
+		color: var(--gray12);
+		font-weight: 600;
+		letter-spacing: -2px;
+		line-height: 40px;
+	}
+
+	& p {
+		color: var(--gray11);
+		margin-top: 8px;
+		font-size: 16px;
+	}
+}
+
+.content {
+	height: fit-content;
+	position: relative;
+	z-index: 3;
+	width: 100%;
+	max-width: 640px;
+
+	&:after {
+		background-image: radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 1) 0px, transparent 50%),
+			radial-gradient(at 97% 21%, hsla(256, 98%, 72%, 1) 0px, transparent 50%),
+			radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%),
+			radial-gradient(at 10% 29%, hsla(133, 96%, 67%, 1) 0px, transparent 50%),
+			radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%),
+			radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%),
+			radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%);
+		position: absolute;
+		content: "";
+		z-index: 2;
+		width: 100%;
+		height: 100%;
+		filter: blur(100px) saturate(150%);
+		z-index: -1;
+		top: 80px;
+		opacity: 0.2;
+		transform: translateZ(0);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		&:after {
+			opacity: 0.1;
+		}
+	}
+}
+
+.meta {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 48px;
+	flex-wrap: wrap;
+	gap: 16px;
+}
+
+.buttons {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	gap: 12px;
+	transform: translateY(12px);
+}
+
+.githubButton,
+.installButton,
+.switcher button {
+	height: 40px;
+	color: var(--gray12);
+	border-radius: 9999px;
+	font-size: 14px;
+	transition-duration: 150ms;
+	transition-property: background, color, transform;
+	transition-timing-function: ease-in;
+	will-change: transform;
+}
+
+.githubButton {
+	width: 200px;
+	padding: 0 12px;
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-weight: 500;
+
+	&:hover {
+		background: var(--grayA3);
+	}
+
+	&:active {
+		background: var(--grayA5);
+		transform: scale(0.97);
+	}
+
+	&:focus-visible {
+		outline: 0;
+		outline: 2px solid var(--gray7);
+	}
+}
+
+.installButton {
+	background: var(--grayA3);
+	display: flex;
+	align-items: center;
+	gap: 16px;
+	padding: 0px 8px 0 16px;
+	cursor: copy;
+	font-weight: 500;
+
+	&:hover {
+		background: var(--grayA4);
+
+		& span {
+			background: var(--grayA5);
+
+			& svg {
+				color: var(--gray12);
+			}
+		}
+	}
+
+	&:focus-visible {
+		outline: 0;
+		outline: 2px solid var(--gray7);
+		outline-offset: 2px;
+	}
+
+	&:active {
+		background: var(--gray5);
+		transform: scale(0.97);
+	}
+
+	& span {
+		width: 28px;
+		height: 28px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-left: auto;
+		background: var(--grayA3);
+		border-radius: 9999px;
+		transition: background 150ms ease;
+
+		& svg {
+			size: 16px;
+			color: var(--gray11);
+			transition: color 150ms ease;
+		}
+	}
+}
+
+.switcher {
+	display: grid;
+	grid-template-columns: repeat(4, 100px);
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	margin-top: 48px;
+	position: relative;
+
+	& button {
+		height: 32px;
+		line-height: 32px;
+		display: flex;
+		align-items: center;
+		margin: auto;
+		gap: 8px;
+		padding: 0 16px;
+		border-radius: 9999px;
+		color: var(--gray11);
+		font-size: 14px;
+		cursor: pointer;
+		user-select: none;
+		position: relative;
+		text-transform: capitalize;
+
+		&:hover {
+			color: var(--gray12);
+		}
+
+		&:active {
+			transform: scale(0.96);
+		}
+
+		&:focus-visible {
+			outline: 0;
+			outline: 2px solid var(--gray7);
+		}
+
+		& svg {
+			width: 14px;
+			height: 14px;
+		}
+
+		&[data-selected] {
+			color: var(--gray12);
+
+			&:hover .activeTheme {
+				background: var(--grayA6);
+			}
+
+			&:active {
+				transform: scale(0.96);
+
+				.activeTheme {
+					background: var(--grayA7);
+				}
+			}
+		}
+	}
+
+	.activeTheme {
+		background: var(--grayA5);
+		border-radius: 9999px;
+		height: 32px;
+		width: 100%;
+		top: 0;
+		position: absolute;
+		left: 0;
+	}
+
+	.arrow {
+		color: var(--gray11);
+		user-select: none;
+		position: absolute;
+	}
+}
+
+.header {
+	position: absolute;
+	left: 0;
+	top: -64px;
+	gap: 8px;
+	background: var(--gray3);
+	padding: 4px;
+	display: flex;
+	align-items: center;
+	border-radius: 9999px;
+
+	& button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		padding: 4px;
+		border-radius: 9999px;
+		color: var(--gray11);
+
+		& svg {
+			width: 16px;
+			height: 16px;
+		}
+
+		&[aria-selected] {
+			background: #ffffff;
+			color: var(--gray12);
+			box-shadow:
+				0px 2px 5px -2px rgb(0 0 0 / 15%),
+				0 1px 3px -1px rgb(0 0 0 / 20%);
+		}
+	}
+}
+
+.versionBadge {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--grayA11);
+	background: var(--grayA3);
+	padding: 4px 8px;
+	border-radius: 4px;
+	font-weight: 500;
+	font-size: 14px;
+	margin-bottom: 8px;
+
+	@media (prefers-color-scheme: dark) {
+		background: var(--grayA2);
+	}
+}
+
+.codeBlock {
+	margin-top: 72px;
+	position: relative;
+}
+
+.footer {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 4px;
+	width: fit-content;
+	margin: 32px auto;
+	bottom: 16px;
+	color: var(--gray11);
+	font-size: 13px;
+	z-index: 10;
+	position: absolute;
+	bottom: 0;
+
+	& a {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		color: var(--gray12);
+		font-weight: 500;
+		border-radius: 9999px;
+		padding: 4px;
+		margin: 0 -2px;
+		transition: background 150ms ease;
+
+		&:hover,
+		&:focus-visible {
+			background: var(--grayA4);
+			outline: 0;
+		}
+	}
+
+	& img {
+		width: 20px;
+		height: 20px;
+		border: 1px solid var(--gray5);
+		border-radius: 9999px;
+	}
+}
+
+.line {
+	height: 20px;
+	width: 180px;
+	margin: 64px auto;
+	background-image: url("/line.svg");
+	filter: invert(1);
+	mask-image: linear-gradient(90deg, transparent, #fff 4rem, #fff calc(100% - 4rem), transparent);
+
+	@media (prefers-color-scheme: dark) {
+		filter: unset;
+	}
+}
+
+.line2 {
+	height: 1px;
+	width: 300px;
+	background: var(--gray7);
+	position: absolute;
+	top: 0;
+	mask-image: linear-gradient(90deg, transparent, #fff 4rem, #fff calc(100% - 4rem), transparent);
+}
+
+.line3 {
+	height: 300px;
+	width: calc(100% + 32px);
+	position: absolute;
+	top: -16px;
+	left: -16px;
+
+	border-radius: 16px 16px 0 0;
+	--size: 1px;
+	--gradient: linear-gradient(to top, var(--gray1), var(--gray7));
+
+	&:before {
+		content: "";
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		padding: var(--size);
+		background: linear-gradient(to top, var(--gray1), var(--gray7));
+		mask:
+			linear-gradient(black, black) content-box,
+			linear-gradient(black, black);
+		mask-composite: exclude;
+		transform: translateZ(0);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		&:before {
+			mask: none;
+			mask-composite: none;
+			opacity: 0.2;
+			backdrop-filter: blur(20px);
+		}
+	}
+}
+
+.raunoSignature,
+.pacoSignature {
+	position: absolute;
+	height: fit-content;
+	color: var(--gray11);
+	pointer-events: none;
+}
+
+.raunoSignature {
+	width: 120px;
+	stroke-dashoffset: 1;
+	stroke-dasharray: 1;
+	right: -48px;
+}
+
+.pacoSignature {
+	width: 120px;
+	stroke-dashoffset: 1;
+	stroke-dasharray: 1;
+	left: -8px;
+}
+
+.footerText {
+	display: flex;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.footer[data-animate="true"] {
+	.raunoSignature path {
+		animation: drawRaunoSignature 1.5s ease forwards 0.5s;
+	}
+
+	.pacoSignature path {
+		animation: drawPacoSignature 0.8s linear forwards 0.5s;
+	}
+
+	.footerText {
+		animation: showFooter 1s linear forwards 3s;
+	}
+}
+
+@keyframes drawPacoSignature {
+	100% {
+		stroke-dashoffset: 0;
+	}
+}
+
+@keyframes drawRaunoSignature {
+	100% {
+		stroke-dashoffset: 0;
+	}
+}
+
+@keyframes showFooter {
+	100% {
+		opacity: 1;
+	}
+}
+
+@media (max-width: 640px) {
+	.main {
+		padding-top: 24px;
+		padding-bottom: 120px;
+	}
+
+	.switcher {
+		grid-template-columns: repeat(2, 100px);
+		gap: 16px;
+
+		.arrow {
+			display: none;
+		}
+	}
+}
diff --git a/sites/docs/src/lib/styles/command/globals.pcss b/sites/docs/src/lib/styles/command/globals.pcss
new file mode 100644
index 000000000..a3e50cc9f
--- /dev/null
+++ b/sites/docs/src/lib/styles/command/globals.pcss
@@ -0,0 +1,151 @@
+@font-face {
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 100 900;
+	font-display: optional;
+	src: url(/inter-var-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+		U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+::selection {
+	background: #eb5027;
+	color: white;
+}
+
+html,
+body {
+	padding: 0;
+	margin: 0;
+	font-family: var(--font-sans);
+}
+
+body {
+	background: var(--app-bg);
+	overflow-x: hidden;
+}
+
+button {
+	background: none;
+	font-family: var(--font-sans);
+	padding: 0;
+	border: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+	margin: 0;
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+*,
+*::after,
+*::before {
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+:root {
+	--font-sans: "Inter", --apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
+		Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+	--app-bg: var(--gray1);
+	--command-shadow: 0 16px 70px rgb(0 0 0 / 20%);
+
+	--lowContrast: #ffffff;
+	--highContrast: #000000;
+
+	--gray1: hsl(0, 0%, 99%);
+	--gray2: hsl(0, 0%, 97.3%);
+	--gray3: hsl(0, 0%, 95.1%);
+	--gray4: hsl(0, 0%, 93%);
+	--gray5: hsl(0, 0%, 90.9%);
+	--gray6: hsl(0, 0%, 88.7%);
+	--gray7: hsl(0, 0%, 85.8%);
+	--gray8: hsl(0, 0%, 78%);
+	--gray9: hsl(0, 0%, 56.1%);
+	--gray10: hsl(0, 0%, 52.3%);
+	--gray11: hsl(0, 0%, 43.5%);
+	--gray12: hsl(0, 0%, 9%);
+
+	--grayA1: hsla(0, 0%, 0%, 0.012);
+	--grayA2: hsla(0, 0%, 0%, 0.027);
+	--grayA3: hsla(0, 0%, 0%, 0.047);
+	--grayA4: hsla(0, 0%, 0%, 0.071);
+	--grayA5: hsla(0, 0%, 0%, 0.09);
+	--grayA6: hsla(0, 0%, 0%, 0.114);
+	--grayA7: hsla(0, 0%, 0%, 0.141);
+	--grayA8: hsla(0, 0%, 0%, 0.22);
+	--grayA9: hsla(0, 0%, 0%, 0.439);
+	--grayA10: hsla(0, 0%, 0%, 0.478);
+	--grayA11: hsla(0, 0%, 0%, 0.565);
+	--grayA12: hsla(0, 0%, 0%, 0.91);
+
+	--blue1: hsl(206, 100%, 99.2%);
+	--blue2: hsl(210, 100%, 98%);
+	--blue3: hsl(209, 100%, 96.5%);
+	--blue4: hsl(210, 98.8%, 94%);
+	--blue5: hsl(209, 95%, 90.1%);
+	--blue6: hsl(209, 81.2%, 84.5%);
+	--blue7: hsl(208, 77.5%, 76.9%);
+	--blue8: hsl(206, 81.9%, 65.3%);
+	--blue9: hsl(206, 100%, 50%);
+	--blue10: hsl(208, 100%, 47.3%);
+	--blue11: hsl(211, 100%, 43.2%);
+	--blue12: hsl(211, 100%, 15%);
+}
+
+.dark {
+	--app-bg: var(--gray1);
+
+	--lowContrast: #000000;
+	--highContrast: #ffffff;
+
+	--gray1: hsl(0, 0%, 8.5%);
+	--gray2: hsl(0, 0%, 11%);
+	--gray3: hsl(0, 0%, 13.6%);
+	--gray4: hsl(0, 0%, 15.8%);
+	--gray5: hsl(0, 0%, 17.9%);
+	--gray6: hsl(0, 0%, 20.5%);
+	--gray7: hsl(0, 0%, 24.3%);
+	--gray8: hsl(0, 0%, 31.2%);
+	--gray9: hsl(0, 0%, 43.9%);
+	--gray10: hsl(0, 0%, 49.4%);
+	--gray11: hsl(0, 0%, 62.8%);
+	--gray12: hsl(0, 0%, 93%);
+
+	--grayA1: hsla(0, 0%, 100%, 0);
+	--grayA2: hsla(0, 0%, 100%, 0.026);
+	--grayA3: hsla(0, 0%, 100%, 0.056);
+	--grayA4: hsla(0, 0%, 100%, 0.077);
+	--grayA5: hsla(0, 0%, 100%, 0.103);
+	--grayA6: hsla(0, 0%, 100%, 0.129);
+	--grayA7: hsla(0, 0%, 100%, 0.172);
+	--grayA8: hsla(0, 0%, 100%, 0.249);
+	--grayA9: hsla(0, 0%, 100%, 0.386);
+	--grayA10: hsla(0, 0%, 100%, 0.446);
+	--grayA11: hsla(0, 0%, 100%, 0.592);
+	--grayA12: hsla(0, 0%, 100%, 0.923);
+
+	--blue1: hsl(212, 35%, 9.2%);
+	--blue2: hsl(216, 50%, 11.8%);
+	--blue3: hsl(214, 59.4%, 15.3%);
+	--blue4: hsl(214, 65.8%, 17.9%);
+	--blue5: hsl(213, 71.2%, 20.2%);
+	--blue6: hsl(212, 77.4%, 23.1%);
+	--blue7: hsl(211, 85.1%, 27.4%);
+	--blue8: hsl(211, 89.7%, 34.1%);
+	--blue9: hsl(206, 100%, 50%);
+	--blue10: hsl(209, 100%, 60.6%);
+	--blue11: hsl(210, 100%, 66.1%);
+	--blue12: hsl(206, 98%, 95.8%);
+}
diff --git a/sites/docs/src/lib/styles/command/icons.pcss b/sites/docs/src/lib/styles/command/icons.pcss
new file mode 100644
index 000000000..85c4b7e90
--- /dev/null
+++ b/sites/docs/src/lib/styles/command/icons.pcss
@@ -0,0 +1,46 @@
+.blurLogo {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	border-radius: 4px;
+	overflow: hidden;
+	box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
+
+	.bg {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		z-index: 1;
+		pointer-events: none;
+		user-select: none;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		transform: scale(1.5) translateZ(0);
+		filter: blur(12px) opacity(0.4) saturate(100%);
+		transition: filter 150ms ease;
+	}
+
+	.inner {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		object-fit: cover;
+		width: 100%;
+		height: 100%;
+		user-select: none;
+		pointer-events: none;
+		border-radius: inherit;
+		z-index: 2;
+
+		& svg {
+			width: 14px;
+			height: 14px;
+			filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.16));
+			transition: filter 150ms ease;
+		}
+	}
+}
diff --git a/sites/docs/src/routes/(examples)/examples/command/+layout.svelte b/sites/docs/src/routes/(examples)/examples/command/+layout.svelte
new file mode 100644
index 000000000..7ea07340c
--- /dev/null
+++ b/sites/docs/src/routes/(examples)/examples/command/+layout.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import "$lib/styles/command/globals.pcss";
+	import "$lib/styles/command/icons.pcss";
+	import "$lib/styles/command/command.pcss";
+
+	let { children } = $props();
+</script>
+
+{@render children?.()}
diff --git a/sites/docs/src/routes/(examples)/examples/command/+page.svelte b/sites/docs/src/routes/(examples)/examples/command/+page.svelte
new file mode 100644
index 000000000..47076acda
--- /dev/null
+++ b/sites/docs/src/routes/(examples)/examples/command/+page.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import ThemeSwitcher from "$lib/components/examples/command/theme-switcher.svelte";
+	import CommandWrapper from "$lib/components/examples/command/command-wrapper.svelte";
+	import RaycastCommand from "$lib/components/examples/command/raycast/raycast-command.svelte";
+	import LinearCommand from "$lib/components/examples/command/linear/linear-command.svelte";
+	import VercelCommand from "$lib/components/examples/command/vercel/vercel-command.svelte";
+	import FramerCommand from "$lib/components/examples/command/framer/framer-command.svelte";
+
+	let theme: "raycast" | "linear" | "vercel" | "framer" = $state("raycast");
+</script>
+
+<main class="main">
+	<div class="content">
+		<div style:height="475px">
+			{#if theme === "raycast"}
+				<CommandWrapper>
+					<RaycastCommand />
+				</CommandWrapper>
+			{:else if theme === "linear"}
+				<CommandWrapper>
+					<LinearCommand />
+				</CommandWrapper>
+			{:else if theme === "vercel"}
+				<CommandWrapper>
+					<VercelCommand />
+				</CommandWrapper>
+			{:else if theme === "framer"}
+				<CommandWrapper>
+					<FramerCommand />
+				</CommandWrapper>
+			{/if}
+		</div>
+		<ThemeSwitcher bind:theme />
+
+		<div aria-hidden="true" class="line"></div>
+	</div>
+</main>
diff --git a/sites/docs/src/routes/(examples)/examples/command/sink/+page.svelte b/sites/docs/src/routes/(examples)/examples/command/sink/+page.svelte
new file mode 100644
index 000000000..0037efb74
--- /dev/null
+++ b/sites/docs/src/routes/(examples)/examples/command/sink/+page.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Command } from "bits-ui";
+
+	// prettier-ignore
+	const ten_first_names = ["John", "Doe", "Jane", "Smith", "Michael", "Brown", "William", "Johnson", "David", "Williams"];
+	// prettier-ignore
+	const ten_middle_names = ["James", "Lee", "Robert", "Michael", "David", "Joseph", "Thomas", "Charles", "Christopher", "Daniel"];
+	// prettier-ignore
+	const ten_last_names = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Rodriguez", "Martinez"];
+	// prettier-ignore
+	const ten_second_first_names = [ "Emma", "Liam", "Sophia", "Noah", "Olivia", "Ethan", "Ava", 	"Mason", "Isabella", "William"];
+
+	const names = ten_first_names
+		.map((first) => {
+			return ten_middle_names.map((middle) => {
+				return ten_last_names.map((last) => {
+					return ten_second_first_names.map((second) => {
+						return `${first} ${second} ${middle} ${last}`;
+					});
+				});
+			});
+		})
+		.flat(3)
+		.slice(0, 2500);
+</script>
+
+<div>
+	Total items: {names.length}
+</div>
+<div style:padding="16px">
+	<Command.Root loop>
+		<Command.Input placeholder="Search items..." />
+		<Command.List
+			class="h-[var(--cmdk-list-height)]"
+			style="height: 200px; overflow-y: auto; max-width: 300px;"
+		>
+			<Command.Empty>No item found.</Command.Empty>
+			{#each names as txt (txt)}
+				<Command.Item value={txt}>{txt}</Command.Item>
+			{/each}
+		</Command.List>
+	</Command.Root>
+</div>
diff --git a/sites/docs/src/routes/+error.svelte b/sites/docs/src/routes/(main)/+error.svelte
similarity index 100%
rename from sites/docs/src/routes/+error.svelte
rename to sites/docs/src/routes/(main)/+error.svelte
diff --git a/sites/docs/src/routes/+layout.svelte b/sites/docs/src/routes/(main)/+layout.svelte
similarity index 100%
rename from sites/docs/src/routes/+layout.svelte
rename to sites/docs/src/routes/(main)/+layout.svelte
diff --git a/sites/docs/src/routes/+page.svelte b/sites/docs/src/routes/(main)/+page.svelte
similarity index 100%
rename from sites/docs/src/routes/+page.svelte
rename to sites/docs/src/routes/(main)/+page.svelte
diff --git a/sites/docs/src/routes/(main)/+page.ts b/sites/docs/src/routes/(main)/+page.ts
new file mode 100644
index 000000000..ac3ee4cba
--- /dev/null
+++ b/sites/docs/src/routes/(main)/+page.ts
@@ -0,0 +1,5 @@
+import { redirect } from "@sveltejs/kit";
+
+export async function load() {
+	redirect(303, "/docs/introduction");
+}
diff --git a/sites/docs/src/routes/(main)/docs/+page.ts b/sites/docs/src/routes/(main)/docs/+page.ts
new file mode 100644
index 000000000..ac3ee4cba
--- /dev/null
+++ b/sites/docs/src/routes/(main)/docs/+page.ts
@@ -0,0 +1,5 @@
+import { redirect } from "@sveltejs/kit";
+
+export async function load() {
+	redirect(303, "/docs/introduction");
+}
diff --git a/sites/docs/src/routes/docs/[...slug]/+page.svelte b/sites/docs/src/routes/(main)/docs/[...slug]/+page.svelte
similarity index 100%
rename from sites/docs/src/routes/docs/[...slug]/+page.svelte
rename to sites/docs/src/routes/(main)/docs/[...slug]/+page.svelte
diff --git a/sites/docs/src/routes/docs/[...slug]/+page.ts b/sites/docs/src/routes/(main)/docs/[...slug]/+page.ts
similarity index 63%
rename from sites/docs/src/routes/docs/[...slug]/+page.ts
rename to sites/docs/src/routes/(main)/docs/[...slug]/+page.ts
index c5031c3b0..345a7c547 100644
--- a/sites/docs/src/routes/docs/[...slug]/+page.ts
+++ b/sites/docs/src/routes/(main)/docs/[...slug]/+page.ts
@@ -1,11 +1,10 @@
-import type { PageLoad } from "./$types.js";
 import { getDoc } from "$lib/utils/docs.js";
 
-export const load: PageLoad = async (event) => {
+export async function load(event) {
 	const { component, title, metadata } = await getDoc(event.params.slug);
 	return {
 		component,
 		title,
 		metadata,
 	};
-};
+}
diff --git a/sites/docs/src/routes/docs/components/[name]/+page.svelte b/sites/docs/src/routes/(main)/docs/components/[name]/+page.svelte
similarity index 100%
rename from sites/docs/src/routes/docs/components/[name]/+page.svelte
rename to sites/docs/src/routes/(main)/docs/components/[name]/+page.svelte
diff --git a/sites/docs/src/routes/docs/components/[name]/+page.ts b/sites/docs/src/routes/(main)/docs/components/[name]/+page.ts
similarity index 67%
rename from sites/docs/src/routes/docs/components/[name]/+page.ts
rename to sites/docs/src/routes/(main)/docs/components/[name]/+page.ts
index d44fccc7c..e7903212f 100644
--- a/sites/docs/src/routes/docs/components/[name]/+page.ts
+++ b/sites/docs/src/routes/(main)/docs/components/[name]/+page.ts
@@ -1,7 +1,6 @@
-import type { PageLoad } from "./$types.js";
 import { getComponentDoc } from "$lib/utils/docs.js";
 
-export const load: PageLoad = async (event) => {
+export async function load(event) {
 	const { component, title, metadata, schemas } = await getComponentDoc(event.params.name);
 	return {
 		component,
@@ -9,4 +8,4 @@ export const load: PageLoad = async (event) => {
 		metadata,
 		schemas,
 	};
-};
+}
diff --git a/sites/docs/src/routes/sink/+page.svelte b/sites/docs/src/routes/(main)/sink/+page.svelte
similarity index 100%
rename from sites/docs/src/routes/sink/+page.svelte
rename to sites/docs/src/routes/(main)/sink/+page.svelte
diff --git a/sites/docs/src/routes/+page.ts b/sites/docs/src/routes/+page.ts
deleted file mode 100644
index 17bd9dc82..000000000
--- a/sites/docs/src/routes/+page.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { redirect } from "@sveltejs/kit";
-import type { PageLoad } from "./$types.js";
-
-export const load: PageLoad = async () => {
-	redirect(303, "/docs/introduction");
-};
diff --git a/sites/docs/src/routes/docs/+page.ts b/sites/docs/src/routes/docs/+page.ts
deleted file mode 100644
index 3c3ce1bad..000000000
--- a/sites/docs/src/routes/docs/+page.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { redirect } from "@sveltejs/kit";
-import type { PageLoad } from "../$types.js";
-
-export const load: PageLoad = async () => {
-	redirect(303, "/docs/introduction");
-};