MediaGrid

The files of a folder as tiles or as a list, with selection for bulk actions, an action per file, drag to reorder and files dropped from the desktop. Pick it for any library view; use MediaTile alone for one file outside a list.

MediaGrid

UsageLink to the section Usage

tsx

import { MediaGrid } from '@skribly/ui/media'

tsx

<MediaGrid aria-label="Files in Holidays" items={files} view="grid"
  selectionMode="multiple" selectedKeys={selected} onSelectionChange={setSelected}
  selectLabel="Select" onAction={openEditor}
  renderActions={(file) => <IconButton label={`Edit ${file.name}`} …/>}
  onMove={reorder} dragLabel={(file) => `Drag ${file.name}`}
  isLoading={loading} loadingLabel="Loading files"
  emptyState={<EmptyState title="This folder is empty" />} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A React Aria grid with one tab stop.
Arrow keys move between tiles in both directions, typing a file name jumps to it, Space or the checkbox selects, Enter runs the action and Tab reaches the buttons inside the focused tile.
Checkboxes are read as "Select" plus the file name.
Dragging works with the pointer, with Enter on the drag handle and the arrow keys, and with screen readers.
Loading is a busy status with skeleton tiles, the empty state says why it is empty, notices such as a missing alt text carry a word and a glyph, and selected tiles get a border as well as a tint.
Tiles reflow from one column at 320px.

This demo runs through axe in all three themes on every test run. See what the tests check.

MediaGrid

PreviewLink to the section Preview

Light theme, MediaGrid

Dark theme, MediaGrid

High contrast theme, MediaGrid

UsageLink to the section Usage

AccessibilityLink to the section Accessibility