# Folder stack

> A folder that fans its files out on hover and opens them in a lightbox.

Component · Pro · https://lodeui.com/components/folder-stack

## 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

```bash
npx shadcn@latest add @lode/folder-stack
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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 |
| ← / → | 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.

## Related

- [Profile card](https://lodeui.com/components/profile-card) — A portrait whose details rise into a glass panel on hover.
- [Tilt card](https://lodeui.com/components/tilt-card) — A card that tilts in 3D toward the pointer with a moving glare.