Print Layout

Utility

Print-optimized layout wrapper.

Preview

PrintLayout optimizes content for printing. Hides navigation, adjusts margins, and formats content for paper output.

This content is print-optimized

Usage

example.jsx

import { PrintLayout } from "@/components/ui/print-layout";

export default function Example() {
  return <PrintLayout />;
}

Source Code

Copy this file into components/ui/print-layout.jsx in your project.

print-layout.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const PrintLayout = forwardRef(({ className, children, ...props }, ref) => (
  <div ref={ref} className={cn("print:block print:bg-white print:text-black", className)} {...props}>
    <style>{`@media print { .no-print { display: none !important; } .print-only { display: block !important; } }`}</style>
    {children}
  </div>
));
PrintLayout.displayName = "PrintLayout";

export { PrintLayout };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge