elbe/ui

The gallery component is built using the photoswipe library.

Install npm install photoswipe and add the following style import and colors to your CSS file.

/*  styles.css */
@import "photoswipe/photoswipe.css" layer(components);

@theme inline {
  --color-gallery: var(--gallery);
  --color-gallery-foreground: var(--gallery-foreground);
}

:root {
  --gallery: oklch(0.439 0 0);
  --gallery-foreground: oklch(1 0 0);
}

:root.dark {
  --gallery: oklch(0.439 0 0);
  --gallery-foreground: oklch(1 0 0);
}

Gallery in combination with spartan/ui carousel component.

Use elb-gallery-caption to add captions to each image in the gallery component.

Caption: White kayak on lake near green trees during daytime

Caption: Person riding on boat paddle during sunset

Caption: A row of houses next to Elbe River

The drawer component is built using the Cupertino Panes library.

Install npm install cupertino-pane.

Open Drawer

Favorite Spot

Save spot for later

SaveCancel