website-glass
Components

Glass Command

A ⌘K command palette — a portaled glass dialog with a filter input, grouped commands, and full keyboard navigation.

or press ⌘K

Install

npx shadcn@latest add https://websiteglass.com/r/glass-command.json

Usage

import {
  GlassCommand,
  GlassCommandGroup,
  GlassCommandItem,
} from '@/components/ui/glass-command';

<GlassCommand open={open} onOpenChange={setOpen}>
  <GlassCommandGroup heading="Navigation">
    <GlassCommandItem onSelect={goHome}>Home</GlassCommandItem>
    <GlassCommandItem keywords="files" onSelect={openDocs}>Documents</GlassCommandItem>
  </GlassCommandGroup>
</GlassCommand>

Props

Prop / partDescription
GlassCommandControlled via open / onOpenChange. shortcut (default true) binds ⌘K / Ctrl-K to toggle.
GlassCommandGroupOptional heading.
GlassCommandItemonSelect callback; keywords adds searchable text beyond the label.

The input filters items live; / move the highlight, Enter runs the active item, Escape and scrim-click close. Body scroll is locked while open.

On this page