4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T118c,"use client"; import * as React from "react"; import { type FrostGlassVariant, type FrostGlassVariantProp, glassVariantStyles } from "@/lib/glass-variants"; import { cn } from "@/lib/utils"; import { Command, CommandDialog, CommandInput } from "../command"; import { LiquidGlass } from "./liquid-glass"; const GlassCommandVariantContext = React.createContext("liquid-refract"); type GlassCommandProps = React.ComponentProps & FrostGlassVariantProp; type GlassCommandDialogProps = React.ComponentProps & FrostGlassVariantProp; const commandSurfaceStyles = "border border-white/35 bg-white/75 text-foreground shadow-2xl ring-1 ring-white/25 dark:border-white/12 dark:bg-black/70 dark:ring-white/10"; const commandRefractSurfaceStyles = "border-white/40 bg-white/[0.34] shadow-[0_18px_50px_rgba(15,23,42,0.18),inset_0_1px_0_rgba(255,255,255,0.65),inset_0_-18px_28px_-20px_rgba(255,255,255,0.85)] dark:border-white/15 dark:bg-black/55 dark:shadow-[0_24px_60px_rgba(0,0,0,0.45),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-18px_28px_-20px_rgba(180,210,255,0.35)]"; const commandStateStyles = [ "[&_[data-slot=command-input-wrapper]_[data-slot=input-group]]:border-white/30", "[&_[data-slot=command-input-wrapper]_[data-slot=input-group]]:bg-white/50", "dark:[&_[data-slot=command-input-wrapper]_[data-slot=input-group]]:border-white/10", "dark:[&_[data-slot=command-input-wrapper]_[data-slot=input-group]]:bg-black/35", "[&_[data-slot=command-input]]:placeholder:text-help-foreground", "[&_[data-slot=command-item][data-selected=true]]:bg-white/70", "[&_[data-slot=command-item][data-selected=true]]:text-black", "dark:[&_[data-slot=command-item][data-selected=true]]:bg-white/12", "dark:[&_[data-slot=command-item][data-selected=true]]:text-white", "[&_[data-slot=command-separator]]:bg-white/25", "dark:[&_[data-slot=command-separator]]:bg-white/10", ].join(" "); function GlassCommand({ className, glassVariant = "liquid-refract", ...props }: GlassCommandProps) { if (glassVariant === "liquid-refract") { return ( ); } const command = ( ); return {command}; } function GlassCommandDialog({ className, children, glassVariant = "liquid-refract", ...props }: GlassCommandDialogProps) { if (glassVariant === "liquid-refract") { return (

{children}

); } const content =

{children}

; return ( {content} ); } function GlassCommandInput({ className, ...props }: React.ComponentProps) { const variant = React.useContext(GlassCommandVariantContext); return ( ); } export { GlassCommand, GlassCommandDialog, GlassCommandInput }; 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":["@glasscn/utils","@glasscn/command","@glasscn/glass-variants","@glasscn/liquid-glass"]}]]}],["$","$L4f",null,{"sourceUrl":"https://glasscn-components.vercel.app/r/glass-command.json","proxyUrl":"https://shadcnregistry.com/r/glasscn/glass-command","itemId":"@glasscn/glass-command"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"components/ui/glasscn/glass-command.tsx","content":"$51","type":"registry:component"}]}]]}],"$L52"]}]

Glass Command

Installation

Files

components

Styles