# Tilt Card: Pricing Cards

> Three plan cards, with the featured plan leaning harder.

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

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/tilt-card-pricing-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/tilt-card-pricing-demo-light-4b1d657fe8dc03ff.png
- Registry item: https://keyframeui.com/r/tilt-card-pricing-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-pricing-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-pricing-demo

## Files

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

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

const plans = [
  {
    name: "Hobby",
    price: "$0",
    blurb: "For side projects and experiments.",
    features: ["3 projects", "Community support", "Basic analytics"],
    featured: false,
  },
  {
    name: "Pro",
    price: "$24",
    blurb: "For teams shipping every week.",
    features: ["Unlimited projects", "Priority support", "Advanced analytics"],
    featured: true,
  },
  {
    name: "Team",
    price: "$79",
    blurb: "For organizations that need control.",
    features: ["SSO and audit logs", "Dedicated support", "Custom roles"],
    featured: false,
  },
];

export function TiltCardPricingDemo() {
  return (
    <div className="grid w-full max-w-4xl gap-5 md:grid-cols-3">
      {plans.map((plan) => (
        <TiltCard
          key={plan.name}
          maxTilt={plan.featured ? 14 : 8}
          scale={plan.featured ? 1.05 : 1.02}
          className={
            plan.featured
              ? "border border-zinc-900 bg-zinc-900 p-6 text-zinc-50 shadow-2xl dark:border-zinc-100 dark:bg-zinc-50 dark:text-zinc-900"
              : "border border-zinc-200 bg-white p-6 text-zinc-900 shadow-lg shadow-zinc-900/5 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-50 dark:shadow-black/30"
          }
        >
          <p className="font-mono text-xs uppercase tracking-widest opacity-60">
            {plan.name}
          </p>
          <p className="mt-4 text-4xl font-semibold tracking-tight">
            {plan.price}
            <span className="text-sm font-normal opacity-60"> / month</span>
          </p>
          <p className="mt-2 text-sm opacity-70">{plan.blurb}</p>
          <ul className="mt-6 space-y-2 text-sm">
            {plan.features.map((feature) => (
              <li key={feature} className="flex items-center gap-2">
                <span aria-hidden className="size-1.5 rounded-full bg-current opacity-50" />
                {feature}
              </li>
            ))}
          </ul>
        </TiltCard>
      ))}
    </div>
  );
}
```