About this block

Media Library Grid is the primary asset browser: nine tiles arranged in a responsive grid, each showing a Placeholder preview, a truncated filename like hero-shot.jpg or product-demo.mp4, a type badge (Image, Video, Archive, Document, Data), and a size caption. The toolbar above pairs a search input and Filter button on the left with a grid/list view toggle and an Upload button on the right, and a muted count line reads 9 assets.

Assets are one flat array with id, name, type, and size. The view toggle uses aria-pressed so keyboard and screen-reader users know which layout is active.

When to use

Reach for this block as the main media-picker or library page, wired to your assets endpoint and paginated as the library grows. Connect the Upload button to your file-input handler.

A natural flow around it on an Application Pro page:

Before

• App shell
• Filters and search

After

• Asset detail panel
• Upload queue panel

What you can display

One strong use is the workspace media library. Other grid configurations:

• Image only. Filter to Image type so designers see only visual assets.
• Brand kit view. Group SVGs, fonts, and zips for a brand-assets portal.
• List view. Toggle the view chip to render the same data as a compact ruled list.

Tip: keep the asset count visible at all times; it tells uploaders whether a filter is hiding items or the library is genuinely empty.