R
视觉与动效FolderComponent3D 倾斜Motion悬停

文件夹组件

一个会呼吸的文件夹：悬停时里面的卡片扇形散开，点击时带 3D 倾斜的封盖抬起。支持颜色与尺寸。

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/folder-component.tsx。

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

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

folder-component.tsx
import Folder from "@/components/ui/folder-component"


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

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性类型默认值说明
color"black" | "white" | "blue""black"文件夹主题。
size"sm" | "md" | "lg""md"整体尺寸。
classNamestring—额外的外层样式。