3D Card

Interactive 3D perspective card with smooth hover transforms. Perfect for React applications requiring immersive UI elements with Next.js integration and TypeScript support.

Loading component...

"use client";import { cn } from "@/lib/utils";import React, {  createContext,  useState,  useContext,  useRef,  useEffect,  ComponentProps,} from "react";const MouseEnterContext = createContext<  [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined>(undefined);export type CardContainerProps = {  children?: React.ReactNode;  className?: string;  containerClassName?: string;};export const CardContainer = ({  children,  className,  containerClassName,}: CardContainerProps) => {  const containerRef = useRef<HTMLDivElement>(null);  const [isMouseEntered, setIsMouseEntered] = useState(false);  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {    if (!containerRef.current) return;    const { left, top, width, height } =      containerRef.current.getBoundingClientRect();    const x = (e.clientX - left - width / 2) / 25;    const y = (e.clientY - top - height / 2) / 25;    containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;  };  const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {    setIsMouseEntered(true);    if (!containerRef.current) return;  };  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {    if (!containerRef.current) return;    setIsMouseEntered(false);    containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`;  };  return (    <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>      <div        className={cn(          "py-20 flex items-center justify-center",          containerClassName        )}        style={{          perspective: "1000px",        }}      >        <div          ref={containerRef}          onMouseEnter={handleMouseEnter}          onMouseMove={handleMouseMove}          onMouseLeave={handleMouseLeave}          className={cn(            "flex items-center justify-center relative transition-all duration-200 ease-linear",            className          )}          style={{            transformStyle: "preserve-3d",          }}        >          {children}        </div>      </div>    </MouseEnterContext.Provider>  );};export type CardBodyProps = {  children: React.ReactNode;  className?: string;};export const CardBody = ({ children, className }: CardBodyProps) => {  return (    <div      className={cn(        "h-96 w-96 [transform-style:preserve-3d] [&>*]:[transform-style:preserve-3d]",        className      )}    >      {children}    </div>  );};export type CardItemProps = {  as?: React.ElementType;  children: React.ReactNode;  className?: string;  translateX?: number | string;  translateY?: number | string;  translateZ?: number | string;  rotateX?: number | string;  rotateY?: number | string;  rotateZ?: number | string;} & Record<string, any>;export const CardItem = ({  as: Tag = "div",  children,  className,  translateX = 0,  translateY = 0,  translateZ = 0,  rotateX = 0,  rotateY = 0,  rotateZ = 0,  ...rest}: CardItemProps) => {  const ref = useRef<any>(null);  const [isMouseEntered] = useMouseEnter();  useEffect(() => {    handleAnimations();  }, [isMouseEntered]);  const handleAnimations = () => {    if (!ref.current) return;    if (isMouseEntered) {      ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;    } else {      ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`;    }  };  return React.createElement(    Tag,    {      ref,      className: cn("w-fit transition duration-200 ease-linear", className),      ...rest,    },    children  );};export const useMouseEnter = () => {  const context = useContext(MouseEnterContext);  if (context === undefined) {    throw new Error("useMouseEnter must be used within a MouseEnterProvider");  }  return context;};

Installation

npx shadcn@latest add https://www.shadcn.io/registry/3d-card.json

npx shadcn@latest add https://www.shadcn.io/registry/3d-card.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/3d-card.json

bunx shadcn@latest add https://www.shadcn.io/registry/3d-card.json

Features

Mouse-responsive transforms with real-time perspective calculations based on cursor position
Smooth hover animations using CSS 3D transforms and transition effects
Flexible content positioning with customizable translateX, translateY, translateZ values
Individual item control with independent rotation and translation properties
TypeScript support with comprehensive type definitions and props interface
Responsive design compatible with shadcn/ui design system and Tailwind CSS

Examples

Interactive Variant

Loading component...

"use client";import React from "react";import { CardBody, CardContainer, CardItem } from "@/components/ui/shadcn-io/3d-card";export default function ThreeDCardInteractiveDemo() {  return (    <CardContainer className="inter-var" containerClassName="py-8">      <CardBody className="bg-gray-50 relative group/card dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[24rem] h-auto rounded-xl p-4 border">        <CardItem          translateZ="50"          className="text-xl font-bold text-neutral-600 dark:text-white"        >          Interactive 3D Card        </CardItem>        <CardItem          as="p"          translateZ="60"          className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"        >          Experience smooth transforms with enhanced rotations and translations        </CardItem>        <CardItem          translateZ="100"          rotateX={20}          rotateZ={-10}          className="w-full mt-4"        >          <img            src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"            height="1000"            width="1000"            className="h-48 w-full object-cover rounded-xl group-hover/card:shadow-xl"            alt="thumbnail"          />        </CardItem>        <div className="flex justify-between items-center mt-16">          <CardItem            translateZ={20}            translateX={-40}            as="button"            className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"          >            Try now →          </CardItem>          <CardItem            translateZ={20}            translateX={40}            as="button"            className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold"          >            Sign up          </CardItem>        </div>      </CardBody>    </CardContainer>  );}

