Browse components
Reflective Card
Polished metal or glass card whose streaks, specular band and hotspot slide across the surface as the pointer tilts it.
Installation
npx shadcn@latest add @glint-ui/reflective-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/reflective-card.json
Usage
import { ReflectiveCard } from "@/components/ui/reflective-card";
<ReflectiveCard finish="graphite">
<div className="p-6">Obsidian Member</div>
</ReflectiveCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Card content. |
| finish | "silver" | "gold" | "graphite" | "rose" | "glass" | "silver" | Surface material. |
| maxTilt | number | 10 | Max tilt in degrees. |
| sheen | number | 0.8 | Brightness of the moving reflections. |
| brushed | boolean | true | Fine brushed-metal lines. |
| className | string | — | Extra classes for the root element. |