Components
Installation
$ pnpm dlx shadcn@latest add @pdfcn/takumi/shipping-label
Usage
import { ShippingLabelDocument } from "@/components/pdf/shipping-label";<ShippingLabelDocument
data={{
carrier: "UPS",
serviceLevel: "Ground",
trackingNumber: "1Z999AA10123456784",
from: {
name: "Acme Warehouse",
address: "100 Industrial Blvd",
city: "Seattle",
state: "WA",
zip: "98101",
},
to: {
name: "Jane Doe",
address: "456 Oak Ave, Apt 12",
city: "Portland",
state: "OR",
zip: "97201",
phone: "(503) 555-0142",
},
weight: "4.2 lbs",
dimensions: '12" x 8" x 6"',
handlingLabels: ["FRAGILE"],
accentColor: "#1d4ed8",
}}
/>With a carrier barcode image
Provide barcodeUrl to render a full-width barcode image instead of the QR code:
<ShippingLabelDocument
data={{
// ...
trackingNumber: "1Z999AA10123456784",
barcodeUrl: "https://example.com/barcodes/1Z999AA10123456784.png",
}}
/>Props
| Prop | Type | Description |
|---|---|---|
data | ShippingLabelData | Label content: addresses, carrier, tracking, and package details |
theme | PdfcnTheme | Optional theme override |