SurfacesNew
Glass Kbd
A keycap with a lit top edge, for shortcuts in menus, hints and docs.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-kbdPreview
Demos ready. Update 0.
Installation
First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:
pnpm dlx shadcn@4.14.1 add @glassyui/glass-kbdWhat this installs5 files, 1 package
Direct registry declarations
These values belong to @glassyui/glass-kbd itself in registry.json.
Package dependencies
clsx
Registry dependencies
@glassyui/glass-provider
File targets
components/glassyui/glass-kbd.tsx
Complete installed closure
This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.
Package dependencies
clsx
Installed files
components/glassyui/glass-kbd.tsxcomponents/glassyui/glass-provider.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.css
Usage
import { GlassKbd, GlassKbdGroup } from "@/components/glassyui/glass-kbd";
export function SearchHint() {
return (
<GlassKbdGroup>
<GlassKbd>⌘</GlassKbd>
<GlassKbd>K</GlassKbd>
</GlassKbdGroup>
);
}Examples
<GlassKbd>esc</GlassKbd>API
GlassKbdA kbd element styled as a keycap. One key or symbol in each.
GlassKbdGroupSets a shortcut’s keys side by side.
Notes
Rendering
Plain elements with no client JavaScript, so they work in server components.
Accessibility
Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.
Performance
Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.