2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T1d17,"use client"; import { Command as CommandPrimitive } from "cmdk"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { LoaderCircle, Search } from "lucide-react"; import { Dialog as DialogPrimitive } from "radix-ui"; import { useEffect, type ComponentProps, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export function Command({ className, ...props }: ComponentProps) { return ( ); } export interface CommandInputProps extends ComponentProps { /** Content on the right of the input, such as an Esc key hint or a page chip. */ trailing?: ReactNode; /** Content before the input text, such as the current page in nested menus. */ leading?: ReactNode; } export function CommandInput({ className, leading, trailing, ...props }: CommandInputProps) { return (

{leading} {trailing}

); } export function CommandList({ className, ...props }: ComponentProps) { return ( ); } export function CommandEmpty({ className, ...props }: ComponentProps) { return ; } export function CommandLoading({ className, children = "Searching…", ...props }: ComponentProps) { return ( {children} ); } export function CommandGroup({ className, ...props }: ComponentProps) { return ( ); } export function CommandItem({ className, ...props }: ComponentProps) { return ( ); } export function CommandSeparator({ className, ...props }: ComponentProps) { return ; } export function CommandShortcut({ className, ...props }: ComponentProps<"span">) { return ; } /** Toggle a command menu with ⌘K / Ctrl+K (or another key). */ export function useCommandHotkey(onToggle: () => void, key = "k") { useEffect(() => { const down = (e: KeyboardEvent) => { if (e.key.toLowerCase() === key && (e.metaKey || e.ctrlKey)) { e.preventDefault(); onToggle(); } }; document.addEventListener("keydown", down); return () => document.removeEventListener("keydown", down); }, [onToggle, key]); } export interface CommandDialogProps extends ComponentProps { open: boolean; onOpenChange: (open: boolean) => void; /** Read by screen readers when the dialog opens. */ title?: string; } export function CommandDialog({ open, onOpenChange, title = "Command menu", className, children, ...props }: CommandDialogProps) { return ( {open && (

{title} {children}

)} ); } export default Command; 2e:Te63c,

"use client";

import { Command as CommandPrimitive } from "cmdk";
import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { LoaderCircle, Search } from "lucide-react";
import { Dialog as DialogPrimitive } from "radix-ui";
import { useEffect, type ComponentProps, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export function Command({ className, ...props }: ComponentProps<typeof CommandPrimitive>) {
  return (
    <CommandPrimitive
      className={cn(
        "flex w-full flex-col overflow-hidden rounded-[22px] bg-white text-neutral-950 shadow-[0_1px_2px_rgb(0_0_0/0.04),0_12px_32px_-12px_rgb(0_0_0/0.12)] ring-1 ring-black/[0.06]",
        "dark:bg-neutral-900 dark:text-white dark:shadow-none dark:ring-white/[0.08]",
        className,
      )}
      {...props}
    />
  );
}

export interface CommandInputProps extends ComponentProps<typeof CommandPrimitive.Input> {
  /** Content on the right of the input, such as an Esc key hint or a page chip. */
  trailing?: ReactNode;
  /** Content before the input text, such as the current page in nested menus. */
  leading?: ReactNode;
}

export function CommandInput({ className, leading, trailing, ...props }: CommandInputProps) {
  return (
    <div className="flex items-center gap-2.5 border-b border-black/[0.06] px-4 dark:border-white/[0.08]">
      <Search className="size-4 shrink-0 text-neutral-400" />
      {leading}
      <CommandPrimitive.Input
        className={cn("h-12 w-full min-w-0 bg-transparent text-[14px] text-neutral-950 outline-none placeholder:text-neutral-400 dark:text-white dark:placeholder:text-neutral-500", className)}
        {...props}
      />
      {trailing}
    </div>
  );
}

export function CommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>) {
  return (
    <CommandPrimitive.List
      className={cn(
        "h-[min(332px,calc(var(--cmdk-list-height)+0.75rem))] max-h-[332px] scroll-py-1.5 overflow-y-auto overscroll-contain p-1.5 transition-[height] duration-150 ease-out",
        className,
      )}
      {...props}
    />
  );
}

export function CommandEmpty({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>) {
  return <CommandPrimitive.Empty className={cn("py-10 text-center text-[13.5px] text-neutral-500 dark:text-neutral-400", className)} {...props} />;
}

export function CommandLoading({ className, children = "Searching…", ...props }: ComponentProps<typeof CommandPrimitive.Loading>) {
  return (
    <CommandPrimitive.Loading className={cn("py-6", className)} {...props}>
      <span className="flex items-center justify-center gap-2 text-[13.5px] text-neutral-500 dark:text-neutral-400">
        <LoaderCircle className="size-4 animate-spin" />
        {children}
      </span>
    </CommandPrimitive.Loading>
  );
}

export function CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>) {
  return (
    <CommandPrimitive.Group
      className={cn(
        "[&_[cmdk-group-heading]]:select-none [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:text-[11.5px] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[0.06em] [&_[cmdk-group-heading]]:text-neutral-400",
        className,
      )}
      {...props}
    />
  );
}

export function CommandItem({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>) {
  return (
    <CommandPrimitive.Item
      className={cn(
        "relative flex h-10 cursor-default select-none items-center gap-3 rounded-xl px-2.5 text-[13.5px] text-neutral-700 outline-none transition-colors duration-75",
        "data-[selected=true]:bg-neutral-950/[0.05] data-[selected=true]:text-neutral-950 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-40",
        "dark:text-neutral-300 dark:data-[selected=true]:bg-white/[0.08] dark:data-[selected=true]:text-white",
        "[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-neutral-400 data-[selected=true]:[&_svg]:text-neutral-700 dark:data-[selected=true]:[&_svg]:text-neutral-200",
        className,
      )}
      {...props}
    />
  );
}

export function CommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>) {
  return <CommandPrimitive.Separator className={cn("-mx-1.5 my-1.5 h-px bg-black/[0.06] dark:bg-white/[0.08]", className)} {...props} />;
}

export function CommandShortcut({ className, ...props }: ComponentProps<"span">) {
  return <span className={cn("ml-auto text-[12px] tracking-[0.08em] text-neutral-400", className)} {...props} />;
}

/** Toggle a command menu with ⌘K / Ctrl+K (or another key). */
export function useCommandHotkey(onToggle: () => void, key = "k") {
  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key.toLowerCase() === key && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        onToggle();
      }
    };
    document.addEventListener("keydown", down);
    return () => document.removeEventListener("keydown", down);
  }, [onToggle, key]);
}

