Media Library Grid
Asset browser grid with filename, type badge, and size captions, plus a toolbar with search, filter, view toggle, and upload.
Asset browser grid with filename, type badge, and size captions, plus a toolbar with search, filter, view toggle, and upload.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
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.
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
After
One strong use is the workspace media library. Other grid configurations:
Tip: keep the asset count visible at all times; it tells uploaders whether a filter is hiding items or the library is genuinely empty.