The Orazaka ⌘K palette: jump to a studio, a chat, a setting — sections, registry icons and a footer of hints, on the platform's command dialog.

WebStableNavigation

Web — React, depuis @krizaka/orazaka-design-system. L'app mobile Orazaka prend les tokens du kit, pas ses composants. Stable : son API ne change qu’à une version majeure.

Pourquoi il existe au-dessus de Krizaka UI

CommandDialog from @krizaka/ui gives the combobox, the filtering, the focus trap and Escape. Orazaka adds what is its own: the ⌘K / Ctrl+K shortcut, entries grouped by section with the Orazaka icon registry, and the footer of keyboard hints its consoles share.

Repose surCommand Kbd Dialog

Quand l’utiliser

Once per app shell: the client app and the console, for power users who navigate by keyboard.
To reach an action that has no place in the navigation (new chat, switch theme).

Quand ne pas l’utiliser

As the only way to reach a page: everything stays reachable from the navigation.
For a search over content (documents, conversations) with results to read.À la place : Command

Installation

Installer

npm install @krizaka/orazaka-design-system && npm install -D tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/orazaka-design-system/theme.css";

The package ships its TypeScript sources: add it to transpilePackages (with @krizaka/orazaka-shared and @krizaka/ui).

Importer

import { CommandPalette } from "@krizaka/orazaka-design-system";

Exemples

Eric's workspace

Studios, chats and settings, opened with ⌘K or the button.

Press ⌘K (Ctrl+K) to open the palette.

Props

The Orazaka ⌘K palette: a product composite on CommandDialog from @krizaka/ui/command (cmdk + the platform's dialog: the combobox and listbox roles, the arrows, Enter, the filtering, the focus trap, Escape). It adds what is Orazaka's: the shortcut, the registry icons, the sections and the footer of hints. Words and entries arrive as props; the 1.x defaults (English, the 1.x routes) remain for the apps not yet migrated and go in 3.0.

Prop	Type	Défaut	Description
`commands`	`CommandPaletteItem[]`	[ { id: "dashboard", label: "Go to Dashboard", icon: "dashboard", href: "/", section: "Navigation" }, { id: "chat", label: "Open Chat", icon: "chat", href: "/chat", section: "Navigation" }, { id: "playground", label: "Open Playground", icon: "playground", href: "/playground", section: "Navigation" }, { id: "settings", label: "Settings", icon: "settings", href: "/settings", section: "Navigation" }, { id: "profile", label: "View Profile", icon: "profile", href: "/profile", section: "Navigation" }, { id: "jobs", label: "Jobs History", icon: "history", href: "/dashboard/jobs", section: "Navigation" }, { id: "admin", label: "Admin Panel", icon: "admin", href: "/dashboard/admin", section: "Navigation" }, { id: "new-chat", label: "Start New Chat", icon: "newChat", href: "/chat", section: "Actions" }, { id: "video-gen", label: "Generate Video", icon: "video", href: "/playground/video/generate", section: "Playground" }, { id: "video-analyze", label: "Analyze Video", icon: "vision", href: "/playground/video/analyze", section: "Playground" }, { id: "audio-analyze", label: "Analyze Audio", icon: "audio", href: "/playground/audio/analyze", section: "Playground" }, { id: "text-chat", label: "Text Chat", icon: "text", href: "/playground/text/chat", section: "Playground" }, { id: "image-gen", label: "Generate Image", icon: "image", href: "/playground/image/generate", section: "Playground" }, { id: "code-scaffold", label: "Feature to Code", icon: "code", href: "/playground/code/scaffold", section: "Playground" }, ]	The entries, grouped by `section` in their order. Without it: the 1.x English entries (deprecated).
`labels`	`CommandPaletteLabels`	`{ label: "Command palette", placeholder: "Type a command or search...", results: "Commands", empty: "No commands found", navigate: "Navigate", open: "Open", close: "Close", }`	The words, translated. Without it: the 1.x English words (deprecated).
`onNavigate`	`((href: string) => void)`	—	Where an entry's `href` goes. Default: the Next.js router (`router.push`).
`shortcut`	`string`	`k`	The letter that opens it with ⌘ / Ctrl. Default `k`.

Accessibilité

A dialog with a combobox and a listbox (cmdk on Radix): named by labels.label, results by labels.results.

Clavier

Touches	Action
`⌘ K / Ctrl K`	Opens and closes the palette.
`↑ ↓`	Moves through the results.
`Enter`	Runs the highlighted entry.
`Esc`	Closes it and returns the focus.

Bonnes pratiques

Pass commands and labels translated: the 1.x English defaults are deprecated and go in 3.0.
Give onNavigate outside Next.js (or in tests); inside, it uses the router.
Short labels, verbs for actions (New chat), nouns for places (Studios).

Généré depuis le code de @krizaka/orazaka-design-system 2.5.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Command palette