@tinylight-ui/lightbox v1.0.1

@tinylight-ui/lightbox

Installation

First, install @tinylight-ui/lightbox.

pnpm install @tinylight-ui/lightbox

Then, import it into your app:

import { Lightbox } from "@tinylight-ui/lightbox";

Usage

Below is an example in Next.js with the next/image component:

import { Lightbox } from '@tinylight-ui/lightbox'
import Image from 'next/image'

export const LightboxComponent = () => {
  return (
    <Lightbox.Root>
      <Lightbox.Trigger>
        <button>
            Open Lightbox
          </button>
      </Lightbox.Trigger>

      <Lightbox.Content>
      <Lightbox.Title>Lightbox title</Lightbox.Title>
      <Lightbox.Description>Lightbox description</Lightbox.Description>
        <Lightbox.Close aria-label="Close" />
        <Lightbox.Items>
          <Lightbox.Image asChild>
            <Image
              src="https://placehold.co/800x400/png"
              width={800}
              height={400}
              alt="Placeholder"
            />
          </Lightbox.Image>
          <Lightbox.Image asChild>
            <Image
              src="https://placehold.co/800x400/png"
              width={800}
              height={400}
              alt="Placeholder"
            />
          </Lightbox.Image>
          <Lightbox.Video
            poster="https://placehold.co/1920x1080/png"
            controls
            src="https://www.w3schools.com/html/mov_bbb.mp4"
          />
        </Lightbox.Items>
        <Lightbox.Controls>
          <Lightbox.PrevButton />
          <Lightbox.Thumbs />
          <Lightbox.NextButton />
        </Lightbox.Controls>
      </Lightbox.Content>
    </Lightbox.Root>
  )
}