# Image folders

Translucent folders with files that fan out, pin open, and respond to selection with a gentle spring.

- Categories: Galleries, Glass
- Canonical page: https://nibble.lat/components/image-folders
- Public source: https://nibble.lat/api/components/image-folders
- Dependencies: motion
- Creator: Galavic
- Patterns: Gallery, Images, Folders, Glass
- Interactions: Fan out files, Select an image, Open and close

## Integration

Fetch the source endpoint for the current self-contained singleFile, usage example, dependencies and original files. Preserve bundled licenses and verify the component in your project.

## Usage

```tsx
"use client";

import { ImageFolders } from "./image-folders/image-folders";

const images = [
  {
    "id": "coast",
    "src": "https://images.unsplash.com/photo-1518837695005-2083093ee35b?auto=format&fit=crop&w=640&q=80",
    "label": "Coast"
  },
  {
    "id": "mountains",
    "src": "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=640&q=80",
    "label": "Mountains"
  },
  {
    "id": "forest",
    "src": "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=640&q=80",
    "label": "Forest"
  },
  {
    "id": "desert",
    "src": "https://images.unsplash.com/photo-1509316785289-025f5b846b35?auto=format&fit=crop&w=640&q=80",
    "label": "Desert"
  }
];

export default function Example() {
  return <div style={{ paddingTop: 120 }}>
    <ImageFolders images={images} appearance="light" />
  </div>;
}

```

[Integration guide](https://nibble.lat/agents.md)