About
A spotlight-style command palette with keyboard navigation, search filtering, customizable positioning, and glassmorphism styling.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass Command Palette to your project and fits it to your theme.
Code
How Glass Command Palette is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import * as React from "react";
import {
GlassCommandPalette,
GlassCommandTrigger,
} from "@/components/ui/glass-command-palette";
export default function Demo() {
const [open, setOpen] = React.useState(false);
return (
<div className="flex min-h-[420px] w-full flex-col items-center justify-center gap-4 rounded-xl bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-900 p-8">
<GlassCommandTrigger onClick={() => setOpen(true)} />
<p className="text-sm text-white/40">
Or press{" "}
<kbd className="rounded bg-white/10 px-2 py-1 text-white/60">Cmd+K</kbd>
</p>
<GlassCommandPalette open={open} onOpenChange={setOpen} />
</div>
);
}
Dependencies
More by eindev
View all
Glass Map Widget
Glass Spotlight