17 April 2026
A folder icon component with a frosted glass front flap, stacked document peek, and smooth spring hover animation that fans the papers open. Pick from 6 color themes via the color prop. Drop it into any React or Next.js project and install directly via the shadcn CLI.
Hover over a folder to see the document fan animation. Each color uses a noise texture and scratch overlay for a tactile feel.
Run the command below to add the component to your project.
npx shadcn@latest add https://urmauur.com/r/folder.json| Prop | Type | Default | Description |
|---|---|---|---|
color | string | blue | blue · black · grey · yellow · orange · red |
size | string | lg | sm · md · lg |
label | string | — | Optional text badge shown bottom-left of flap |
className | string | — | Extra classes on the root element |