Glow Command

A command menu with a dithered light on the active row.

glow-command-demo.tsx

import { GlowCommand } from "@/components/glow-command";

export function CommandMenu({ onOpen }: { onOpen: (value: string) => void }) {
  return (
    <GlowCommand
      items={[
        {
          group: "Suggestions",
          label: "New gradient",
          shortcut: "N",
          value: "new",
        },
        {
          group: "Navigation",
          keywords: ["help"],
          label: "Docs",
          value: "docs",
        },
      ]}
      onSelect={onOpen}
    />
  );
}

Installation

pnpm dlx shadcn@latest add @gradients-pro/glow-command

Needs a Pro account and the Pro registry setup.

Usage

import { GlowCommand } from "@/components/glow-command";

<GlowCommand items={items} onSelect={(value) => open(value)} />;

Props

Prop	Type	Default	Description
`items`	`GlowCommandItem[]`	required	The commands: `value`, `label`, and optional `group`, `shortcut`, `icon` and `keywords`. Items keep their order within a group.
`onSelect`	`(value: string) => void`	none	Called on Enter or click.
`label`	`string`	`"Search commands"`	Accessible name for the search field and list.
`placeholder`	`string`	`"Type a command or search…"`	Placeholder for the search field.
`empty`	`ReactNode`	`"No results"`	Shown when nothing matches.
`palette`	`"ultramarine" \| "ember" \| "mono" \| string[]`	`"ultramarine"`	A curated ramp, or your own 2 to 6 CSS colours from faint to hot (`var(--x)` included). Curated ramps switch between a light and a dark version with your theme.
`cell`	`number`	`2`	Size of one dither cell in CSS pixels.
`scheme`	`"light" \| "dark"`	follows the page	Forces a colour scheme. By default it reads a `dark` or `light` class (or `data-theme`) on `<html>`, then the system setting.
`className`, other `div` props			Passed to the outer box.