@waysnx/ui-files

🤖 AI agents & LLMs: See LLM.md (shipped with this package) for a structured integration guide — PDFViewer and DocumentPreview components.

File and document viewing components for modern SaaS applications.

Provides PDF viewing and smart document preview with automatic type detection.

Installation

npm install @waysnx/ui-files

import '@waysnx/ui-files/dist/index.css';

Components

| Component | Description | |-----------|-------------| | PDFViewer | PDF viewer with page navigation and zoom | | DocumentPreview | Smart viewer — auto-detects PDF/image/video/audio/markdown/code |

Usage

import { PDFViewer, DocumentPreview } from '@waysnx/ui-files';

function App() {
  return (
    <>
      <PDFViewer src="/document.pdf" showToolbar />
      <DocumentPreview src="/report.pdf" type="pdf" height={500} />
    </>
  );
}

Theming

All components use --wx-adv-viewer-* CSS tokens:

:root {
  --wx-adv-viewer-bg: #ffffff;
  --wx-adv-viewer-border: rgba(0, 0, 0, 0.1);
  --wx-adv-viewer-radius: 12px;
  --wx-adv-viewer-toolbar-bg: #f8fafc;
  --wx-adv-viewer-toolbar-height: 44px;
}

Dark mode is automatic via [data-theme="dark"].

License

Apache-2.0 © WaysNX Technologies Private Limited