Store

A full commerce viewer: the media stage (vertical thumbnail rail, pager, corner zoom) sits beside a buy panel with price, highlights, and the add-to-cart CTA. On mobile the panel collapses into a sticky price + CTA bar, so the shopper never loses the buy button while inspecting photos. Copy the Package files (index.ts, Gallery.svelte, Trigger.svelte + lightbox.css) into your design system, then wire triggers in your app. The Example tab shows a product card whose thumbnails swap the main image, viewer navigation synced back so the close morph lands on the visible image, and add-to-cart state shared between the card and the viewer.

Terra 27L Backpack

$149 ~~$189~~

Waxed canvas, full-grain leather straps, and a padded 16″ laptop sleeve. Weather-ready for the daily commute or a weekend on the trail.

import { Lightbox as Primitives } from '@ramka/svelte';
import Gallery from './Gallery.svelte';
import Trigger from './Trigger.svelte';

export type { LightboxItem, ProductInfo } from './Gallery.svelte';

/** Store skin: the library primitives with a styled Trigger and the composed commerce Gallery. */
export const Lightbox = { ...Primitives, Trigger, Gallery };