Comic Viewer Tailwind CSS Demo

Basic image loading

Each page uses a normal image URL. This maintained styling reference composes the public viewer primitives with Tailwind utilities and deliberately does not import @publira/comic-viewer/core.css.

Source code

import * as ComicViewer from "@publira/comic-viewer";

export const Reader = ({ pages }) => (
  <ComicViewer.Root pages={pages}>
    <ComicViewer.Viewport>
      <ComicViewer.ViewportTrack>
        <ComicViewer.ViewportPageSet>
          <ComicViewer.ViewportPageSlot>
            <ComicViewer.ViewportPage>
              <ComicViewer.PageCanvas />
            </ComicViewer.ViewportPage>
          </ComicViewer.ViewportPageSlot>
        </ComicViewer.ViewportPageSet>
      </ComicViewer.ViewportTrack>
    </ComicViewer.Viewport>
    <ComicViewer.Toolbar />
    <ComicViewer.PageNavigation />
  </ComicViewer.Root>
);