export interface CommandDialogProps extends ComponentProps<typeof CommandPrimitive> {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** Read by screen readers when the dialog opens. */
  title?: string;
}

export function CommandDialog({ open, onOpenChange, title = "Command menu", className, children, ...props }: CommandDialogProps) {
  return (
    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
      <AnimatePresence>
        {open && (
          <DialogPrimitive.Portal forceMount>
            <MotionConfig reducedMotion="user">
              <DialogPrimitive.Overlay forceMount asChild>
                <motion.div
                  className="fixed inset-0 z-50 bg-neutral-950/30 backdrop-blur-[2px] dark:bg-black/60"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.18 }}
                />
              </DialogPrimitive.Overlay>
              <div className="pointer-events-none fixed inset-0 z-50 flex justify-center px-4 pt-[14vh]">
                <DialogPrimitive.Content forceMount asChild aria-describedby={undefined}>
                  <motion.div
                    className="pointer-events-auto h-fit w-full max-w-[560px] outline-none"
                    initial={{ opacity: 0, scale: 0.97, y: -8 }}
                    animate={{ opacity: 1, scale: 1, y: 0 }}
                    exit={{ opacity: 0, scale: 0.98, transition: { duration: 0.12 } }}
                    transition={{ type: "spring", bounce: 0.14, duration: 0.32 }}
                  >
                    <DialogPrimitive.Title className="sr-only">{title}</DialogPrimitive.Title>
                    <Command
                      className={cn("shadow-[0_24px_64px_-16px_rgb(0_0_0/0.3),0_2px_6px_rgb(0_0_0/0.06)] dark:shadow-[0_24px_64px_-12px_rgb(0_0_0/0.7)] dark:ring-white/[0.1]", className)}
                      {...props}
                    >
                      {children}
                    </Command>
                  </motion.div>
                </DialogPrimitive.Content>
              </div>
            </MotionConfig>
          </DialogPrimitive.Portal>
        )}
      </AnimatePresence>
    </DialogPrimitive.Root>
  );
}

