Lightbox

Work through these decisions in order:

1. State: uncontrolled, or bind:open and bind:index? See State & lifecycle.
2. Layout: default to the swipe carousel (Slides + Zoom). See Composition.
3. Morph: on by default. Wrap destination media in Lightbox.Media, put an img inside each Trigger, choose crossfade and morphTo, or pass viewTransition={false} to opt out. See View transitions.
4. Gestures: pull-to-dismiss on Content, Zoom on media, keyboard on Content. See Gestures.
5. Cosmetics vs mechanics: colors, chrome, and radius values are yours. Structural styles (view-transition morph CSS, morph host box, zoom overflow, slide snap alignment) are applied by the library or through Media width/height. Slide track width (full-bleed or snug cards) is your CSS, see Composition: Slides + Zoom. Style with the documented data-* attributes and CSS variables from the API reference.

Import the namespace and compose parts. The sketch below is the default gallery shape (Slides + Zoom + chrome). Every part is optional except Root, which holds the state.

<script lang="ts">	import { Lightbox } from '@ramka/svelte';</script><Lightbox.Root>	<Lightbox.Trigger index={0}><img src="/thumb.jpg" alt="" /></Lightbox.Trigger>	<Lightbox.Portal>		<Lightbox.Backdrop />		<Lightbox.Content>			<Lightbox.Slides>				<Lightbox.Slide>					<Lightbox.Item index={0}>						<Lightbox.Zoom>							<Lightbox.Media>								<img src="/photo.jpg" alt="" />							</Lightbox.Media>						</Lightbox.Zoom>					</Lightbox.Item>				</Lightbox.Slide>			</Lightbox.Slides>			<Lightbox.Counter />			<Lightbox.ZoomOut aria-label="Zoom out" />			<Lightbox.ZoomIn aria-label="Zoom in" />			<Lightbox.Close aria-label="Close" />			<Lightbox.Caption />		</Lightbox.Content>	</Lightbox.Portal></Lightbox.Root>

• State & lifecycle

  bind:open, bind:index, show() and close(), open-change callbacks.

• Composition

  Slides + Zoom chrome, media sizing, and the Item snippet.

• SvelteKit images

  Plain img with width and height, srcset, and enhanced:img.

• View transitions

  Morph on by default, crossfade, morphTo, and presets.

• Gestures

  Pull-to-dismiss, zoom, keyboard, and what wins when.

• RTL support

  Reading direction, what mirrors and what stays physical.

• API reference

  Props, data attributes, and CSS variables for every part.

Browse product demos under Examples. The guides above are canonical for behavior; examples are compositions.