3D Card Effect

Install using CLI

npx shadcn-vue@latest add "https://inspira-ui.com/r/card-3d.json"

pnpm dlx shadcn-vue@latest add "https://inspira-ui.com/r/card-3d.json"

bun dlx shadcn-vue@latest add "https://inspira-ui.com/r/card-3d.json"

yarn dlx shadcn-vue@latest add "https://inspira-ui.com/r/card-3d.json"

Install Manually

Copy and paste the following code in the same folder

import { ref, readonly } from "vue";

export function useMouseState() {
  const isMouseEntered = ref(false);

  function setMouseEntered(value: boolean) {
    isMouseEntered.value = value;
  }

  return {
    isMouseEntered: readonly(isMouseEntered),
    setMouseEntered,
  };
}

Examples

With rotation

API

CardContainer

The CardContainer component serves as a wrapper for the 3D card effect. It manages mouse events to create a 3D perspective.

Props

Usage

<CardContainer containerClass="additional-class">
  <!-- Your content here -->
</CardContainer>

CardBody

The CardBody component is a flexible container with preserved 3D styling. It is intended to be used within a CardContainer to hold content with a 3D transformation effect.

Props

Usage

<CardBody class="custom-class">
  <!-- Your content here -->
</CardBody>

CardItem

The CardItem component represents individual items within the 3D card. It supports various transformations (translation and rotation) to create dynamic 3D effects.

Props

Usage

<CardItem as="p" translateZ="50" class="custom-item-class">
  Your text or content here
</CardItem>