Folder stackPro
A folder that fans its files out on hover and opens them in a lightbox.
Moodboard
7 files
When to use
- Collections of images or files where the cover matters: moodboards, galleries, attachments.
When not to use
- Long file lists: use a table or grid.
Installation
Usage
Import it from @/components/ui/folder-stack after installing.
example.tsx
import { FolderStack } from "@/components/ui/folder-stack";
export function Moodboard() {
return <FolderStack name="Moodboard" files={[{ name: "linen.jpg", src: "/linen.jpg" }, { name: "dusk.jpg", src: "/dusk.jpg" }]} />;
}API reference
FolderStack
A folder that fans out its first five files and opens any of them in a lightbox.
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | – | Folder label. |
| files | { name; src?; colors? }[] | – | Image URL, or two colors for a generated cover. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Focus a file (the folder opens) |
| Enter | Open in the lightbox |
| ←or→ | Previous or next in the lightbox |
| Esc | Close |
Accessibility
- Files are labelled buttons; the lightbox is aria-modal.
Motion
- Files fan into an arc on hover or focus; the clicked file morphs into the lightbox.
Responsive behavior
- 224px wide; the lightbox scales to 80vw on phones.
Performance
- Only five files are drawn in the fan.
Notes for AI
- Provide src for real images; colors are a placeholder.
This page as Markdown, for assistants and coding agents:
/components/folder-stack/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt