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, from @krizaka/orazaka-design-system. The Orazaka mobile app takes the kit's tokens, not its components. Stable: its API only changes in a major version.

Why it exists above 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.

Built onCommand Kbd Dialog

When to use

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).

When not to use

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.Use instead: Command

Installation

Install

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).

Import

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

Examples

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	Default	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`.

Accessibility

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

Keyboard

Keys	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.

Best practices

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).

Generated from the code of @krizaka/orazaka-design-system 2.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Command palette