Card Folder

This component creates an animated folder-style card with a background image, floating 3D object, hover effects, and customizable colors and text.

byUrvish Mali from Uselayouts

Installation

terminal

pnpm dlx layro-cli add @iurvish/card-folder

npx layro-cli add @iurvish/card-folder

npx layro-cli add @iurvish/card-folder

bunx layro-cli add @iurvish/card-folder

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { motion, type Transition } from "motion/react";

interface FolderCardItem {
  id?: string | number;
  number: string;
  title: string;
  description: string;
  bgImage?: string;
  characterImage: string;
  folderColor: string;
  borderColor: string;
  textColor?: string;