Future UI

Metallic Card 3D

▦ Cards

Premium 3D metallic card with real-time rotation and dynamic light reflections.

card3dmetalliccss-transformsinteractivedrag

No preview available

CSS 3D Transforms ~ Drag to Rotate

Controls

#6366f1

Cards / React Component

About Metallic Card 3D

Premium 3D metallic card with real-time rotation and dynamic light reflections.

Category Cards
Framework React + TypeScript
Tags card, 3d, metallic, css-transforms, interactive, drag

Install Metallic Card 3D in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/metallic-card-3d.json?key=YOUR_LICENSE_KEY"

Usage example

import { MetallicCard3D } from './MetallicCard3D';

function FrontContent() {
  return (
    <div className="flex flex-col items-center justify-center h-full gap-2">
      <h2 className="text-xl font-semibold text-white">Front Side</h2>
      <p className="text-sm text-white/50">Hover to flip</p>
    </div>
  );
}

function BackContent() {
  return (
    <div className="flex flex-col items-center justify-center h-full gap-2">
      <h2 className="text-xl font-semibold text-white">Back Side</h2>
      <p className="text-sm text-white/50">Card content here</p>
    </div>
  );
}

export default function Example() {
  return (
    <MetallicCard3D
      orientation="portrait"
      accentColor="#8b5cf6"
      front={<FrontContent />}
      back={<BackContent />}
    />
  );
}