Folder React component for Tailwind CSS v4
v1.0.1Updated in 1.2.1
A React animated folder icon whose cards fan out on hover and lift open on click, behind a 3D-tilted glass flap.
Hover (or tab to it) to fan the three cards out of the folder while the flap tips back, then click, tap, Enter or Space to lift the folder open and send the cards up in a spread. Click again, press Escape, or move the pointer away to drop everything back in.
Folder is a free React component in the React data display components category, written in TypeScript for React 19 and Tailwind CSS v4. It installs as source with npx wingo-ui@latest add folder-component, together with UIProvider and the npm package motion.
Add to a project
Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup
npx wingo-ui@latest add folder-componentUsage
Import Folder from @/components/ui/folder-component.
import { Folder } from "@/components/ui/folder-component"
export function Demo() {
return (
<div className="h-96">
<Folder label="Design files" />
</div>
)
}
// put your own previews on the cards, back to front:
// <Folder color="blue" cards={[<img src="/a.jpg" alt="" />, <img src="/b.jpg" alt="" />, <img src="/c.jpg" alt="" />]} />Props
colordefault"auto""auto" | "black" | "white" | "blue"Color theme of the folder, flap, and cards. Auto is white on light pages and black on dark ones, switched in CSS with the dark class so it never flashes; the others stay fixed in both themes.
backColordefault""stringAny CSS color for the back panel, over the chosen color theme.
flapColordefault""stringAny CSS color for the frosted front flap (it keeps the theme's glass opacity); its outline follows as a lighter shade.
cardColordefault""stringAny CSS color for the three cards; their outline follows as a darker shade.
sizedefault"md""sm" | "md" | "lg"Overall scale of the folder. Maps to 0.65x (sm), 1x (md), and 1.35x (lg) of the 321 x 270 px base, and carries the cards and flap with it.
spreaddefault1numberHow wide the cards fan out: 1 is the original, 0 stacks them straight, 1.5 fans them further. Scales the sideways offsets and tilts, not the lift.
labeldefault"Folder"stringAccessible name of the folder button, e.g. the name of the folder.
closeOnLeavedefaulttruebooleanDrops the cards back in when the pointer leaves or focus moves away. Turn it off to keep the folder open until it is clicked again.
defaultOpendefaultfalsebooleanStarts open when uncontrolled. Ignored when open is set.
openbooleanControlled open state. Pass it with onOpenChange to drive the folder yourself.
onOpenChange(open: boolean) => voidCalled with the next open state on click, Escape, pointer leave or blur.
cardsReactNode[]Content for the three cards, back to front, each filling a 158 x 208 px rounded card (before scaling). Leave it out for the default document lines; an image or a short preview works well.
classNamestringExtra classes for the root, which fills its parent and centers the folder. Any other div prop is spread onto it too.
Parts
FolderColor
typeThe color themes: "auto" (white on light pages, black on dark ones) | "black" | "white" | "blue".
Examples
Photo album
cards takes your own previews, back to front; here three photos in the blue theme.
Controlled
open and onOpenChange drive it from a button; closeOnLeave off keeps the files out until you close it.
Empty state
The small size with a narrow spread above an empty-state message and an upload action.
Files
- components/ui/folder-component.tsx
FAQ
Is the React Folder component free?
Yes. The source is free and needs no account: copy it from the Code tab or install it with the CLI.
How do I install Folder?
Run npx wingo-ui@latest add folder-component. It also adds the Wingo UI item it builds on (UIProvider) and the npm package motion. With shadcn, run npx shadcn@latest add https://wingo-ui.com/r/folder-component.json.