export default Command;

2f:T6a0,import { Calculator, Calendar, CreditCard, FileText, Plus, Settings, Smile, User } from "lucide-react"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "@/components/scalar-ui/command"; export default function Demo() { return ( No results found. New project ⌘N Calendar Search emoji Calculator Profile ⌘P Billing ⌘B Settings ⌘, Documentation ); } 30:T3afe,

import { Calculator, Calendar, CreditCard, FileText, Plus, Settings, Smile, User } from "lucide-react";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/scalar-ui/command";

export default function Demo() {
  return (
    <Command className="max-w-[420px]">
      <CommandInput placeholder="Type a command or search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <Plus />
            New project
            <CommandShortcut>⌘N</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Calendar />
            Calendar
          </CommandItem>
          <CommandItem>
            <Smile />
            Search emoji
          </CommandItem>
          <CommandItem disabled>
            <Calculator />
            Calculator
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <User />
            Profile
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <CreditCard />
            Billing
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Settings />
            Settings
            <CommandShortcut>⌘,</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <FileText />
            Documentation
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

31:Ta4a,"use client"; import { FileText, LayoutDashboard, Moon, Plus, Search, Settings, Users } from "lucide-react"; import { useCallback, useState } from "react"; import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut, useCommandHotkey, } from "@/components/scalar-ui/command"; export default function Example() { const [open, setOpen] = useState(false); useCommandHotkey(useCallback(() => setOpen((o) => !o), [])); return ( <> Esc} /> No results found. setOpen(false)}> Dashboard setOpen(false)}> Members setOpen(false)}> Documentation setOpen(false)}> New project ⌘N setOpen(false)}> Toggle dark mode ⌘D setOpen(false)}> Settings ⌘, ); } 32:T5d04,

"use client";

import { FileText, LayoutDashboard, Moon, Plus, Search, Settings, Users } from "lucide-react";
import { useCallback, useState } from "react";
import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
  useCommandHotkey,
} from "@/components/scalar-ui/command";

export default function Example() {
  const [open, setOpen] = useState(false);
  useCommandHotkey(useCallback(() => setOpen((o) => !o), []));
  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="flex h-10 w-64 items-center gap-2.5 rounded-[14px] bg-white px-3 text-[13.5px] text-neutral-400 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-inset ring-black/[0.1] transition-colors hover:bg-neutral-50 dark:bg-white/[0.04] dark:ring-white/[0.12] dark:hover:bg-white/[0.06]"
      >
        <Search className="size-4" />
        Search…
        <kbd className="ml-auto rounded-md bg-neutral-100 px-1.5 py-0.5 font-sans text-[11.5px] text-neutral-500 dark:bg-white/[0.08] dark:text-neutral-400">⌘K</kbd>
      </button>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <CommandInput placeholder="Search or jump to…" trailing={<kbd className="rounded-md bg-neutral-100 px-1.5 py-0.5 font-sans text-[11px] text-neutral-500 dark:bg-white/[0.08]">Esc</kbd>} />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Go to">
            <CommandItem onSelect={() => setOpen(false)}>
              <LayoutDashboard />
              Dashboard
            </CommandItem>
            <CommandItem onSelect={() => setOpen(false)}>
              <Users />
              Members
            </CommandItem>
            <CommandItem onSelect={() => setOpen(false)}>
              <FileText />
              Documentation
            </CommandItem>
          </CommandGroup>
          <CommandGroup heading="Actions">
            <CommandItem onSelect={() => setOpen(false)}>
              <Plus />
              New project
              <CommandShortcut>⌘N</CommandShortcut>
            </CommandItem>
            <CommandItem onSelect={() => setOpen(false)}>
              <Moon />
              Toggle dark mode
              <CommandShortcut>⌘D</CommandShortcut>
            </CommandItem>
            <CommandItem onSelect={() => setOpen(false)}>
              <Settings />
              Settings
              <CommandShortcut>⌘,</CommandShortcut>
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </CommandDialog>
    </>
  );
}

