Package Box
A pure CSS 3D cardboard package box featuring interactive tape-splitting physics, flap-folding choreography, and an animated packing slip that rises out and turns to face the viewer.
Click or tap the box or button to unfold 3D flaps and reveal packing slip. Fully responsive on mobile.
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/package-box
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | undefined | Controlled open state of the package box |
| defaultOpen | boolean | false | Initial open state for uncontrolled usage |
| onOpenChange | (open: boolean) => void | undefined | Callback triggered when open state changes |
| children | ReactNode | undefined | Custom React elements to render inside the rising document paper |
| slip | PackageSlip | DEFAULT_SLIP | Structured metadata for the default shipping invoice / packing slip |
| maxWidth | number | 460 | Maximum width in px; the 3D scene scales down responsively |
| colors | PackageBoxColors | undefined | Color overrides for box cardboard, tape, paper, ink, and accent stamp |
| label | ReactNode | false | undefined | Custom shipping label or false to hide |
| symbols | ReactNode | false | undefined | Custom fragile/handling symbols or false to hide |
| tape | boolean | true | Whether packing tape across top and seam is rendered |
| hint | boolean | true | Whether to show the accessible toggle button below the box |
| openLabel | string | 'Click to open' | Accessible label when closed |
| closeLabel | string | 'Close' | Accessible label when open |
| reserveSpace | boolean | false | Whether to preserve full open height while closed to avoid layout shifts |
| className | string | '' | Optional CSS class names for outer wrapper |
| paperClassName | string | '' | Optional CSS class names for the document paper |