SvelteKit Package

core-ui-media

Media components — image grid, carousel, lightbox, video background, metrics overlay

SvelteKit Ready UI

Media Gallery svelte

<script>
  import { ImageGrid, ImageLightbox, VideoBackground }
    from '@sbx/core-ui/components/media';

  let lightboxOpen = $state(false);
  let lightboxIndex = $state(0);
</script>

<VideoBackground src="/hero.m3u8" poster="/hero.jpg" autoplay muted>
  <h1>Welcome</h1>
</VideoBackground>

<ImageGrid images={gallery} columns={3}
  onclick={(i) => { lightboxIndex = i; lightboxOpen = true; }} />

<ImageLightbox images={gallery} index={lightboxIndex}
  open={lightboxOpen} />

About

Visual media presentation components. Includes responsive image layouts (ImageGrid, ImageCarousel), a fullscreen lightbox viewer, HLS-capable video background with autoplay, and a metrics overlay for analytics dashboards.

Public API

Name	Kind	Signature
ImageGrid	type	ImageGrid.svelte — images, columns, gap, onclick
ImageCarousel	type	ImageCarousel.svelte — images, autoplay, interval
ImageCard	type	ImageCard.svelte — src, alt, caption, aspect
ImageLightbox	type	ImageLightbox.svelte — images, index, open
VideoBackground	type	VideoBackground.svelte — src, poster, autoplay, muted
MetricsOverlay	type	MetricsOverlay.svelte — metrics, position

Dependencies

Imports (1)

core-ui-primitives SvelteKit Ready

Base UI primitives — Button, Input, Modal, Badge, Avatar, Tooltip, Select

svelte-5componentsprimitivesform-inputsdesign-system

13 exports 2 deps

Source

@sbx/core-ui/components/media

svelte-5mediaimagesvideohlsgallerylightbox