Folder

Free

A folder button that opens on hover or click and fans out papers that lean toward the pointer.

Brand assets

3 files · hover to peek, click to keep it open

Customize

Color#ff784f

Size1.5×

Papers3

Open on hover

Installation

npx shadcn@latest add https://ui.mekaigames.com/r/folder.json

Works in any project set up with the shadcn CLI.

Install the dependency.
npm install motion
Copy the code from the Code tab into components/ui/folder.tsx.

Usage

import { Folder } from "@/components/ui/folder";

<Folder
  label="Brand assets"
  color="#ffc24a"
  size={1.5}
  items={[<span key="a">Logo</span>, <span key="b">Palette</span>, <span key="c">Type</span>]}
/>

Props

9 properties

Property	Type	Default	Description
color	string	"#ff784f"	Folder color. The back and tab use a darker shade.
size	number	1	Scale factor. 1 is 120 × 96 pixels.
items	ReactNode[]	—	Up to three papers. Keep them non-interactive: they sit inside a button. Blank papers by default.
open	boolean	—	Open state, for controlled use.
defaultOpen	boolean	false	Start open, when uncontrolled.
onOpenChange	(open: boolean) => void	—	Called on click with the requested state.
openOnHover	boolean	true	Peek inside while the pointer is over the folder; a click keeps it open.
label	string	"Folder"	Accessible name of the button, which also exposes aria-expanded.
className	string	—	Extra classes for the button.

Dependencies: motion