Components
Paper
A print-ready page surface with A4/A5 variants in portrait or landscape orientation.
Installation
- $npx litefy@latest add paper
- $pnpm dlx litefy@latest add paper
- $yarn dlx litefy@latest add paper
- $bun --bun litefy@latest add paper
Usage
Without a variant the paper renders as a full-width scrollable sheet that grows with its content. Pick one of the fixed print variants for paged documents: a4, a5, a4-landscape or a5-landscape.
Litefy UI
2026-08-31The paper is a print-ready page surface with a fixed A5 size and a page break after each sheet when printing.
import { Paper } from "@/ui";
export default function PaperBasicDemo() {
return (
<div className="w-full overflow-auto py-4">
<Paper>
<div className="flex items-baseline justify-between border-b pb-3">
<h3 className="text-lg font-semibold">Litefy UI</h3>
<span className="text-xs text-muted-foreground">2026-08-31</span>
</div>
<p className="mt-4 text-sm leading-6 text-muted-foreground">
The paper is a print-ready page surface with a fixed A5 size and a page break after each
sheet when printing.
</p>
<div className="mt-6 space-y-2">
<div className="h-2 w-3/4 rounded bg-muted" />
<div className="h-2 w-1/2 rounded bg-muted" />
<div className="h-2 w-5/6 rounded bg-muted" />
<div className="h-2 w-2/3 rounded bg-muted" />
</div>
</Paper>
</div>
);
}
API Reference
High-level Components
Paper
A print-ready page surface.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'a4' | 'a5' | 'a4-landscape' | 'a5-landscape' | - | Fixed paper size; omit for the default full-width scrollable sheet |
className | ClassNameValue | - | Custom CSS class |
...props | React.ComponentProps<"div"> | - | Supports all native div props |