React Media Components: Image Preview, Video Player & Image Editor

Why a media category in a UI library?

Product UIs constantly handle images and audio/video: AI chat attachments, profile photos, product galleries, podcasts, and walkthrough clips. Teams often bolt on heavy players or ad-hoc lightbox CSS that fights the design system.

Intelli UI ships a free Media category with three Liquid Glass components — Image Preview, Media Player, and Image Editor — so chrome controls match the rest of your glass app and you still own the TypeScript after CLI install.

Image Preview (lightbox gallery)

Use Image Preview when users need to open images full-screen with zoom, pan, captions, download, and multi-image navigation. Pair thumbnails with controlled open/index state, or drop in ImagePreviewGallery for a grid that wires the lightbox for you.

Primary search intents: image preview react, react image lightbox, next.js image gallery modal.

npx @intellihelper/cli@latest add image-preview

import { ImagePreview } from "@/components/ui/image-preview"

<ImagePreview
  images={[{ src: "/hero.jpg", alt: "Hero", caption: "Launch art" }]}
  open={open}
  onOpenChange={setOpen}
/>

Media Player (audio, video, CC, quality)

Media Player wraps native HTML5 media with glass chrome: seek, volume, mute, fullscreen, closed captions (WebVTT), and multi-quality source switching that preserves playback position.

Pass captions for accessibility and SEO-adjacent transcript UX; pass qualities for 1080p/720p/480p (or custom labels). Keyboard shortcuts include Space/K play, arrows seek, M mute, C captions, F fullscreen.

npx @intellihelper/cli@latest add media-player

import { MediaPlayer } from "@/components/ui/media-player"

<MediaPlayer
  kind="video"
  title="Walkthrough"
  captions={[
    { id: "en", src: "/en.vtt", label: "English", srcLang: "en", default: true },
  ]}
  qualities={[
    { id: "1080", label: "1080p", src: "/v-1080.mp4", height: 1080 },
    { id: "720", label: "720p", src: "/v-720.mp4", height: 720 },
  ]}
  defaultQuality="720"
/>

Image Editor (crop, rotate, filters)

Image Editor is a client-side canvas tool for crop handles, aspect presets that lock ratio while resizing (defaultAspect / aspect / onAspectChange), 90° rotate, flip, and filter sliders (brightness, contrast, saturation, grayscale, sepia, blur). Crop is authored in source space; rotate/flip apply on export after crop. Export a Blob or Data URL for upload pipelines.

Compose File Upload → Image Editor → API for avatars and attachments. Avoid using it as a server-side pipeline — it is product UI, not an NLE.

npx @intellihelper/cli@latest add image-editor file-upload

import { ImageEditor } from "@/components/ui/image-editor"

<ImageEditor
  src={previewUrl}
  defaultAspect="1:1"
  onExport={(blob) => uploadAvatar(blob)}
/>

Install the full media kit

One CLI command installs all three components plus shared utils. Browse live demos under the Media category on the Intelli UI playground.

npx @intellihelper/cli@latest add image-preview media-player image-editor

Accessibility and performance

Provide real captions/transcripts for meaningful audio and video. Name icon-only controls. Keep glass player chrome on the control layer so text stays readable over the gradient.

Prefer progressive preload (metadata), poster images for LCP-friendly video frames, and CORS-friendly assets when using canvas export or cross-origin WebVTT. For remote captions, set crossOrigin="anonymous" on MediaPlayer and serve CORS headers on the media origin.