Folder Preview | Vengeance UI

Installation

Run the following command

npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/folder-preview.json

Usage

code

1import { FolderPreview } from "@/components/ui/folder-preview"
2
3export function FolderPreviewDemo() {
4  return (
5    <FolderPreview
6      variant="devi"
7      label="Shared Files"
8      size="lg"
9      images={[
10        "/folder-preview/user1.svg",
11        "/folder-preview/user2.svg",
12        "/folder-preview/user3.svg",
13        "/folder-preview/user4.svg",
14      ]}
15    />
16  )
17}

Props

Prop Name	Type	Default	Description
variant	`'devi' \| 'rudras' \| 'ardra' \| 'shakti' \| 'kubera' \| 'hari' \| 'ravi' \| 'durga' \| 'nandi'`	`'devi'`	The folder animation and visual style.
images	`string[]`	`default avatars`	Images used by the image-preview folder variants.
files	`{ name: string; type?: 'txt' \| 'gif' \| 'mp3' \| 'default' }[]`	`default files`	Files used by the file-list folder variants.
label	`string`	`-`	Optional label shown below the folder.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Folder size.
className	`string`	`-`	Additional CSS classes.
onClick	`() => void`	`-`	Optional click handler for the folder wrapper.