Signature / Moleculestable

Glass Card

Frosted card with depth-aware blur, refraction edge highlights, and elevation transitions.

@glinui/uiComponent: glass-card

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add glass-card

Usage$

GlassCard is a compound component with GlassCardHeader, GlassCardContent, and GlassCardFooter subcomponents. Place it over a colorful background to see the glass effect.

Basic$

Glass Card

Frosted glass surface

Content with depth-aware blur and refraction edge highlights.

Footer area

TSX

1import { GlassCard, GlassCardHeader, GlassCardContent, GlassCardFooter } from "@glinui/ui"
2
3export function GlassCardDemo() {
4return (
5  <div className="rounded-xl bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-8">
6    <GlassCard>
7      <GlassCardHeader>
8        <h3 className="text-lg font-semibold">Glass Card</h3>
9        <p className="text-sm text-neutral-600 dark:text-neutral-400">Frosted glass surface</p>
10      </GlassCardHeader>
11      <GlassCardContent>
12        <p className="text-sm">Content with depth-aware blur and refraction edge highlights.</p>
13      </GlassCardContent>
14      <GlassCardFooter>
15        <p className="text-xs text-neutral-500">Footer area</p>
16      </GlassCardFooter>
17    </GlassCard>
18  </div>
19)
20}

Examples$

Size Variants$

Small

Medium (default)

Large

TSX

1import { GlassCard, GlassCardContent } from "@glinui/ui"
2
3export function GlassCardSizesDemo() {
4return (
5  <div className="flex flex-col gap-4 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-500 p-8">
6    <GlassCard size="sm"><GlassCardContent size="sm"><p className="text-sm">Small</p></GlassCardContent></GlassCard>
7    <GlassCard size="md"><GlassCardContent size="md"><p className="text-sm">Medium (default)</p></GlassCardContent></GlassCard>
8    <GlassCard size="lg"><GlassCardContent size="lg"><p className="text-sm">Large</p></GlassCardContent></GlassCard>
9  </div>
10)
11}

Accessibility$

GlassCard renders a <div> — add semantic structure inside (headings, paragraphs).
Ensure text contrast meets WCAG AA 4.5:1 on glass surfaces.

Reduced Motion$

Hover elevation transitions respect prefers-reduced-motion and disable transform changes.

API Reference$

GlassCard$

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from glassCardVariants.

GlassCardHeader / GlassCardContent / GlassCardFooter$

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from glassCardVariants.

Source$

TSX

1import { GlassCard, GlassCardHeader, GlassCardContent, GlassCardFooter } from "@glinui/ui"

packages/ui/src/components/glass-card.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/glass-card.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

GlassCardProps

`GlassCardProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from glassCardVariants.