Files & Media

File grids, file lists, drop zones, and image galleries for file management UIs.

File Grid

Responsive grid of file thumbnails with selection, open, and delete actions.

Preview

No preview available

See the code snippet below for usage.

File Grid.tsx
import { FileGrid } from "@launchapp/design-system/blocks/files";const files = [  { id: "1", name: "report.pdf", type: "pdf", size: "2.4 MB", updatedAt: "2024-01-01" },  { id: "2", name: "photo.jpg", type: "image", size: "1.1 MB", updatedAt: "2024-01-02", thumbnailUrl: "/thumb.jpg" },];export default function Page() {  return (    <FileGrid      files={files}      onOpen={(id) => console.log("open", id)}      onDelete={(id) => console.log("delete", id)}      selectionEnabled    />  );}

File List

List view of files with metadata, sort, and bulk action support.

Preview

No preview available

See the code snippet below for usage.

File List.tsx
import { FileList } from "@launchapp/design-system/blocks/files";const files = [  { id: "1", name: "document.pdf", type: "pdf", size: "2.4 MB", updatedAt: "2024-01-01" },  { id: "2", name: "spreadsheet.xlsx", type: "spreadsheet", size: "540 KB", updatedAt: "2024-01-02" },];export default function Page() {  return (    <FileList      files={files}      onOpen={(id) => console.log("open", id)}      onDelete={(id) => console.log("delete", id)}    />  );}

Drop Zone

Drag-and-drop file upload zone with file type and size restrictions.

Preview

No preview available

See the code snippet below for usage.

Drop Zone.tsx
import { DropZone } from "@launchapp/design-system/blocks/files";export default function Page() {  return (    <DropZone      accept={{ "image/*": [".png", ".jpg"], "application/pdf": [".pdf"] }}      maxSize={10 * 1024 * 1024}      onDrop={(files) => console.log("dropped", files)}    />  );}
← PreviousError Pages
Next →Forms