Folder

An interactive folder component with a smooth 3D opening animation and popping files on hover.

motionlucide-react

When a user hovers over the folder, the front flap tilts forward, and multiple file previews rise from inside with a spring animation. The component is responsive and works well in grid layouts.

Options you can pass to customize this component.

Prop
Type
Description
title
string

The main label displayed on the folder front.

fileCount
number

The number of files displayed below the title.

color
string

The primary background color of the folder.

filesColor
string

The background color of the files inside the folder.

textColor
string

Tailwind class for the title text color.

subTextColor
string

Tailwind class for the file count text color.

className
string

Additional CSS classes for the folder container.

npx shadcn add amitgajare2/ariseui/folder
Folder

Design Folder

45 files

Design Folder

45 files