Document Folder Stack React component
A tabbed folder that opens when you point at it: the front flap hinges forward in 3D and the documents inside rise and fan out one after another, each with a file-type tag, title and meta line; click a document to lift it to the front.
About the Document Folder Stack component
Document Folder Stack turns a file category into an object you want to open. Point at the folder and its front flap tips forward while the documents inside rise and fan out one after another, each tagged with its file type, a title and a detail line.
Click a document to lift it to the front. The folder opens on hover, with the keyboard, or with a tap on phones, and the documents only join the tab order once they're visible.
When to use it
Use it for file and resource sections, client portals, a 'downloads' area, case-study archives or any dashboard tile that groups documents by type.
For long file lists, show a few highlights in the folder and link to the full list; the folder shows up to four documents.
Installation
Add the Document Folder Stack component to your project with the shadcn CLI. It lands in components/document-folder-stack.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/document-folder-stackOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<DocumentFolderStack /> accepts 9 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| label | string | "Contracts" |
| caption Shown under the label, e.g. "Updated 2d ago". Defaults to the document count. | string | — |
| documents | { id: string; title: string; type?: FolderDocType; meta?: string }[] | DOCS |
| color Folder colour. | string | "#d9c7a7" |
| open Controlled open state; otherwise it opens on hover, keyboard focus or tap. | boolean | — |
| defaultOpen | boolean | false |
| onOpenChange | (open: boolean) => void | — |
| onDocumentClick | (doc: FolderDocument) => void | — |
| theme | "dark" | "light" | "dark" |
- labelstringDefault: "Contracts"
- caption
Shown under the label, e.g. "Updated 2d ago". Defaults to the document count.
string - documents{ id: string; title: string; type?: FolderDocType; meta?: string }[]Default: DOCS
- color
Folder colour.
stringDefault: "#d9c7a7" - open
Controlled open state; otherwise it opens on hover, keyboard focus or tap.
boolean - defaultOpenbooleanDefault: false
- onOpenChange(open: boolean) => void
- onDocumentClick(doc: FolderDocument) => void
- theme"dark" | "light"Default: "dark"
npm dependencies
Installed for you by the shadcn CLI.
Document Folder Stack FAQ
- How many documents fit?
- Up to four are shown, fanned out. Pass caption to say how many there are in total, for example "38 files".
- What file types are there?
- pdf, doc, xls, img and txt, each with its own coloured tag. Leave type out to get a neutral TXT tag.
- Can it stay open?
- Pass open to control it, or defaultOpen to start open; onOpenChange tells you when it opens or closes.
- Does it work on phones?
- Yes. Tap the folder to open it, tap a document to bring it forward, and tap outside to close it.
