Note Folder

A folder illustration with notes popping out on hover.

Ship on Tuesday

Record a demo

Tweet the thread

Email the list

Launch ideas

4 notes

Installation

1
Install the component:
npx shadcn@latest add https://ui.amines.fun/r/note-folder.json

Usage:

jsx

app/page.jsx

1  <NoteFolder2      title="Launch ideas"3      notes={[4        "Ship on Tuesday",5        "Record a demo",6        "Tweet the thread",7        "Email the list",8      ]}9      colors={{10        front: "#7c3aed",11        back: "#4c1d95",12        note: "#fef3c7",13        noteText: "#451a03",14      }}15      spring={{ type: "spring", stiffness: 180, damping: 14 }}16      stagger={0.08}17    />

Props

Prop	Type	Default	Description
title	string	"Design feedback"	The main title displayed on the folder front panel.
subtitle	string	Auto-generated from notes count (e.g., "4 notes")	Optional subtitle displayed below the title. Defaults to the number of notes.
notes	string[]	["Logo feels small", "Love the new hero", "Try a warmer palette", "Tighten the spacing"]	Array of up to 4 note strings that pop out on hover. Extra notes beyond 4 are ignored.
colors	object	{ back: "#3a3b40", front: "#6a6c72", paper: "#ffffff", note: "#ffffff", noteText: "#18181b", title: "#ffffff", subtitle: "#a1a1aa" }	Color overrides for the folder. Accepts any of: back (folder back), front (folder front), paper (inner paper), note (note pill background), noteText (note text color), title (title text), subtitle (subtitle text).
spring	object	{ type: "spring", stiffness: 260, damping: 20 }	Framer Motion transition config for all animations. Use stiffer/higher damping for snappy feel, lower for floaty. For plain easing, pass { type: 'tween', duration: 0.45, ease: [0.19, 1, 0.22, 1] }.
stagger	number	0.05	Delay in seconds between each note animating out on hover.
className	string	""	CSS class applied to the outer wrapper div.