Browse components
Tilt Card
3D perspective tilt that follows the pointer, with an optional glare.
Installation
npx shadcn@latest add @glint-ui/tilt-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/tilt-card.json
Usage
import { TiltCard } from "@/components/ui/tilt-card";
<TiltCard className="rounded-2xl">
<img src="/cover.jpg" alt="" className="rounded-2xl" />
</TiltCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Card content. |
| maxTilt | number | 12 | Max rotation in degrees. |
| scale | number | 1.04 | Scale while hovered. |
| glare | boolean | true | Show a light glare. |
| className | string | — | Extra classes for the root element. |