Folder Preview Hover
Stacked folder rows in three color variants. Hovering lifts a folder, dims its siblings, and pops three photos out of the folder mouth with randomized tilt.
npx shadcn@latest add https://ui.aryank.space/r/folder-preview-hover.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| folders | { index: string; name: string; variant: 1 | 2 | 3; images: [string, string, string] }[] | 6 folders, 18 BLANK-hosted JPGs | Rows of two folders with per-folder preview photos. |
| background / textColor | string | "#f4f7f0" / "#0f0f0f" | Page background and folder label color. |
folderslinksFolder index, name, color variant, and three images.
navLeft / navRighttextThe header line above the folder stack.
gsap