The TiltCard component tilts toward the pointer in 3D and tracks it with a specular highlight, giving flat cards a tactile, physical feel.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/tilt-card.jsonEverything Tilt Card accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | React.ReactNode | No default | Content rendered inside the card |
| maxTilt | number | 12 | Maximum rotation in degrees at the edges of the card |
| hoverScale | number | 1.03 | Scale applied while the pointer is over the card |
| glareOpacity | number | 0.25 | Strength of the specular highlight, between 0 and 1 |
| className | string | '' | Additional CSS classes for the outer perspective wrapper |
Required.
Move your cursor across the card to tilt it in 3D.