Glass Card
Surface de carte en verre depoli avec flou d'arriere-plan et fond translucide. Installez Glass Card depuis le registre VLLNT UI avec la CLI shadcn.
Surface de carte en verre depoli avec flou d'arriere-plan et fond translucide. 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 Card 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-card.jsonSource
import * as React from "react";
import { cn } from "../../lib/utils";
/** Props for {@link GlassCard}. */
export type GlassCardProps = React.ComponentPropsWithoutRef<"div">;
/**
* Frosted-glass surface card with a translucent background and backdrop blur.
*
* @example
* ```tsx
* <GlassCard>Content</GlassCard>
* ```
*/
export const GlassCard = ({
children,
className,
ref,
...props
}: GlassCardProps & { ref?: React.Ref<HTMLDivElement> }) => {
return (
<div
className={cn(
"rounded-xl border border-border/50 bg-card/60 p-6 text-card-foreground shadow-lg backdrop-blur-md",
className,
)}
ref={ref}
{...props}
>
{children}
</div>
);
};
GlassCard.displayName = "GlassCard";
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.