PerspectiveCard | Pol-ui - A beautiful and functional UI library for React and Next.js

The PerspectiveCard from pol-ui represents a type a card with a motion effect that rotates in 3D the card when the user hovers it.

Importation

Import the component from pol-ui to use the PerspectiveCard element:

import { PerspectiveCard } from "pol-ui";

Default Perspective Card

Default PerspectiveCard

import { PerspectiveCard } from "pol-ui";
 
const PerspectiveCardComponent = () => {
  return (
    <div className="w-[500px] min-h-[400px] rounded-3xl border bg-primary-200">
      <PerspectiveCard>
        <div className="w-[150px] h-[150px] rounded-3xl bg-primary grid place-items-center">
          Hello there
        </div>
      </PerspectiveCard>
    </div>
  );
};
export default PerspectiveCardComponent;

Props

Prop name	Type	Default	Description
children	ReactNode	-	The content of the card.
className	string	-	The class name of the card.
wrapperClassName	string	-	The class name of the wrapper of the card.
theme	PerspectiveCardTheme	{}	The theme of the card.

💡

You can also provide any prop comming from the HTML div tag.

Examples

Custom Parent

The parent of the PerspectiveCard component can be any tag and any Taildwind CSS class.

Card with custom parent

import { PerspectiveCard } from "pol-ui";
 
const PerspectiveCardComponent = () => {
  return (
    <div className="w-full min-h-screen rounded-3xl border bg-primary-200">
      <PerspectiveCard>
        <div className="w-[150px] h-[150px] rounded-3xl bg-primary grid place-items-center">
          Hello there
        </div>
      </PerspectiveCard>
    </div>
  );
};
export default PerspectiveCardComponent;

Custom Props

To add custom props form the div tag or a motion.div tag from framer-motion you can add any prop to the PerspectiveCard component.

Try for example to do hover to the following card:

Card with custom props

import { PerspectiveCard } from "pol-ui";
 
const PerspectiveCardComponent = () => {
  return (
    <div className="w-full min-h-screen rounded-3xl border bg-primary-200">
      <PerspectiveCard
        onClick={() => alert("clicked")}
        whileHover={{
          scale: 1.1,
          transition: {
            duration: 0.3,
            type: "spring",
          },
        }}
        whileTap={{
          scale: 0.9,
          transition: {
            duration: 0.1,
            type: "spring",
          },
        }}
      >
        <div className="w-[150px] h-[150px] rounded-3xl bg-primary grid place-items-center">
          Hello there
        </div>
      </PerspectiveCard>
    </div>
  );
};
export default PerspectiveCardComponent;

Multiple Elements in one card

You can add any children to the PerspectiveCard component, so you can create the effect to have multiple elements moving in 3D.

Card with multiple elements

import { PerspectiveCard } from "pol-ui";
 
const PerspectiveCardComponent = () => {
  return (
    <div className="w-full min-h-screen rounded-3xl border bg-primary-200">
      <PerspectiveCard className="flex gap-2">
        <div className="w-[150px] h-[150px] rounded-3xl bg-primary grid place-items-center">
          Hello there
        </div>
        <div className="w-[150px] h-[150px] rounded-3xl bg-primary grid place-items-center">
          Hello there
        </div>
      </PerspectiveCard>
    </div>
  );
};
export default PerspectiveCardComponent;

Multiple Cards at the same time

Having multiple PerspectiveCard components next to the other won't create any conflict. You can have as many cards as you want in the same parent.

Two cards in one parent

import { PerspectiveCard } from "pol-ui";
 
const PerspectiveCardComponent = () => {
  return (
    <div className="w-full flex p-10 gap-10 rounded-3xl border justify-center bg-primary-200">
      <PerspectiveCard className="flex gap-2">
        <div className="w-[150px] h-[150px] rounded-3xl bg-primary grid place-items-center">
          Hello there
        </div>
      </PerspectiveCard>
      <PerspectiveCard className="flex gap-2">
        <div className="w-[150px] h-[150px] rounded-3xl bg-primary grid place-items-center">
          Hello there
        </div>
      </PerspectiveCard>
    </div>
  );
};
export default PerspectiveCardComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface PerspectiveCardTheme {
  base: string;
  wrapper: string;
}