Components
Glass Card
A frosted glass card surface with composable header, title, description, content, and footer parts.
Liquid Glass
A frosted card surface.
Compose headers, content, and footers on a single tinted glass panel.
Playground
Edit the props live and copy the config.
Liquid Glass
A frosted card surface.
Compose header, content, and footer on one glass panel.
Tint
0.4
<GlassCard tint={0.4}>
<GlassCardHeader>
<GlassCardTitle>Title</GlassCardTitle>
<GlassCardDescription>Description</GlassCardDescription>
</GlassCardHeader>
<GlassCardContent>Body</GlassCardContent>
</GlassCard>Install
npx shadcn@latest add https://websiteglass.com/r/glass-card.jsonUsage
import {
GlassCard,
GlassCardHeader,
GlassCardTitle,
GlassCardDescription,
GlassCardContent,
GlassCardFooter,
} from '@/components/ui/glass-card';
<GlassCard>
<GlassCardHeader>
<GlassCardTitle>Title</GlassCardTitle>
<GlassCardDescription>Description</GlassCardDescription>
</GlassCardHeader>
<GlassCardContent>Body content.</GlassCardContent>
<GlassCardFooter>Footer</GlassCardFooter>
</GlassCard>Props
GlassCard takes tint (0–1, default 0.4) and all native <div> props. The
sub-parts (GlassCardHeader, GlassCardTitle, GlassCardDescription,
GlassCardContent, GlassCardFooter) are plain styled wrappers.