# GalleryKit Docs

> GalleryKit is a composable photo-gallery toolkit for React: layouts, lightboxes, skins, themes, paywalls, and more.

Source: https://gallerykit.n.yatsyk.com/docs

# 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](./core/index.mdx) — Schemas, types, registries, and shared primitives that every other GalleryKit package depends on.

### Layouts

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

### Components

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

### Skins

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

### Themes

* [Dark Theme](./theme-dark/index.mdx) — OLED-black gallery with high contrast and blue accent (dark mode only).
* [Editorial Theme](./theme-editorial/index.mdx) — Serif typography, generous spacing, cream tint, and thin borders — magazine feel.
* [Minimal Theme](./theme-minimal/index.mdx) — Clean borderless gallery with subtle hover effects and system font — supports light and dark.
* [Pro Theme](./theme-pro/index.mdx) — Dense compact dark layout with monospace metadata and blue accent — built for professional tools.
* [Social Theme](./theme-social/index.mdx) — Instagram/Pinterest-inspired card-based gallery with rounded corners and shadow hover.
* [Telegram Theme](./theme-telegram/index.mdx) — 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.

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