Folder Preview
Interactive folder components with stunning hover animations. Inspired by Codrops Folder Preview Ideas.
Shared Files
Features
- 9 Animation Variants: Devi, Rudras, Ardra, Shakti, Kubera, Hari, Ravi, Durga, and Nandi
- Framer Motion Animations: Smooth, physics-based hover effects
- Image & File Previews: Support for both image thumbnails and file lists
- Tailwind CSS Styling: Fully styled with Tailwind, including dark mode support
- Customizable Sizes: Small, medium, and large size options
- Theme Aware: Adapts to light and dark themes automatically
Installation
npx shadcn@latest add "https://vengeance-ui.vercel.app/r/folder-preview.json"Usage
Basic Usage
Shared Files
With Custom Images
Photos
Gallery
With File List (Durga/Nandi variants)
docs
template
readme.md
app.js
test.sh
package.json
Project
qa.txt
cats.mp3
funny.gif
hoho.gif
letter.txt
boss.gif
Downloads
All Variants
Devi
Rudras
Ardra
Shakti
Kubera
Hari
Ravi
docs
template
readme.md
app.js
test.sh
package.json
Durga
docs
template
readme.md
app.js
test.sh
package.json
Nandi
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| variant | 'devi' | 'rudras' | 'ardra' | 'shakti' | 'kubera' | 'hari' | 'ravi' | 'durga' | 'nandi' | 'devi' | The animation variant to use for the folder preview effect. |
| images | string[] | [] | Array of image URLs to display in the folder preview. |
| files | { name: string; type?: 'txt' | 'gif' | 'mp3' | 'default' }[] | [] | Array of file objects for file-based variants (durga, nandi). |
| label | string | undefined | The label to display below the folder. |
| size | 'sm' | 'md' | 'lg' | 'md' | The size of the folder component. |
| className | string | undefined | Additional CSS classes to apply. |
| onClick | () => void | undefined | Optional click handler for the folder. |
Animation Variants Guide
| Variant | Effect | Best For |
|---|---|---|
| devi | Arc expansion with user avatars | Shared folders, team files |
| rudras | Semi-circle with cover rotation | Collaborative projects |
| ardra | Explosive scatter with scale | Photo galleries, media |
| shakti | Fan rotation effect | Document stacks |
| kubera | Continuous floating animation | Cloud storage, uploads |
| hari | Bounce jump effect | Interactive collections |
| ravi | Card spread layout | Portfolio, galleries |
| durga | Text list reveal | Code projects, text files |
| nandi | Magnifier circle preview | File managers, downloads |