Comic Viewer Tailwind CSS Demo

Before you read

This chapter is published a week ahead of its free release. Please keep the pages to yourself until then.

Why am I seeing this?

Early access comes with the membership this chapter was opened with.

Pages around the chapter

StartPage and EndPage put content of your own at the two ends of the reading sequence, and neither of them is counted as a page: the progress still reads Pages 1-2 of 7 on the first spread. They carry the same data-page-side attribute as a page, so the same variants keep them on the half of the spread they belong to.

Source code

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

export const Reader = ({ pages }) => (
  <ComicViewer.Root pages={pages}>
    <ComicViewer.StartPage className="flex h-full w-full items-center justify-center data-[page-side=left]:justify-end data-[page-side=right]:justify-start">
      <CoverNotice />
    </ComicViewer.StartPage>

    <ComicViewer.Viewport>{/* ... */}</ComicViewer.Viewport>

    <ComicViewer.EndPage className="flex h-full w-full items-center justify-center data-[page-side=left]:justify-end data-[page-side=right]:justify-start">
      <NextChapterCard />
    </ComicViewer.EndPage>

    <ComicViewer.Toolbar />
    <ComicViewer.PageNavigation />
  </ComicViewer.Root>
);