3D Folder

Cards 1.6K

About

A beautifully crafted folder with back panel, tab, front panel, and a subtle shine effect that opens smoothly on hover

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds 3D Folder to your project and fits it to your theme.

Code

How 3D Folder is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AnimatedFolder } from "@/components/ui/3d-folder"

const portfolioData = [
  {
    title: "Branding",
    projects: [
      { id: "1", image: "https://cdn.21st.dev/assets/mirror/c1/c1671df27042b5889c9813bf8e89b79fe2954b88fefb6b2e3c4cd78463289b48.jpg", title: "Lumnia" },
      { id: "2", image: "https://cdn.21st.dev/assets/mirror/67/677dbc17159d32becaf6209a1cc92022800d24cccbce2089e32fe5fe146464e3.jpg", title: "Prism" },
      { id: "3", image: "https://cdn.21st.dev/assets/mirror/b6/b61643bba150cf989b9fa16762d236dd89cb38121ecb53af6d05343d66153a0e.jpg", title: "Vertex" },
    ]
  }
]

export default function Home() {
  return (
    <main className="min-h-screen bg-background flex items-center justify-center w-full">
     
      {/* Main content */}
      <section className="max-w-6xl mx-auto px-6 py-16">
        <div className="flex items-center justify-center w-full">
          {portfolioData.map((folder) => (
            <AnimatedFolder key={folder.title} title={folder.title} projects={folder.projects} />
          ))}
        </div>
      </section>

    </main>
  )
}