# Tilt Card: Default

> A single card with the default tilt and glare.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/tilt-card-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/tilt-card-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/tilt-card-demo-light-3dc1e13e874118b1.png
- Registry item: https://keyframeui.com/r/tilt-card-demo.json
- Categories: card, interaction, 3d
- Listed: 2026-10-14, source last changed 2026-10-15

## Install

```bash
npx shadcn@latest add https://keyframeui.com/r/tilt-card-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/tilt-card.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/tilt-card#tilt-card-demo

## Files

### `registry/demos/tilt-card-demo.tsx`

```tsx
import { TiltCard } from "@/components/ui/tilt-card";

export function TiltCardDemo() {
  return (
    <TiltCard className="w-72 border border-zinc-200 bg-linear-to-br from-white to-zinc-100 p-6 shadow-xl shadow-zinc-900/5 dark:border-zinc-800 dark:from-zinc-900 dark:to-zinc-950 dark:shadow-black/40">
      <p className="font-mono text-xs uppercase tracking-widest text-zinc-500">
        Keyframe
      </p>
      <h3 className="mt-20 text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
        Move your pointer across me
      </h3>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
        The card leans toward the cursor and catches the light.
      </p>
    </TiltCard>
  );
}
```