Glass card
ProA frosted card with an edge light for floating content.
pnpm dlx shadcn@latest add @caliper/glass-cardStudio
Frosted on purpose
The card softens what is behind it and a thin edge light follows your pointer.
When to use #
Use it for
- Content that floats above imagery or a gradient.
- A highlighted panel in a hero or onboarding step.
Skip it when
- Cards in the reading canvas or inside tables; use a plain card.
Installation #
pnpm dlx shadcn@latest add @caliper/glass-card
Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage #
Import it from your copy of the source. The example behind the preview comes with the source.
import { GlassCard } from "@/components/ui/glass-card"
The worked example comes with Pro
The 12-line example behind the preview opens here with a Pro or Team licence.
API reference #
GlassCard
component
Accessibility #
It is built on native elements, so roles and focus come from the browser.
No custom key handling; Tab and the native activation keys do the work.
Motion #
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.