33:Tb01,"use client"; import { ChevronRight, Monitor, Moon, Palette, Sun, Type } from "lucide-react"; import { useState } from "react"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/scalar-ui/command"; type Page = "theme" | "font"; export default function Example() { const [pages, setPages] = useState([]); const [search, setSearch] = useState(""); const page = pages[pages.length - 1]; const go = (p: Page) => { setPages((s) => [...s, p]); setSearch(""); }; return ( { if ((e.key === "Escape" || (e.key === "Backspace" && !search)) && pages.length) { e.preventDefault(); setPages((s) => s.slice(0, -1)); } }} > {page} ) } /> No results found. {!page && ( go("theme")}> Change theme… go("font")}> Change font size… )} {page === "theme" && ( setPages([])}> Light setPages([])}> Dark setPages([])}> System )} {page === "font" && ( {["Small", "Default", "Large"].map((s) => ( setPages([])}> {s} ))} )}

{page ? "Backspace to go back" : "Pick an option with ↵"}

); } 34:T7a79,

"use client";

import { ChevronRight, Monitor, Moon, Palette, Sun, Type } from "lucide-react";
import { useState } from "react";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/scalar-ui/command";

type Page = "theme" | "font";

export default function Example() {
  const [pages, setPages] = useState<Page[]>([]);
  const [search, setSearch] = useState("");
  const page = pages[pages.length - 1];
  const go = (p: Page) => {
    setPages((s) => [...s, p]);
    setSearch("");
  };
  return (
    <Command
      className="max-w-[400px]"
      onKeyDown={(e) => {
        if ((e.key === "Escape" || (e.key === "Backspace" && !search)) && pages.length) {
          e.preventDefault();
          setPages((s) => s.slice(0, -1));
        }
      }}
    >
      <CommandInput
        value={search}
        onValueChange={setSearch}
        placeholder={page ? "Search…" : "What do you need?"}
        leading={
          page && (
            <span className="shrink-0 rounded-md bg-neutral-100 px-1.5 py-0.5 text-[12px] font-medium capitalize text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300">{page}</span>
          )
        }
      />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        {!page && (
          <CommandGroup heading="Preferences">
            <CommandItem onSelect={() => go("theme")}>
              <Palette />
              Change theme…
              <ChevronRight className="ml-auto" />
            </CommandItem>
            <CommandItem onSelect={() => go("font")}>
              <Type />
              Change font size…
              <ChevronRight className="ml-auto" />
            </CommandItem>
          </CommandGroup>
        )}
        {page === "theme" && (
          <CommandGroup heading="Theme">
            <CommandItem onSelect={() => setPages([])}>
              <Sun />
              Light
            </CommandItem>
            <CommandItem onSelect={() => setPages([])}>
              <Moon />
              Dark
            </CommandItem>
            <CommandItem onSelect={() => setPages([])}>
              <Monitor />
              System
            </CommandItem>
          </CommandGroup>
        )}
        {page === "font" && (
          <CommandGroup heading="Font size">
            {["Small", "Default", "Large"].map((s) => (
              <CommandItem key={s} onSelect={() => setPages([])}>
                <Type />
                {s}
              </CommandItem>
            ))}
          </CommandGroup>
        )}
      </CommandList>
      <p className="border-t border-black/[0.06] px-4 py-2.5 text-[12px] text-neutral-400 dark:border-white/[0.08]">
        {page ? "Backspace to go back" : "Pick an option with ↵"}
      </p>
    </Command>
  );
}

35:T5d9,"use client"; import { FolderGit2 } from "lucide-react"; import { useEffect, useState } from "react"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading } from "@/components/scalar-ui/command"; const repos = ["aurora-web", "aurora-api", "aurora-docs", "design-system", "marketing-site", "cli", "infra", "mobile-app"]; export default function Example() { const [search, setSearch] = useState(""); const [results, setResults] = useState(repos.slice(0, 4)); const [loading, setLoading] = useState(false); useEffect(() => { setLoading(true); const t = setTimeout(() => { setResults(repos.filter((r) => r.includes(search.toLowerCase())).slice(0, 5)); setLoading(false); }, 450); return () => clearTimeout(t); }, [search]); return ( {loading && } {!loading && No repositories match “{search}”.} {!loading && results.length > 0 && ( {results.map((r) => ( aurora/{r} ))} )} ); } 36:T47f3,

"use client";

