Folder
folderOpens a layered 3D folder and fans out its paper contents.
Usage
Basic usage
Click on the folder to expand/collapse, and the paper will spread out in a fan shape. After unfolding, the paper will magnetically follow the mouse.
<Folder />Paper with content
items Up to 3 sheets of paper (excessive truncation, insufficient filling), each unfolded to carry the content.
<Folder
size={1.4}
items={[
<span key="1" className="flex h-full w-full items-center justify-center text-[8px] text-foreground">Document</span>,
<span key="2" className="flex h-full w-full items-center justify-center text-[8px] text-foreground">Picture</span>,
<span key="3" className="flex h-full w-full items-center justify-center text-[8px] text-foreground">Video</span>,
]}
/>Customize body color
color Feed any CSS color (token is recommended), defaultOpen lets the folder expand initially.
<Folder color="var(--color-chart-4)" defaultOpen size={1.2} />Turn off magnetic suction
disableMagnet is expanded, the paper will no longer shift with the mouse, and only hover magnification will be retained.
<Folder size={1.4} disableMagnet defaultOpen />When to use
Use Folder as a playful expandable entry for a portfolio or file group. It opens up to three paper layers and applies magnetic pointer movement. Use FileTree or Tree for real hierarchical file navigation, or Table for tabular data.
Import
import { Folder } from "@hulianui/ui"Props
Inherits <div> attributes except color and onClick, which are redefined below.
| Name | Type | Default | Description |
|---|---|---|---|
| color | string | var(--color-primary) | Folder color. Accepts any CSS color; a theme token is recommended. |
| size | number | 1 | Scale relative to the 100 by 80 px base. |
| open | boolean | — | Controlled open state; pair with onOpenChange. |
| defaultOpen | boolean | false | Initial state in uncontrolled mode. |
| disableMagnet | boolean | false | Prevents open papers from following the pointer. |
Events
| Event | Type | Description |
|---|---|---|
| onClick | MouseEventHandler<HTMLButtonElement> | Called when clicking the folder to toggle it. |
| onOpenChange | (open: boolean) => void | Called for open-state changes in both modes. |
Slots
| Slot | Type | Description |
|---|---|---|
| items | ReactNode[] | Up to three paper contents. Extras are truncated and missing entries become blank papers. |
Usage notes
- Only three items can render; extras are truncated and short arrays are padded.
- Controlled usage requires both
openandonOpenChangeor clicks cannot update state. - Use full
--color-token names; barevar(--primary)does not resolve. - [[nextjs-app-router-underscore-private-folder-404]] concerns Next.js private route folders and does not apply to this component.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<Folder
size={1}
color="var(--color-primary)"
disableMagnet={false}
items={[<DocIcon />, <ImgIcon />, <VideoIcon />]}
/>