Styling and theming

Import the default stylesheet once:

import 'react-pic-gallery/styles.css'

The library uses namespaced classes and CSS variables. Because the lightbox is rendered in a portal, theme lightbox variables globally or on .react-pic-gallery__lightbox.

:root,
.react-pic-gallery__lightbox {
  --gallery-accent: #ff7a59;
  --gallery-overlay: rgba(10, 10, 14, 0.98);
  --gallery-control-size: 3rem;
}

Useful variables include:

Variable	Purpose
--gallery-gap	Space between gallery tiles.
--gallery-radius	Tile corner radius.
--gallery-row-height	Tile/base mosaic row height, or target justified-row height, when rowHeight is not supplied.
--gallery-accent	Focus ring, loader, and interactive accent color.
--gallery-overlay	Lightbox backdrop color.
--gallery-control-size	Close and navigation target size.
--gallery-carousel-height	Height of the inline carousel (defaults to 24rem, or 14rem at screen widths up to 600px).
--gallery-motion	Transition and animation duration.

Stable class names

All classes begin with react-pic-gallery__. The main extension points are:

• .react-pic-gallery__grid
• .react-pic-gallery__gallery--justified and .react-pic-gallery__tile--justified
• .react-pic-gallery__gallery--mosaic and .react-pic-gallery__mosaic-group
• .react-pic-gallery__carousel
• .react-pic-gallery__tile
• .react-pic-gallery__lightbox
• .react-pic-gallery__toolbar
• .react-pic-gallery__control
• .react-pic-gallery__caption

Prefer variables and render callbacks before overriding layout classes. This keeps the built-in keyboard and responsive behavior intact.

Reduced motion

The default stylesheet respects prefers-reduced-motion: reduce. If your application has a stronger motion policy, set:

:root {
  --gallery-motion: 0ms;
}