ComponentsDocument Viewer

Document Viewer

A feature-rich, responsive, and composable document viewing component system. Built specifically for Municipal LGU Document Management Systems, Ordinance Archives, and Purchase Request tracking.

React

DMS Workspace

PDF & Scanned Preview

Interactive Demo

Explore three municipal viewing scenarios: Full DMS Workspace with Routing Sidebar, Scanned Leave Form Image Mode, and Lightbox Dialog Modal.

Municipal Ordinance Viewer (Full DMS Mode)

Complete workspace view with integrated metadata sidebar and endorsement workflow buttons.

Republic Act No. 12254

PDF

Document Metadata

Tracking ID:RA-12254

Classification:

Republic Act

Pages:14 Pages

Security:ðŸ”’ Encrypted / Signed

Routing Audit Trail

Ordinance Authored

Oct 20, 2026

Coun. Juan Dela CruzAuthor

Resolution drafted by Sangguniang Bayan Committee on ICT.

1st Reading Approval

Oct 22, 2026

Approved during the 24th Regular Session.

Pending Mayoral Signature

Oct 24, 2026

Transmitted to the Office of the Municipal Mayor for enactment.

Action Required

Scanned Document Preview (Image Mode)

Provides native zoom and 90° rotation controls for scanned citizen submissions or receipts.

Form 6: Application for Leave (Scanned Copy)

IMAGE

Modal / Lightbox Overlay

Launch the document viewer inside a full-screen popup dialog. Perfect for compact lists.

Municipal Annual Procurement Plan 2026

Consolidated budget allocations across all LGU departments.

Installation

Install the component via the shadcn/ui CLI.

pnpm dlx shadcn@latest add https://micto-ui-kit.misangono.net/r/micto/document-viewer.json

DMS Workspace Layout

Integrate a metadata sidebar and sign-off action buttons directly into your workspace view.

import {
  DocumentViewer,
  DocumentViewerToolbar,
  DocumentViewerCanvas,
  DocumentViewerSidebar,
} from "@/components/micto/document-viewer"
import { Button } from "@/components/ui/button"

export default function OrdinanceViewer() {
  return (
    <DocumentViewer
      url="/docs/resolution-2026.pdf"
      title="Resolution No. 2026-042"
      onDownload={() => alert("Downloading...")}
    >
      <DocumentViewerToolbar
        actions={<Button size="sm">Sign Resolution</Button>}
      />
      <div className="flex flex-1 overflow-hidden">
        <DocumentViewerCanvas />
        <DocumentViewerSidebar width="w-80">
          <h4 className="text-xs font-bold uppercase mb-2">Metadata</h4>
          <p className="text-xs text-muted-foreground">Author: Coun. Dela Cruz</p>
        </DocumentViewerSidebar>
      </div>
    </DocumentViewer>
  )
}

Dialog Lightbox Mode

Wrap your viewer with DocumentViewerDialog to launch documents in a full-screen overlay popup.

import {
  DocumentViewerDialog,
  DocumentViewerToolbar,
  DocumentViewerCanvas,
} from "@/components/micto/document-viewer"
import { Button } from "@/components/ui/button"

export default function PlanModal() {
  return (
    <DocumentViewerDialog
      trigger={<Button size="sm">Open Procurement Plan</Button>}
      url="/docs/procurement-plan.pdf"
      title="Annual Procurement Plan 2026"
    >
      <DocumentViewerToolbar />
      <div className="flex flex-1 overflow-hidden">
        <DocumentViewerCanvas />
      </div>
    </DocumentViewerDialog>
  )
}

DocumentViewer Props

Root container configuration.

Prop	Type	Default	Description
url	string		The direct URL to the document (PDF, PNG, JPG, WEBP).
title	ReactNode	undefined	Document title displayed in the toolbar header and modal accessibility tags.
initialScale	number	1	Starting zoom factor (e.g. 0.8 for 80%, 1.5 for 150%).
sidebarPosition	'left' \| 'right'	'right'	Dictates which side the collapsible metadata pane appears on.
onDownload	() => void	undefined	Trigger callback when the download icon button is clicked.
onPrint	() => void	undefined	Trigger callback when the printer icon button is clicked.

DocumentViewerToolbar Props

Header toolbar configuration.

Prop	Type	Default	Description
showZoom	boolean	true	When true, renders zoom scale controls for image documents.
showRotate	boolean	true	When true, renders 90° clockwise rotation button for image documents.
showFullscreen	boolean	true	When true, renders the fullscreen toggle button.
showSidebarToggle	boolean	true	When true, renders the panel collapse/expand button.
actions	ReactNode	undefined	Custom JSX slot for rendering action buttons (e.g. 'Sign Resolution', 'Endorse').

DocumentViewerSidebar Props

Collapsible side panel configuration.

Prop	Type	Default	Description
width	string	'w-80'	Tailwind width utility class for the open sidebar container.
className	string	undefined	Additional CSS classes for styling the sidebar interior.

DocumentViewerDialog Props

Lightbox popup overlay configuration.

Prop	Type	Default	Description
trigger	ReactNode		The button or trigger element that launches the modal dialog.
url	string		Forwarded document source URL.
title	ReactNode	undefined	Forwarded document title.
children	ReactNode		Toolbar, Canvas, and Sidebar nodes rendered inside the modal.

PreviousDate Picker With Range NextFile Uploader