Folder Preview
An interactive 3D folder that opens to reveal image contents.
Component preview
Install using CLI
npx shadcn@latest add "https://www.obsidianui.dev/r/folder-preview.json"Install Manually
1
Install dependencies
npm install motion clsx tailwind-merge
2
Copy the source code
Copy the code into components/block/folder-preview.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | - | Array of image URLs |
| label | string | - | Folder caption |
| size | 'sm' | 'md' | 'lg' | 'md' | Folder size |
| variant | FolderVariant | 'devi' | Visual style: devi, rudras, ardra, shakti, kubera, hari, ravi, durga, or nandi |
Last updated on