Command Palette

Global kısayol destekli odaklanmış arama ve hızlı aksiyon paleti.

CommandPalette.tsx

İpucu: Sayfanın herhangi bir yerinde klavyenizden Cmd + K veya Ctrl + K tuşlarına basın.

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/command-palette.json

Kullanım Örneği

import { CommandPalette } from "@/components/ui/CommandPalette"

<CommandPalette
  open={isOpen}
  onOpenChange={setIsOpen}
  placeholder="Sayfa veya komut ara..."
  items={[
    { id: "1", label: "Yeni Proje", group: "Aksiyonlar", shortcut: ["⌘", "N"] },
    { id: "2", label: "Kullanıcı Ayarları", group: "Gezinme" },
  ]}
/>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
open	boolean	—	Kontrollü açık/kapalı durumu.
onOpenChange	(open: boolean) => void	—	Açık/kapalı durum değiştiğinde tetiklenir.
items	CommandItem[]	—	Listelenecek komut ve arama öğeleri (id, label, description, group, shortcut, onSelect).
placeholder	string	"Komut veya sayfa ara..."	Arama kutusu yer tutucu metni.
enableGlobalShortcut	boolean	true	Cmd+K / Ctrl+K global klavye kısayolunu dinler.
maxResults	number	20	Aramada listelenecek maksimum öğe sayısı.
showFooterHints	boolean	true	Klavye yönlendirme kısayollarını gösterir.
dialogLabel	string	"Komut paleti"	Dialog bölgesinin erişilebilir adı.
inputLabel	string	"Komut ara"	Combobox arama alanının etiketi.
clearLabel	string	"Aramayı temizle"	Temizleme düğmesinin etiketi.