"use client";import { cn } from "@/lib/utils";import React, {  createContext,  useState,  useContext,  useRef,  useEffect,  ComponentProps,} from "react";const MouseEnterContext = createContext<  [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined>(undefined);export type CardContainerProps = {  children?: React.ReactNode;  className?: string;  containerClassName?: string;};export const CardContainer = ({  children,  className,  containerClassName,}: CardContainerProps) => {  const containerRef = useRef<HTMLDivElement>(null);  const [isMouseEntered, setIsMouseEntered] = useState(false);  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {    if (!containerRef.current) return;    const { left, top, width, height } =      containerRef.current.getBoundingClientRect();    const x = (e.clientX - left - width / 2) / 25;    const y = (e.clientY - top - height / 2) / 25;    containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;  };  const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {    setIsMouseEntered(true);    if (!containerRef.current) return;  };  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {    if (!containerRef.current) return;    setIsMouseEntered(false);    containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`;  };  return (    <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>      <div        className={cn(          "py-20 flex items-center justify-center",          containerClassName        )}        style={{          perspective: "1000px",        }}      >        <div          ref={containerRef}          onMouseEnter={handleMouseEnter}          onMouseMove={handleMouseMove}          onMouseLeave={handleMouseLeave}          className={cn(            "flex items-center justify-center relative transition-all duration-200 ease-linear",            className          )}          style={{            transformStyle: "preserve-3d",          }}        >          {children}        </div>      </div>    </MouseEnterContext.Provider>  );};export type CardBodyProps = {  children: React.ReactNode;  className?: string;};export const CardBody = ({ children, className }: CardBodyProps) => {  return (    <div      className={cn(        "h-96 w-96 [transform-style:preserve-3d] [&>*]:[transform-style:preserve-3d]",        className      )}    >      {children}    </div>  );};export type CardItemProps = {  as?: React.ElementType;  children: React.ReactNode;  className?: string;  translateX?: number | string;  translateY?: number | string;  translateZ?: number | string;  rotateX?: number | string;  rotateY?: number | string;  rotateZ?: number | string;} & Record<string, any>;export const CardItem = ({  as: Tag = "div",  children,  className,  translateX = 0,  translateY = 0,  translateZ = 0,  rotateX = 0,  rotateY = 0,  rotateZ = 0,  ...rest}: CardItemProps) => {  const ref = useRef<any>(null);  const [isMouseEntered] = useMouseEnter();  useEffect(() => {    handleAnimations();  }, [isMouseEntered]);  const handleAnimations = () => {    if (!ref.current) return;    if (isMouseEntered) {      ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;    } else {      ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`;    }  };  return React.createElement(    Tag,    {      ref,      className: cn("w-fit transition duration-200 ease-linear", className),      ...rest,    },    children  );};export const useMouseEnter = () => {  const context = useContext(MouseEnterContext);  if (context === undefined) {    throw new Error("useMouseEnter must be used within a MouseEnterProvider");  }  return context;};

Enhanced version showcasing additional transform properties and rotation effects.

Use Cases

This free open source React component works well for:

Product showcases - Interactive cards displaying features built with Next.js
Portfolio items - Creative presentations using TypeScript and Tailwind CSS
Hero sections - Engaging landing page elements with 3D effects
Dashboard widgets - Interactive data cards for modern applications

API Reference

CardContainer

Prop	Type	Default	Description
`children`	`React.ReactNode`	`undefined`	Card content elements
`className`	`string`	`undefined`	CSS classes for the card container
`containerClassName`	`string`	`undefined`	CSS classes for the outer wrapper

CardBody

Prop	Type	Default	Description
`children`	`React.ReactNode`	required	Content to be rendered inside the card body
`className`	`string`	`undefined`	CSS classes for styling the card body

CardItem

Prop	Type	Default	Description
`as`	`React.ElementType`	`"div"`	HTML element type to render
`children`	`React.ReactNode`	required	Content to be rendered inside the item
`className`	`string`	`undefined`	CSS classes for styling
`translateX`	`number \| string`	`0`	X-axis translation in pixels
`translateY`	`number \| string`	`0`	Y-axis translation in pixels
`translateZ`	`number \| string`	`0`	Z-axis translation in pixels
`rotateX`	`number \| string`	`0`	X-axis rotation in degrees
`rotateY`	`number \| string`	`0`	Y-axis rotation in degrees
`rotateZ`	`number \| string`	`0`	Z-axis rotation in degrees

Implementation Notes

Wrap content within CardContainer for proper 3D perspective context
Use CardBody as the main content wrapper with preserve-3d transform style
Individual CardItem components respond to hover state automatically
Transform values accept both numbers (pixels/degrees) and string values
Compatible with all shadcn/ui components and design tokens
Requires no additional CSS setup beyond Tailwind CSS classes

3D Card

React3d-card

React3d-card

On this page