Interactive Folder

Component 84

About

A dynamic UI component that simulates an interactive folder. Click to 'open' and reveal up to three items inside, which spread out. Items provide a subtle parallax effect on hover when open.

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

Code

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

Usage.tsx

"use client";

import React from 'react';
import InteractiveFolder from "@/components/ui/interactive-folder"

// Correct function declaration syntax: function ComponentName() { ... }
export function SimpleFolderExample() {
  return (
    <div className="flex items-center justify-center h-screen">
      <InteractiveFolder
        cl={'#00d8ff'}
        it={[
          <div key="1" className="p-2 text-black text-center rounded">Item 1</div>,
          <div key="2" className="p-2 text-black text-center rounded">Item 2</div>,
          <div key="3" className="p-2 text-black text-center rounded">Item 3</div>,
        ]}
      />
    </div>
  );
}