docsFolder Preview

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 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