38:I[18486,["/_next/static/chunks/3zk55npp9bf01.js","/_next/static/chunks/1bmtg9bwu8nuy.js","/_next/static/chunks/2nclqvc1ikloe.js","/_next/static/chunks/2c0rc2z4-w8le.js","/_next/static/chunks/057mb2xcf2jno.js","/_next/static/chunks/1kgh9qe1ehb36.js","/_next/static/chunks/2tex7xqe6exb2.js","/_next/static/chunks/0yb18px6-xu7r.js","/_next/static/chunks/2kd0hcrezmfwt.js","/_next/static/chunks/27m704my3j9ui.js","/_next/static/chunks/12j6x0qnjtixc.js","/_next/static/chunks/2r3jvxnfoxesu.js","/_next/static/chunks/30ccdm0jndq8p.js","/_next/static/chunks/1_q0nrsqfqmi_.js","/_next/static/chunks/3rvimhctlr4-r.js","/_next/static/chunks/2ugulmxbv5uj0.js","/_next/static/chunks/3kuhqh5rrckuh.js","/_next/static/chunks/1eksrqhdkzx-h.js","/_next/static/chunks/2t_0dog78z_7-.js","/_next/static/chunks/3kpplfs3hf0m1.js","/_next/static/chunks/1b5k-kuur2jsg.js","/_next/static/chunks/2wn6uqhj_7ar8.js","/_next/static/chunks/0tjcxouu9yygq.js","/_next/static/chunks/055zpetddh1g_.js","/_next/static/chunks/3p69anx74x2yx.js","/_next/static/chunks/1g5b9n1rk-fe1.js","/_next/static/chunks/0c8hzjvqy0eap.js","/_next/static/chunks/2qk8_8ekmy055.js","/_next/static/chunks/2je2_u52g5v_z.js","/_next/static/chunks/350ronaygctbc.js","/_next/static/chunks/1-3y286u_aret.js","/_next/static/chunks/082kv8-anzjoa.js","/_next/static/chunks/1ejuckrr0mbw_.js","/_next/static/chunks/09i7wyl1df5gs.js","/_next/static/chunks/444xrsj08w4c1.js","/_next/static/chunks/3oi2f2hg83rth.js","/_next/static/chunks/0xrmk6sb124iv.js","/_next/static/chunks/2vob1thes0a78.js","/_next/static/chunks/070ilbw8bqfoe.js","/_next/static/chunks/1zzcqu222tc5d.js","/_next/static/chunks/0ht3fekr3tf-z.js","/_next/static/chunks/0_yqis3s-gxoc.js","/_next/static/chunks/2ffvfblocomwp.js","/_next/static/chunks/1f3mew9ku8kde.js","/_next/static/chunks/3q081wnq66f2i.js","/_next/static/chunks/32u-c47s5yx71.js","/_next/static/chunks/1hcps0qaf18xc.js","/_next/static/chunks/20k4d9ryb03iy.js","/_next/static/chunks/0jg9bfioxtlzq.js","/_next/static/chunks/0fe_0v4c0g3v3.js","/_next/static/chunks/20zd9kw-zd1vs.js","/_next/static/chunks/1joxgiy7l3o39.js","/_next/static/chunks/3gvlksrieyg_r.js","/_next/static/chunks/0r85k-58wehjn.js","/_next/static/chunks/3858-78n42g4y.js","/_next/static/chunks/3iyyu34xcw3xb.js"],"ExpandableCode"] 39:T507c,

"use client";

import {
  FilePlus2,
  Folder,
  FolderPlus,
  House,
  Keyboard,
  Search,
  Settings2,
  UsersRound,
} from "lucide-react";
import { useState } from "react";
import {
  type MorphicCommandItem,
  MorphicCommandPalette,
  MorphicCommandPaletteContent,
  MorphicCommandPaletteTrigger,
} from "@/components/premium/command-palette";

const commands: MorphicCommandItem[] = [
  {
    id: "home",
    label: "Home",
    group: "Navigation",
    icon: House,
    keywords: ["dashboard", "overview"],
  },
  { id: "projects", label: "Projects", group: "Navigation", icon: Folder },
  {
    id: "team",
    label: "Team",
    group: "Navigation",
    icon: UsersRound,
    keywords: ["members", "people"],
  },
  {
    id: "settings",
    label: "Settings",
    group: "Navigation",
    icon: Settings2,
    keywords: ["preferences", "account"],
  },
  {
    id: "new-document",
    label: "New document",
    group: "Actions",
    icon: FilePlus2,
    keywords: ["create", "page", "write"],
  },
  {
    id: "new-project",
    label: "New project",
    group: "Actions",
    icon: FolderPlus,
    keywords: ["create", "folder"],
  },
  {
    id: "shortcuts",
    label: "Keyboard shortcuts",
    group: "Actions",
    icon: Keyboard,
    keywords: ["help", "keys"],
  },
];

export function MorphicCommandPalettePreview() {
  const [selected, setSelected] = useState("");

  return (
    <div className="flex min-h-80 w-full flex-col items-center justify-center gap-3 p-6">
      <MorphicCommandPalette
        items={commands}
        shortcut="j"
        onSelect={(item) => setSelected(item.label)}
      >
        <MorphicCommandPaletteTrigger className="h-9">
          <Search aria-hidden className="size-4 text-muted-foreground" />
          <span>Open command palette</span>
          <kbd className="ml-3 text-xs text-muted-foreground">⌘ / Ctrl J</kbd>
        </MorphicCommandPaletteTrigger>
        <MorphicCommandPaletteContent />
      </MorphicCommandPalette>
      <output className="min-h-4 text-xs text-muted-foreground">
        {selected ? `Selected: ${selected}` : ""}
      </output>
    </div>
  );
}

37:["$","$L38",null,{"children":["$","div",null,{"className":"relative px-0 py-4 text-[13px] leading-relaxed [&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:w-max [&_pre]:min-w-full [&_code]:font-mono [&_code]:text-[13px] [&_.shiki]:bg-transparent [&_.shiki]:text-[var(--shiki-light)] dark:[&_.shiki]:text-[var(--shiki-dark)] [&_.shiki_span]:text-[var(--shiki-light)] dark:[&_.shiki_span]:text-[var(--shiki-dark)] [&_.line]:px-5 [&_.highlighted]:border-blue-500 [&_.highlighted]:border-l-2 [&_.highlighted]:bg-(--color-fg)/[0.07] [&_.highlighted]:!pl-[18px] [&_.diff.add]:border-green-500 [&_.diff.add]:border-l-2 [&_.diff.add]:bg-green-500/10 [&_.diff.add]:!pl-[18px] [&_.diff.remove]:border-red-500 [&_.diff.remove]:border-l-2 [&_.diff.remove]:bg-red-500/10 [&_.diff.remove]:!pl-[18px] [&_.focused]:opacity-100 [&_pre:has(.focused)_.line:not(.focused)]:opacity-30 [&_pre:has(.focused)_.line:not(.focused)]:transition-opacity","dangerouslySetInnerHTML":{"__html":"$39"}}]}]

Command Palette

Morphic command palette

Install