components/beautiful-ui/glass-command.tsx

The source ships with Pro.

The preview above is the real component. Its source installs into your repo with one command once you own it.

78 more Pro pieces in Lumen HaloEvery story chart, block and screen in the same language. Previews are live for everyone; the code comes with Pro.See the plans

Command PaletteProv1.2.0

A liquid-glass command palette in dark and light: jump anywhere, run actions, read metrics in place with a cell trend, drill into nested pages and ask Lumen, with the family's gliding lens and a phone sheet.

Sound by @web-kits/audio

.md

Add to your project

pnpm dlx shadcn@latest add @beautiful-ui-pro/glass-command

Needs your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.

Customize

Try Lumen in your brand. The preview follows on every page; copy the CSS when it's right.

Accent

Corners

Font

/* Lumen as drawn: nothing to change. */

Props

groupsthe Lumen workspace
GlassCommandGroup[]
Groups in display order ({ id; label; items }). Items: id, title, subtitle?, icon?, keywords?, shortcut?, type?, metric? ({ value; delta?; tone?: "good" | "bad" | "flat"; trend?: number[] }), children? (a nested page), pageTitle?, pagePlaceholder?, checked?, disabled?, href?, onSelect?.
recent["meridian", "active-teams", "roadmap"]
string[]
Item ids listed under Recent while the query is empty. Pass [] to hide the group.
onSelect–
(item, ctx) => void
Called for every selected item. ctx.newTab is true for ⌘/Ctrl+Enter; ctx.close() closes; ctx.setTheme() retints the palette and calls onThemeChange. An item's own onSelect runs first; return false from either to keep the palette open.
onNavigate–
(href: string, ctx: { newTab; item }) => void
Navigation for items with href and no onSelect. Default: window.location.assign (window.open for a new tab). Pass your router here for client-side navigation.
onAsk–
(query: string) => void
Called by the Ask row (shown from 3 characters; first when the query reads as a question). Return false to keep the palette open.
asktrue
boolean
false hides the Ask row.
brand{ name: "Lumen", mark: <EclipseMark /> }
{ name: ReactNode; mark?: ReactNode } | null
The footer brand. A string name is also woven into the default placeholder ("Search Kitelabs, run a command, or ask…"), trigger and Ask row. null hides the footer brand and drops the name from those strings. A custom brand's Ask row uses a sparkle icon.
labelsdefaultGlassCommandLabels
Partial<GlassCommandLabels>
Every visible and announced string: placeholder, trigger, triggerAria(shortcut), ask, asked(query, brand), opened(title), dialog, input, inputPage(page), results, recent, pageFilter, current, empty, noResults(query), close, cancel, back, navigate, open, enter, askHint, resultCount(n), pageCount(page, n). placeholder / trigger / ask take a string or (brand) => string.

Show all 33 props

