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
0 of 4 selected
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
Uploaded Files
document.pdf
2.3 MB
photo.jpg
1.1 MB
video.mp4
50.0 MB
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
Drag & drop here, or click to browse
Accepted: image/*,application/pdf · Multiple files allowed
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)} /> );}Image Gallery
Masonry or grid image gallery with lightbox preview.
Preview
Image Gallery.tsx
import { ImageGallery } from "@launchapp/design-system/blocks/files";const images = [ { id: "1", src: "/photo1.jpg", alt: "Photo 1", width: 800, height: 600 }, { id: "2", src: "/photo2.jpg", alt: "Photo 2", width: 600, height: 800 },];export default function Page() { return <ImageGallery images={images} />;}File Manager
Full file manager with folder tree, grid/list view, upload, and file actions.
Preview
Folders
File Manager.tsx
import { FileManager } from "@launchapp/design-system/blocks/files";const files = [ { id: "1", name: "report.pdf", type: "document", size: 2457600, modifiedAt: "2024-01-01" }, { id: "2", name: "photo.jpg", type: "image", size: 1153434, modifiedAt: "2024-01-02" }, { id: "3", name: "archive.zip", type: "archive", size: 983040, modifiedAt: "2024-01-03" },];const folders = [ { id: "docs", name: "Documents", parentId: null }, { id: "images", name: "Images", parentId: null },];export default function Page() { return ( <FileManager files={files} folders={folders} onFileOpen={(id) => console.log("open", id)} onFileDownload={(id) => console.log("download", id)} onFileDelete={(id) => console.log("delete", id)} onUpload={(files) => console.log("upload", files.map(f => f.name))} /> );}File Upload Zone (with Progress)
Drag-and-drop file upload zone with progress tracking, file list, and status badges.
Preview
Drag & drop files here, or click to browse
Accepted: image/*,.pdf · Max: 10.0 MB · Up to 5 files
File Upload Zone (with Progress).tsx
import { FileUploadZone } from "@launchapp/design-system/blocks/files";export default function Page() { return ( <FileUploadZone accept="image/*,.pdf" maxSize={10 * 1024 * 1024} maxFiles={5} onUpload={(files) => console.log("upload", files.map((f) => f.id))} onRemove={(id) => console.log("remove", id)} /> );}