---
title: "Media library"
description: "A shop's media library: folders and files with selection, uploads and a list view, and a resizable preview with alt text and where each file is used."
plan: Pro
docs: https://ui.edbn.me/docs/templates/media-library
---

# Media library

A shop's media library: folders and files with selection, uploads and a list view, and a resizable preview with alt text and where each file is used.

Loam Studio's admin with Media active after Products. The page header counts the files and folders and holds Upload; below it the media grid: breadcrumbs, search, a type filter, sort, Grid/List, folders then files, a selection with Shift ranges and Select all, a selection bar that moves, renames, downloads or deletes, a right-click menu, and uploads through the Pro file queue with progress, Cancel and Retry. Drop files anywhere on the page. From about 1280px a preview sits beside the grid in a Resizable group (drag the handle, or focus it and use the arrow keys). It follows the file in focus: the photo or its glyph, type, size and dimensions, a link to copy, Download and Delete, alt text with Save (required once a product shows the photo, and checked for a leading “Photo of”), the product and class pages that use it, and who uploaded it when. Narrower, opening a file shows the same preview in a drawer. With sample, Spring glazes is open with three items chosen, the Sun dinner plate photo in the preview, and two uploads running beside one whose connection dropped. Without it, the Media root opens with nothing chosen.

A Pro page template 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-library
```

## 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, avatar, badge, breadcrumb, button, checkbox, context-menu, dialog, drawer, dropdown-menu, dropzone, empty, field, input-group, kbd, meter, resizable, select, separator, sheet, sidebar, spinner, text-link, toggle-group, tooltip, 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 templates

All 5, with install commands: https://ui.edbn.me/docs/templates/workspace (Markdown: https://ui.edbn.me/docs/templates/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