How do I install Folder With Files?

Run npx shadcn@latest add @aceternity/folder-with-files in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI automatically installs all required dependencies including Tailwind CSS plugins and Framer Motion.

Is Folder With Files responsive and accessible?

Yes. The component is fully responsive across mobile, tablet, and desktop breakpoints. It uses semantic HTML elements, proper heading hierarchy, and accessible color contrast ratios. Touch targets are appropriately sized for mobile interactions, and all interactive elements are keyboard-navigable.

Can I customize the colors, fonts, and layout?

Everything is built with Tailwind CSS utility classes and Framer Motion animations. You can change colors, spacing, typography, border radius, shadows, and animation timing directly in the JSX — no separate CSS files to manage. The component uses your project's Tailwind theme, so it automatically adapts to your design system.

What frameworks does this work with?

Folder With Files is built for React and Next.js (App Router and Pages Router). It requires Tailwind CSS v4 and Framer Motion. It works with any React-based framework including Remix, Gatsby, and Vite — just ensure Tailwind CSS and Framer Motion are configured in your project.

Illustrations

21 / 22

Folder With Files

An interactive folder illustration with files that fan out on hover. Includes animated pulse beams and a server component for file transfer visualization.

A 3D folder illustration with images that peek out and fan on hover. The folder front rotates open using CSS 3D transforms while the images spread apart with spring physics.

Behind the folder, animated pulse beams travel along dashed lines to suggest data transfer. A server component sits next to the folder with vent details and drive bay indicators.

The folder uses perspective and preserve-3d for depth. Images are positioned with staggered z-index and rotate at different angles when expanded.

Works well for cloud storage, file sharing, backup services, or any product that handles file transfers.

More from Illustrations

Included with All-Access

One payment unlocks the code for this block and every other block, template and page.

Get All-Access

Explore more

Chat Conversation Collaborative Cursors Features Section With Skeletons Illustrations Feature Sections

About this block

A 3D folder illustration with images that peek out and fan on hover. The folder front rotates open using CSS 3D transforms while the images spread apart with spring physics.

Behind the folder, animated pulse beams travel along dashed lines to suggest data transfer. A server component sits next to the folder with vent details and drive bay indicators.

The folder uses perspective and preserve-3d for depth. Images are positioned with staggered z-index and rotate at different angles when expanded.

Works well for cloud storage, file sharing, backup services, or any product that handles file transfers.