Glass Panel
Surface en verre depoli pour habillage flottant au-dessus d'un canvas — panneaux d'ancrage, barres d'outils survolantes et surcouches transitoires — avec fond translucide et bordure douce. Installez Glass Panel depuis le registre VLLNT UI avec la CLI shadcn.
Surface en verre depoli pour habillage flottant au-dessus d'un canvas — panneaux d'ancrage, barres d'outils survolantes et surcouches transitoires — avec fond translucide et bordure douce. Fait partie de la famille utility dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Glass Panel a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/glass-panel.jsonSource
import { cn } from "../../lib/utils";
export type GlassPanelProps = React.ComponentPropsWithoutRef<"div">;
const GlassPanel = ({
children,
className,
ref,
...props
}: GlassPanelProps & { ref?: React.Ref<HTMLDivElement> }) => (
<div
className={cn(
"rounded-2xl border border-border/60 bg-background/70 shadow-[0_12px_40px_oklch(var(--foreground)/0.08)] backdrop-blur-xl",
className,
)}
ref={ref}
{...props}
>
{children}
</div>
);
GlassPanel.displayName = "GlassPanel";
export { GlassPanel };
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.