inlinefalse
boolean
Renders the panel in place, always open, with no scrim or hotkey. The keyboard hints hide when the panel is narrower than 440px.
open / defaultOpen / onOpenChange–
boolean / boolean / (open) => void
Controlled or uncontrolled open state (overlay mode).
query / defaultQuery / onQueryChange–
string / string / (q) => void
Controlled or uncontrolled query.
page / defaultPage / onPageChange–
string[] / string[] / (page: string[]) => void
The nested page as the path of entered item ids (e.g. ["theme"]; [] is the root). Uncontrolled pages reset to defaultPage on open; a controlled page is left to you, so you can open straight into one.
onActiveChange–
(item | null, { ask }) => void
The row under the lens changed (arrow keys, pointer or new results): use it for a preview pane. item is null for the Ask row (ask: true) or when nothing is active or the palette closes.
onThemeChange–
(theme: "system" | "dark" | "light") => void
Called when a theme option is picked (the default Change theme… page). Wire it to your site theme; the palette itself only retints when theme is uncontrolled.
filtermatchCommand
(query, item) => { score; idx } | null
Swap the matcher (also called with an empty query: return a match to show the item). Higher scores rank first within a group; idx lists title characters to highlight.
triggertrue
boolean | ReactNode | ({ open, setOpen, toggle }) => ReactNode
Overlay mode: the Search Lumen… ⌘K well that opens it. false hides it (open it from your own button, a sidebar or the hotkey); a node replaces it (wire its onClick yourself); a function receives { open, setOpen, toggle }.
hotkeytrue
boolean
Overlay mode: ⌘K / Ctrl+K toggles the palette (document keydown). Ignores events another handler already preventDefault-ed. Pass false when something else owns ⌘K.
width640
number | string
Panel width. Overlay: min(width, 100vw − 32px). Inline: the max width (the panel fills its container up to it).
height392
number | string
Max height of the results list before it scrolls; the list still animates to fit shorter results.
breakpoint720
number
Viewport width (px) below which layout="auto" turns the overlay into the phone bottom sheet.
layout"auto"
"auto" | "desktop" | "mobile"
auto uses the phone bottom sheet (drag to dismiss) below breakpoint.
portaltrue
boolean
Overlay mode: render into a portal so no parent clips it.
portalContainerdocument.body
HTMLElement | null
Overlay mode: the portal target, e.g. your modal root or a shadow-root host.
zIndex60
number
Overlay mode: z-index of the fixed layer (scrim and panel).
autoFocustrue
boolean
Overlay mode: focus the input when the palette opens.
modalautoFocus
boolean
Overlay mode: aria-modal and focus kept inside the panel. Follows autoFocus unless set, so autoFocus={false} alone gives a non-modal panel.
motion"full"
"full" | "subtle" | "off"
full: the designed motion. subtle: calm curve, shorter, no staggers. off: instant. prefers-reduced-motion is always respected.
soundtrue
boolean | "subtle"
true plays Lumen cues when a GlassSoundProvider enables sound; false silences this instance; "subtle" plays at 55%. Without a provider nothing plays and the audio engine never loads.
theme"system"
"system" | "dark" | "light"
system follows a .dark / .light class or data-theme on an ancestor, else the OS.
className / style / ref–
string / CSSProperties / Ref<HTMLDivElement>
The component root: the wrapper in inline mode, the dialog panel in overlay mode. Other HTML attributes (id, data-*, aria-*, on* handlers) land there too; aria-label names the dialog (default labels.dialog).
triggerClassName / contentClassName–
string / string
Class names for the default trigger well, and for the glass panel in both modes.
placeholder / askLabel–
string / string
Deprecated aliases for labels.placeholder and labels.ask; still work.
CSS variables–
CSS
Set on the root or any ancestor: --glass-good, --glass-good-text, --glass-bad (metric tones and the check; -dark / -light suffixes per theme), --glass-accent, --glass-command-top (overlay panel top, default 14vh), --glass-safe-bottom (phone sheet safe area). The glass surface uses the family --lg-* tokens.

Anatomy

Takes a fixed set of props rather than arranging parts.
Plays Lumen sound cues as you move, open and run.
Passes anything it doesn't read straight through.
Dark and light, designed separately.

GlassCommanddata-slot="command"
The command palette: search, grouped results with cell trends, nested pages and ask mode.

Part of

Command Palette is part of

Get it with any of these. Pro pieces are not sold one at a time.

Lumen HaloSystem · 121 piecesIncluded in All-Access
All-Access LifetimeEvery system and pack, up to 10 developers$79 launch price

Compare options

Changelog

v1.2.0 · 2026-09-28All 3 entries

v1.2.0 · 2026-09-28
Built-in sound: open and close, quiet ticks on arrow moves, command when a result runs, chirp on entering a page, blocked on disabled results. Silent without a GlassSoundProvider; sound={false} or "subtle" per instance
v1.1.0 · 2026-09-27
Developer-friendly API: brand (or null), labels + defaultGlassCommandLabels, onNavigate for client routers, onThemeChange, page/defaultPage/onPageChange, onActiveChange, filter, trigger render function, modal, onSelect/onAsk may return false to stay open, width, height, breakpoint, zIndex, portalContainer, triggerClassName/contentClassName, className/style/ref/HTML attributes on the root (overlay: the panel), family colour variables (--glass-good/-bad/-accent), --glass-command-top, and ⌘K ignores events another handler already took. Fixes: phone drag-to-dismiss after the gesture engages, the closing panel is inert, reference-counted scroll lock only for the sheet, long breadcrumbs truncate, middle click opens links in a new tab. placeholder and askLabel are deprecated aliases
v1.0.0 · 2026-09-27
First release, dark and light, designed in house for Lumen Halo

Keyboard

⌘K / Ctrl+K: Open or close the palette (overlay mode; hotkey={false} disables it)
↑ / ↓: Move the lens (wraps); Home / End jump to the ends, PageUp / PageDown move 5
Enter: Open the active row; enters a nested page for items with ›
⌘/Ctrl + Enter: Open in a new tab (ctx.newTab)
Tab: Enter the active item's page, or jump to Ask Lumen
Backspace (empty input): Back one page
Esc: Back one page, clear the query, then close

More in Navigation

Nav

App Sidebar

Footer