Configurador
Diseña tu paleta.
Ajusta primero lo esencial, abre los controles avanzados solo cuando hagan falta y mantén sincronizadas la vista previa y la exportación.
1. Básicos2. Tema3. Exportar
Ir al editor Mejor en escritorio
Este playground está optimizado para escritorio para editar y previsualizar con todos los controles.
Configurador
Configura la experiencia
Ve de lo esencial a la estructura sin tener todos los controles abiertos a la vez.
Modo de vista previa
Vista previa
01Básicos
Esenciales
Idioma, layout, título, texto de búsqueda, atajo y recientes.
Básicos
Esenciales
Idioma, layout, título, texto de búsqueda, atajo y recientes.
Idioma
02Tema
Apariencia
Colores, overlay, radio y sombra de la paleta.
Tema
Apariencia
Colores, overlay, radio y sombra de la paleta.
Tema a editar
Edita cada modo por separado. Los estados hover y activos se calculan automáticamente desde el color de acento.
Paleta modo oscuro
03Secciones
Arquitectura de información
Define secciones, comandos, flujos anidados y el orden por el que se mueve el usuario.
Secciones
Arquitectura de información
Define secciones, comandos, flujos anidados y el orden por el que se mueve el usuario.
Comandos2 Comandos
Cambiar temaAlternar entre modo claro y oscuro
Buscar en el espacio de trabajoBuscar en todo el espacio de trabajo
Código generado
React
Cambia de framework, copia el snippet y mantén la misma estructura de comandos.
import { CommandPalette } from "@cmd-kit/react"; const sections = [ { id: "commands", title: "Comandos", items: [ { id: "toggle-theme", title: "Cambiar tema", subtitle: "Alternar entre modo claro y oscuro", shortcut: "mod+t" }, { id: "search-workspace", title: "Buscar en el espacio de trabajo", subtitle: "Buscar en todo el espacio de trabajo", shortcut: "mod+p" } ] }];const theme = { dark: { accentColor: "#35d7ff", backgroundColor: "#0b1116", textColor: "#eff7fb", titleColor: "#eff7fb", descriptionColor: "#94a3b8", mutedColor: "rgba(172, 192, 207, 0.74)", sectionTitleColor: "rgba(172, 192, 207, 0.74)", itemTitleColor: "#eff7fb", itemSubtitleColor: "#94a3b8", shortcutColor: "#94a3b8", borderColor: "rgba(129, 155, 174, 0.16)", overlayColor: "rgba(6, 10, 14, 0.74)", radius: "22px", shadow: "0 24px 80px rgba(0, 0, 0, 0.42)" }, light: { accentColor: "#0fa6d8", backgroundColor: "#ffffff", textColor: "#0e1720", titleColor: "rgba(14, 23, 32, 0.78)", descriptionColor: "#5f7388", mutedColor: "rgba(49, 68, 84, 0.78)", sectionTitleColor: "rgba(49, 68, 84, 0.58)", itemTitleColor: "rgba(47, 84, 107, 0.86)", itemSubtitleColor: "#5f7388", shortcutColor: "#5f7388", borderColor: "rgba(83, 112, 136, 0.16)", overlayColor: "rgba(232, 241, 248, 0.7)", radius: "22px", shadow: "0 20px 44px rgba(40, 64, 81, 0.14)" }}; export function Demo() { return ( <CommandPalette recents={false} sections={sections} shortcut="mod+k" title="Menú de comandos" messages={{ searchPlaceholder: "Buscar comandos...", noResults: "No se han encontrado resultados.", closeLabel: "Cerrar menú de comandos" }} theme={theme} /> );}