Folder

Interactive 3D Folder UI component with hover & click animations for modern sites.

ScrollX UI

Installation

npx shadcn@latest add https://scrollxui.dev/registry/folder.json 

Usage

import { Folder, FolderContent } from "@/components/ui/folder";
<Folder>
  <FolderContent>
    <div className="text-center">
      <h2 className="text-2xl font-bold">ScrollX UI</h2>
      <p className="mt-2 text-gray-400 font-medium">
        Cool components for modern UI
      </p>
    </div>
  </FolderContent>
</Folder>

API Reference

Folder

Interactive 3D Folder UI component with hover & click animations for modern sites.

Props

PropertyTypeDefaultDescription
colorstring"hsl(173, 80%, 70%)"
Background color of the main folder body.
tabColorstring"hsl(173, 84%, 42%)"
Color of the folder's top tab section.
size"xxs" | "xs" | "sm" | "md""sm"
Determines the overall folder size.
classNamestring
Optional class name for custom styling or positioning.
childrenReactNode
Elements to render inside the folder. Commonly includes <FolderContent>.

Built withby Ahdeetai.