Folder Preview
Interactive folder components with stunning hover animations. Inspired by Codrops Folder Preview Ideas.
Loading Preview...
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://www.vengenceui.com/r/folder-preview.json"Usage
Basic Usage
Loading Preview...
With Custom Images
Loading Preview...
With File List (Durga/Nandi variants)
Loading Preview...
All Variants
Loading Preview...
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 |