Folder

A folder whose papers rise and fan out as the front flap tilts open.

Preview

Blue

Amber

Sage

Setup

Install with the shadcn CLI

$npx shadcn@latest add https://kinetikui.vercel.app/r/folder.json

One command adds every file, the npm packages and any Kinetik components it builds on. Needs a components.json; the CLI offers to create one if your project has none.

Or install manually

1
Run in your terminal:
$npm install clsx tailwind-merge framer-motion
2
Copy lib/utils.ts from the Code tab. Skip if you already have cn().
3
Copy the component from the Code tab and create components/ui/folder.tsx in your project.

Import and render:

Example

import { Folder } from "@/components/ui/folder"

<Folder color="#e0a030" flap={["#f3c25e", "#eab14a"]} />

Usage

Hover or click to open. Each paper springs out with a small delay after the one before it, so they fan out instead of moving as a block.

import { Folder } from "@/components/ui/folder"

export function Files() {
  return <Folder color="#e0a030" flap={["#f3c25e", "#eab14a"]} />
}

Control it yourself with open and onOpenChange, for example to open the folder while something is being dragged over it.

const [open, setOpen] = useState(false)

<Folder open={open} onOpenChange={setOpen} />

Props

Prop	Type	Default	Notes
`open`	`boolean`	—	Controlled state. Leave unset to open on hover and click.
`onOpenChange`	`(open: boolean) => void`	—	Called on hover, leave and click.
`color`	`string`	`"#5b8def"`	Back panel and tab colour.
`flap`	`[string, string]`	`["#7aa5f7", "#6495f2"]`	Front flap gradient, top to bottom.
`papers`	`FolderPaper[]`	3 papers	Each paper's open rotation, x offset and colour.
`className`	`string`	—	Applied to the outer wrapper.

Accessibility

The folder is a real button with aria-expanded and a label that switches between “Open folder” and “Close folder”
Keyboard users toggle it with Enter or Space