DocumentationFolder Preview

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 NameTypeDefaultDescription
variant'devi' | 'rudras' | 'ardra' | 'shakti' | 'kubera' | 'hari' | 'ravi' | 'durga' | 'nandi''devi'The animation variant to use for the folder preview effect.
imagesstring[][]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).
labelstringundefinedThe label to display below the folder.
size'sm' | 'md' | 'lg''md'The size of the folder component.
classNamestringundefinedAdditional CSS classes to apply.
onClick() => voidundefinedOptional click handler for the folder.

Animation Variants Guide

VariantEffectBest For
deviArc expansion with user avatarsShared folders, team files
rudrasSemi-circle with cover rotationCollaborative projects
ardraExplosive scatter with scalePhoto galleries, media
shaktiFan rotation effectDocument stacks
kuberaContinuous floating animationCloud storage, uploads
hariBounce jump effectInteractive collections
raviCard spread layoutPortfolio, galleries
durgaText list revealCode projects, text files
nandiMagnifier circle previewFile managers, downloads