A command palette with instant search, grouped actions, keyboard shortcuts and nested pages. Add a Cmd K spotlight menu to any app or docs site.
"use client";
import * as React from "react";
import { Command } from "@/components/ui/command";
import type { CommandGroup } from "@/components/ui/command";
import { IconFolder, IconPlus, IconSearch, IconSettings, IconUser } from "@tabler/icons-react";
function Shell({ children }: { children: React.ReactNode }) {
return (
<div className="w-full max-w-[420px] overflow-hidden rounded-2xl border border-zinc-200/80 bg-white dark:border-white/[0.06] dark:bg-[#0c0c0e]">
{children}
</div>
);
}
const basicGroups: CommandGroup[] = [
{
heading: "Suggestions",
items: [
{ id: "new-file", label: "New file", icon: <IconPlus />, shortcut: ["⌘", "N"] },
{ id: "new-folder", label: "New folder", icon: <IconFolder />, shortcut: ["⌘", "⇧", "N"] },
{ id: "search", label: "Search everywhere", icon: <IconSearch />, shortcut: ["⌘", "K"] },
],
},
{
heading: "Account",
items: [
{ id: "profile", label: "View profile", icon: <IconUser /> },
{ id: "settings", label: "Settings", icon: <IconSettings />, shortcut: ["⌘", ","] },
],
},
];
export function CommandPreview() {
return (
<Shell>
<Command groups={basicGroups} />
</Shell>
);
}
export default function Demo() {
return <CommandPreview />;
}