Browse components
Glass Card
Frosted glassmorphism card with a refractive edge light, film grain and a pointer-follow sheen.
Installation
npx shadcn@latest add @glint-ui/glass-cardFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/glass-card.json
Usage
import { GlassCard } from "@/components/ui/glass-card";
<div className="relative bg-gradient-to-br from-rose-500 to-violet-600 p-16">
<GlassCard className="w-80">
<div className="p-6">Frosted content</div>
</GlassCard>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Card content. |
| blur | number | 18 | Backdrop blur in px. |
| tint | number | 0.1 | White tint of the glass. |
| noise | number | 0.25 | Film grain strength. |
| radius | number | 28 | Corner radius in px. |
| highlight | boolean | true | Pointer-follow sheen and edge light. |
| className | string | — | Extra classes for the root element. |