---
title: "Media grid"
description: "A media library folder: photos and file tiles, a selection with Shift ranges, a selection bar, uploads with progress and retry, and a list view."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/media-grid
---

# Media grid

A media library folder: photos and file tiles, a selection with Shift ranges, a selection bar, uploads with progress and retry, and a list view.

Loam Studio's media, one folder at a time. The toolbar holds the folder's breadcrumbs, the Grid/List switch, a search, a type filter (Images, Video, Documents, Archives) and a sort. Folders come first with their item counts, then files: product photos as photos and everything else as a tile with its type's glyph, each with its size and, for images, its dimensions. A checkbox on each item, shown on hover, on focus and once anything is chosen, builds a selection, with Shift for a range and Select all. The selection bar at the foot moves, renames (one at a time, checked for a clash or a lost file ending), downloads or deletes after a confirm that says which products lose the file. The grid is one tab stop: arrow keys move, Space selects, Enter opens, Delete asks first, F2 renames, and right-click or Shift+F10 opens the same actions. Drop files anywhere on the block, or pick them with Upload: they go through the Pro file queue, each with progress and Cancel, and a dropped connection with Retry. A file over the 500 MB limit or of a type the library doesn't take is turned away with the reason. List shows the folder in the Pro data table with type, size, modified and what uses each file. A storage meter with Upgrade sits at the foot.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/media-grid
```

## Dependencies
- npm: lucide-react@^1.33.0, @tanstack/react-table@^9.2.4, zod@^4.3.5
- edbn: edbn-base, alert-dialog, aspect-ratio, attachment, badge, breadcrumb, button, checkbox, context-menu, dialog, dropdown-menu, dropzone, empty, field, input-group, meter, select, spinner, text-link, toggle-group, data-table, form-core, form-fields, form-file-field

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More workspace blocks

All 6, with install commands: https://ui.edbn.me/docs/blocks/workspace (Markdown: https://ui.edbn.me/docs/blocks/workspace.md)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt