Comic Viewer Tailwind CSS Demo

Left-to-right reading

The other demos keep the default rtl direction. With initialReadingDirection set to ltr, a spread starts on its left half, a page turn moves the reader to the right, and the logical start and end utilities place the navigation buttons on the matching sides. The last page of this sample has no page to face, and it keeps the half a spread starts on.

Source code

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

export const Reader = ({ pages }) => (
  <ComicViewer.Root pages={pages} initialReadingDirection="ltr">
    <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>
);