> ## Documentation Index
> Fetch the complete documentation index at: https://mahmoud-b28887f9.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# KPdfViewer: render the active PDF page in Compose UI

> Render the active PDF page in your Compose UI using KPdfViewer. Reads zoom and page state from KPdfViewerState and displays a Material3-styled card surface.

`KPdfViewer` is the primary composable for displaying a PDF document. It reads the current rendered page and zoom level from a `KPdfViewerState` instance and paints that page inside a rounded `Card` surface styled with your app's `MaterialTheme` colors. You pass in state — `KPdfViewer` handles everything else.

## Signature

```kotlin theme={null}
@Composable
fun KPdfViewer(
    state: KPdfViewerState,
    modifier: Modifier = Modifier,
)
```

## Parameters

<ParamField path="state" type="KPdfViewerState" required>
  The shared state holder for the viewer. `KPdfViewer` collects `state.renderedPage` as a Compose state and recomposes whenever the active page or zoom level changes. Create this with `rememberPdfViewerState` in a Composable context.
</ParamField>

<ParamField path="modifier" type="Modifier" default="Modifier">
  Standard Compose modifier applied to the outer `Card`. Use it to set the size, padding, or weight of the viewer surface.
</ParamField>

## Visual behavior

`KPdfViewer` wraps the page content in a Material3 `Card` with:

* **Shape** — `RoundedCornerShape(24.dp)` on all corners.
* **Border** — 1 dp stroke using `MaterialTheme.colorScheme.outlineVariant`.
* **Background** — `MaterialTheme.colorScheme.surface`.

The inner `KPdfContent` composable fills the card completely and delegates gesture handling, panning, and zoom rendering to the state.

<Note>
  `KPdfViewer` does not control navigation or zoom directly. Call methods such as `state.nextPage()`, `state.zoomIn()`, or `state.goToPage(index)` on `KPdfViewerState` to drive the viewer.
</Note>

## Minimal usage

Create a `KPdfViewerState` with `rememberPdfViewerState`, then pass it to `KPdfViewer`.

```kotlin theme={null}
@Composable
fun PdfScreen(source: KPdfSource) {
    val viewerState = rememberPdfViewerState(source = source)

    KPdfViewer(state = viewerState)
}
```

## Usage with a modifier

Use `modifier` to size `KPdfViewer` within a layout. The example below makes the viewer fill all remaining vertical space inside a `Column`.

```kotlin theme={null}
@Composable
fun PdfScreen(source: KPdfSource) {
    val viewerState = rememberPdfViewerState(source = source)

    Column(modifier = Modifier.fillMaxSize()) {
        KPdfViewer(
            state = viewerState,
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f),
        )
    }
}
```

<Tip>
  Always pass a concrete size or weight to `KPdfViewer`. Without a constrained height, the outer `Card` has unbounded height and the page content may not render correctly.
</Tip>

## Connecting to a toolbar and thumbnail strip

`KPdfViewer`, `KPdfViewerToolbar`, and `KPdfThumbnailStrip` all share the same `KPdfViewerState`. Pass the same instance to each composable — no additional wiring is required.

```kotlin theme={null}
@Composable
fun FullPdfScreen(source: KPdfSource) {
    val viewerState = rememberPdfViewerState(source = source)
    var thumbnailsVisible by remember { mutableStateOf(true) }

    Column(modifier = Modifier.fillMaxSize()) {
        KPdfViewerToolbar(
            state = viewerState,
            isThumbnailStripVisible = thumbnailsVisible,
            onThumbnailToggle = { thumbnailsVisible = it },
            modifier = Modifier.fillMaxWidth().padding(12.dp),
        )

        KPdfViewer(
            state = viewerState,
            modifier = Modifier.fillMaxWidth().weight(1f),
        )

        if (thumbnailsVisible) {
            KPdfThumbnailStrip(
                state = viewerState,
                modifier = Modifier.fillMaxWidth().height(172.dp),
            )
        }
    }
}
```