Browse components
Folder
A folder that springs open on hover or click, fanning out the paper cards tucked inside.
Installation
npx shadcn@latest add @glint-ui/folderFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/folder.json
Usage
import { Folder } from "@/components/ui/folder";
<Folder color="#5b8cff" label="Projects" items={[<img src="/a.jpg" alt="" />, <img src="/b.jpg" alt="" />]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#5b8cff" | Folder color. |
| size | number | 180 | Folder width in px. |
| label | string | "Projects" | Text under the folder. |
| openOnHover | boolean | true | Open while hovered, not only on click. |
| items | ReactNode | — | Up to three paper cards revealed when open. |
| className | string | — | Extra classes for the root element. |