Content Display

Expandable Folder

클릭하면 여러 장의 종이 카드가 펼쳐지는 폴더 일러스트입니다.

Preview

content stack

Expandable Folder

click to open stacked items

bash

Copied

1pnpm dlx shadcn@latest add https://ryong.dev/r/folder.json

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/folder.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong.dev/r/folder.json

bash

Copied

1bunx shadcn@latest add https://ryong.dev/r/folder.json

typescript

Copied

1import { Folder } from "@/components/folder"23export default function Example() {4  return <Folder color="#5227ff" />5}

Prop	Type	Default	Description
color	string	"#5227FF"	Folder base color.
size	number	1	Scale multiplier.
items	React.ReactNode[]	[]	Custom paper content.
paperVariant	"paper" \| "glass"	"paper"	Paper surface style.
className	string	-	Additional classes merged onto the component.