Components

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.

Dependencies

motion

Interaction Type

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

Props

Options you can pass to customize this component.

Prop
Type
Description
color
blackwhiteblue

Color theme of the folder, flap, and cards. Each theme sets matching fills, strokes, and inner shadows.

size
smmdlg

Overall scale of the folder. Maps to 0.65× (sm), 1× (md), and 1.35× (lg).

Installation

npx shadcn@latest add swamimalode07/rare-ui/folder-component

How to use

import { Folder } from "@/components/ui/folder-component",


export function Demo() {
  return <Folder color="blue" size="md" />
}

Source Code

Click the code icon in the top-right corner to view the source code.

Keep in mind

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.

Contact

Found a bug or issue? Feel free to drop a DM.

License & Usage

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