Browse components
Folder Float
A folder whose flap tips open on hover or focus so its files float up and fan out, then settle back in; click pins it open.
Installation
npx shadcn@latest add @glint-ui/folder-floatFirst 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-float.json
Usage
import { FolderFloat } from "@/components/ui/folder-float";
<FolderFloat label="Design" files={["brief.pdf", "logo.svg"]} onOpenChange={setOpen} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Design" | Folder name. |
| files | string[] | ["brief.pdf","moodboard.png","logo.svg","notes.md"] | File names (first four are drawn); the badge shows the total. |
| color | string | "#60a5fa" | Folder color. |
| defaultOpen | boolean | false | Start pinned open. |
| open | ReactNode | — | Controlled pinned-open state. Pair with onOpenChange. |
| onOpenChange | ReactNode | — | Called when a click or Enter pins / unpins the folder. |
| className | string | — | Extra classes for the root element. |