Asset library

A React block (a whole screen) in Beamline's CMS & media app.

A shared media library in a CMS. Folders hold files; collections only point at them, and adding to one says it never moves a file. The grid filters by type, by missing alt text and by not being used anywhere; each tile says what's missing (alt text), waiting (a new version), private, and where it's used. Many tiles are ticked at once to move to a folder or add to a collection, with the result said. One asset opens beside the grid: its title, alt text, credit and licence end (ending soon or ended said); an asset you just fixed stays in view, said, until you close it, even though it no longer matches the filter. A new version is shown beside the current one and rolled out only to the uses you tick, with the number that keep the current version said. Access is public or private, and before it goes private the delivery cache's limit is said: cached copies stay reachable for a set number of hours.

Use it for

A team's shared pictures, videos and files: filing, fixing metadata, rolling out new versions and controlling access.
Any library of reused files whose changes reach many places (brand assets, product photos).

Not for

Uploading one file in a form (file-dropzone).
A personal file browser (file-manager).

Anatomy

folders and collections with counts; the collections note
grid: type filter, Missing alt text, Not used anywhere, count; the selection bar (Move to folder, Add to collection, Clear); tiles with tick, picture, title, flags and uses
panel: title and Close; Details (licence note, title, alt text, credit, licence end, Save); Versions (current beside new, uses to tick, what keeps the current one, roll out); Access (public or private, the cache warning, apply)

States

missing alt text
fixed, leaving the filter
new version waiting
rolled out
licence ending
licence ended
private
going private
selected
moved
collected

Keyboard

Tab through folders, filters, tiles (tick, then open) and the panel; Space ticks

Props

Prop	Type	Default	Description
`assets` (required)	`LibraryAsset[]`	—
`folders` (required)	`AssetFolder[]`	—
`collections` (required)	`AssetCollection[]`	—
`onAssetChange`	`((asset: LibraryAsset) => void \| Promise<unknown>)`	—
`onMove`	`((ids: string[], folderId: string) => void \| Promise<unknown>)`	—
`onCollect`	`((ids: string[], collectionId: string) => void \| Promise<unknown>)`	—
`onRollout`	`((assetId: string, useIds: string[]) => void \| Promise<unknown>)`	—	Moves the chosen uses to the asset's new version.
`onVisibilityChange`	`((assetId: string, v: "private" \| "public") => void \| Promise<unknown>)`	—
`cacheHours`	`number`	—	How long the delivery cache keeps copies reachable, in hours.
`today`	`string`	—	"Today" as YYYY-MM-DD for licence ends.
`open`	`string \| null`	—	Controlled open state; omit to use defaultOpen.
`defaultOpen`	`string \| null`	—	Initial open state when uncontrolled; defaults to false.
`onOpenChange`	`((id: string \| null) => void)`	—	Reports an open-state change; no callback by default.
`defaultMissingAlt`	`boolean`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`defaultPanelTab`	`"access" \| "details" \| "versions"`	—	The tab the open asset starts on.

Built from

segmented-control
checkbox
select
input
textarea
radio-cards
tabs
button

Dependencies

lucide-react

Import

import { AssetLibrary } from "@beamline/asset-library";

Get it

Asset library is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent