Skip to content
Mox UI

Folder component

An animated folder whose cards fan out on hover and lift open on click, with a 3D-tilted flap. Supports color and size (sm/md/lg) props.

Installation

  1. 1

    Install the packages

    pnpm add motion clsx tailwind-merge
  2. 2

    Add the utility file

    lib/utils.ts
    import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}
  3. 3

    Copy and paste the code into your project

    Loading source…
  4. 4

    Update the import paths to match your project

    Point @/lib/utils to your utility file if your path aliases differ.

Usage

app/page.tsx
import { Folder } from "@/components/ui/folder-component";
export function Demo() {  return <Folder color="blue" size="md" />}

Options

Pick a value to see the prop you would pass. Defaults are left out.

color
size
snippet.tsx
<Folder />

Props

PropTypeDefaultDescription
color"black" | "white" | "blue"Default: "black"Color theme of the folder, flap, and cards. Each theme sets matching fills, strokes, and inner shadows.
size"sm" | "md" | "lg"Default: "md"Overall scale of the folder. Maps to 0.65× (sm), 1× (md), and 1.35× (lg).

Hover to fan the cards out, then click to lift the folder open.

Credits and license

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Mox UI is appreciated when using a component.
  • Please don't resell the components as your own kit.
Contact Mox UI