import { FolderGit2 } from "lucide-react";
import { useEffect, useState } from "react";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading } from "@/components/scalar-ui/command";

const repos = ["aurora-web", "aurora-api", "aurora-docs", "design-system", "marketing-site", "cli", "infra", "mobile-app"];

export default function Example() {
  const [search, setSearch] = useState("");
  const [results, setResults] = useState<string[]>(repos.slice(0, 4));
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    setLoading(true);
    const t = setTimeout(() => {
      setResults(repos.filter((r) => r.includes(search.toLowerCase())).slice(0, 5));
      setLoading(false);
    }, 450);
    return () => clearTimeout(t);
  }, [search]);
  return (
    <Command shouldFilter={false} className="max-w-[400px]">
      <CommandInput value={search} onValueChange={setSearch} placeholder="Search repositories…" />
      <CommandList>
        {loading && <CommandLoading />}
        {!loading && <CommandEmpty>No repositories match “{search}”.</CommandEmpty>}
        {!loading && results.length > 0 && (
          <CommandGroup heading="Repositories">
            {results.map((r) => (
              <CommandItem key={r} value={r}>
                <FolderGit2 />
                aurora/{r}
              </CommandItem>
            ))}
          </CommandGroup>
        )}
      </CommandList>
    </Command>
  );
}

37:T596,"use client"; import { Check } from "lucide-react"; import { useState } from "react"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/scalar-ui/command"; const labels = [ { name: "Bug", color: "bg-red-500" }, { name: "Feature", color: "bg-violet-500" }, { name: "Design", color: "bg-pink-500" }, { name: "Docs", color: "bg-sky-500" }, { name: "Performance", color: "bg-amber-400" }, { name: "Good first issue", color: "bg-emerald-500" }, ]; export default function Example() { const [picked, setPicked] = useState(["Feature", "Design"]); const toggle = (name: string) => setPicked((p) => (p.includes(name) ? p.filter((x) => x !== name) : [...p, name])); return ( No labels found. {labels.map((l) => ( toggle(l.name)} className="h-9"> {l.name} ))} ); } 38:T3ee0,

"use client";

import { Check } from "lucide-react";
import { useState } from "react";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/scalar-ui/command";

const labels = [
  { name: "Bug", color: "bg-red-500" },
  { name: "Feature", color: "bg-violet-500" },
  { name: "Design", color: "bg-pink-500" },
  { name: "Docs", color: "bg-sky-500" },
  { name: "Performance", color: "bg-amber-400" },
  { name: "Good first issue", color: "bg-emerald-500" },
];

export default function Example() {
  const [picked, setPicked] = useState<string[]>(["Feature", "Design"]);
  const toggle = (name: string) => setPicked((p) => (p.includes(name) ? p.filter((x) => x !== name) : [...p, name]));
  return (
    <Command className="max-w-[280px] rounded-2xl">
      <CommandInput placeholder="Apply labels…" className="h-11 text-[13.5px]" />
      <CommandList>
        <CommandEmpty>No labels found.</CommandEmpty>
        <CommandGroup>
          {labels.map((l) => (
            <CommandItem key={l.name} onSelect={() => toggle(l.name)} className="h-9">
              <span className={`size-2.5 rounded-full ${l.color}`} />
              {l.name}
              <Check className={`ml-auto ${picked.includes(l.name) ? "text-neutral-950! dark:text-white!" : "invisible"}`} />
            </CommandItem>
          ))}
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

29:["$","section","command",{"id":"command","aria-labelledby":"command-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"command-title","className":"sr-only","children":"Command"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"cmdk · radix-ui · motion · lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"command","gated":{"unlocked":true,"files":[{"name":"command.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"dialog":{"name":"dialog.tsx","code":"$31","html":"$32"},"nested-pages":{"name":"nested-pages.tsx","code":"$33","html":"$34"},"async":{"name":"async.tsx","code":"$35","html":"$36"},"label-picker":{"name":"label-picker.tsx","code":"$37","html":"$38"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add command","shadcn":"npx shadcn@latest add https://scalarui.com/r/command.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install cmdk radix-ui motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L39","toolbar":"$L3a"}]}],["$L3b","$L3c","$L3d","$L3e"]]}]

Command Menus

Command Menus

Dialog

Nested Pages

Async Results

Label Picker