A Light Box is React component that displays a light box with a content area and a close button from the ZenithUI ecosystem.
npm install @zenithui/light-boxA ZenithUi Light Box is a React component that creates an elegant modal overlay for displaying content like images, videos, or any custom content with a clean, modern design.
with support for animations, captions, navigation, and more.
---
Install the library using your preferred package manager:
``sh npm2yarn copy`
npm install @zenithui/light-box
---
You can customize the behavior and appearance of the light box using the following:
- Ensure that images is either an array of strings (URLs) or objects adhering to the LightBoxImages structure.classNames
- Use the prop to provide custom styling for specific parts of the lightbox.slide
- The component includes support for animations such as , fade, stretch.onImageDelete
- Custom behavior for image deletion can be implemented using the callback.
---
- Fullscreen modal lightbox using Radix UI Dialog
- Multiple animation styles: slide, fade, flip, blur, stretch
- Keyboard navigation (ArrowLeft, ArrowRight, Escape, Home, End)
- Touch swipe navigation (mobile support)
- Loading and error state indicators
- Customizable buttons (close, delete, navigation)
- Pagination dots and optional caption support
- Controlled open/close state
- Zoomble LightBox
You can also implement a zoom effect for images. This is useful for detailed views or when you want to focus on a specific part of an image.
- zoomable: enables zoom effectminZoom
- : minimum zoom levelmaxZoom
- : maximum zoom level
- Swiping left/right navigates between images
- Supports mobile device detection via useDeviceType
- Keyboard accessible navigation
- Proper ARIA roles and labels via Radix Dialog
- Displays a spinner while loading
- Shows an error icon if the image fails to load
- Always provide onOpenChange to control visibilityonImageDelete` if delete button is shown
- Provide
- Customize buttons for consistent UI across app
- Ensure image URLs are valid or provide fallback handling
---
Contributions are welcome! Please check out our contributing guide for more details.
---
ZenithUi is licensed under the MIT License.
Happy coding! 🚀