Gallerykit

GalleryKit

GalleryKit is a composable photo-gallery toolkit for React. @gallerykit/core defines the schemas and registries; everything else (layouts, skins, themes, the lightbox, paywalls) plugs in via tree-shakeable side-effect imports.

Packages

Foundation

  • Core — Schemas, types, registries, and shared primitives that every other GalleryKit package depends on.

Layouts

  • Grid — Responsive uniform grid layout with optional virtualization.
  • Masonry — Pinterest-style masonry layout with virtualization.
  • Justified — Flickr-style justified row layout that preserves the original aspect ratio of every image.
  • Carousel — Single-item carousel layout with slide transitions and gesture support.

Components

  • Lightbox — Modal lightbox viewer with gestures, keyboard navigation, EXIF, and video playback.
  • Viewer — Inline, sidebar, and filmstrip viewers for embedding gallery items in a page.
  • Toolbar — Layout switcher, search, sort, and filter controls for galleries.
  • Pagination — Infinite scroll, load-more, and numbered-page primitives for paginated galleries.
  • Paywall — Paywall, NSFW blur, and age-gate overlays for premium content.
  • Blur Placeholder — Lightweight blurred placeholder shown while the real image loads.
  • Pan & Scale — Pan + zoom image viewer integration backed by @panscale/react.

Skins

  • Card Skin — White card with shadow, rounded corners, and caption below — registers itself as the card skin.
  • Filmstrip Skin — Cinema-style frame with film perforations and monospace caption — registers as the filmstrip skin.
  • Magazine Skin — Editorial style with generous padding, serif captions, and EXIF support — registers as the magazine skin.
  • Minimal Skin — Image-only skin with no decoration — registers as the minimal skin.
  • Overlay Skin — Edge-to-edge image with gradient + caption overlay (Pinterest/Behance style) — registers as the overlay skin.
  • Polaroid Skin — Instant-photo frame with white border, slight rotation, and handwriting caption — registers as the polaroid skin.

Themes

  • Dark Theme — OLED-black gallery with high contrast and blue accent (dark mode only).
  • Editorial Theme — Serif typography, generous spacing, cream tint, and thin borders — magazine feel.
  • Minimal Theme — Clean borderless gallery with subtle hover effects and system font — supports light and dark.
  • Pro Theme — Dense compact dark layout with monospace metadata and blue accent — built for professional tools.
  • Social Theme — Instagram/Pinterest-inspired card-based gallery with rounded corners and shadow hover.
  • Telegram Theme — Adaptive theme that maps to Telegram CSS variables (--tg-theme-*) with 8px radius — for Telegram Mini Apps.

Install

Pick the layout, skin, and theme you need; @gallerykit/core is pulled in automatically.

pnpm add @gallerykit/core @gallerykit/grid @gallerykit/skin-minimal @gallerykit/theme-minimal

On this page

GalleryKitPackagesFoundationLayoutsComponentsSkinsThemesInstall