glasscn
Glass Scrim Card

A Siri-style liquid-refract card with a black scrim that anchors to one edge and eases out into clear glass.

The current CEO of Apple is Tim Cook. Apple has announced that Cook will step down on September 1, 2026, and will be succeeded by John Ternus.

Exodus Honey

import { CardContent } from "@/components/ui/card"
import { GlassScrimCard } from "@/components/ui/glasscn/glass-scrim-card"

export function ScrimCardDemo() {

Installation

$ npx shadcn add @glasscn/glass-scrim-card

Variants

top

The current CEO of Apple is Tim Cook. Apple has announced that Cook will step down on September 1, 2026, and will be succeeded by John Ternus.

Exodus Honey

bottom

The current CEO of Apple is Tim Cook. Apple has announced that Cook will step down on September 1, 2026, and will be succeeded by John Ternus.

Exodus Honey

both

The current CEO of Apple is Tim Cook. Apple has announced that Cook will step down on September 1, 2026, and will be succeeded by John Ternus.

Exodus Honey

API

Prop
Type
Default
Description
scrim
"top" | "bottom" | "both""top"
Which edge the black scrim anchors to before fading into clear glass.
scrimOpacity
number0.9
Peak scrim opacity at the anchored edge (0–1).
scrimCoverage
number1
Fraction of the card height the scrim covers before it fully fades out.
scrimClassName
string-
Extra classes for the scrim overlay layer.
liquidProps
Omit<LiquidGlassProps, "children">-
Props forwarded to the underlying LiquidGlass surface (blur, refraction, bezel, saturation).
surfaceClassName
string-
Classes applied to the outer LiquidGlass surface.
GlassScrimCard...props
React.ComponentProps<typeof Card>-
Props from the underlying shadcn/ui primitive.