Skip to content
Site volume
Colourway

Print kit

Die line

A box net with cut, fold and glue lines, for product crates and launches.

  • Experimental
  • Expressive layer
  • Server component
  • Since 0.9.0
  • Press check
Import from@maxgrits/overprint-react/print
On this page

A die line is the flat net a box is cut from: cut lines in the key ink, folds dashed in the second ink, the glue flap hatched. The front panel can carry the product's face in its own ink.

Example#

Look of this example
Live render of examples/die-line/basic.tsx

Usage#

Use a die line for packaging and product moments: a box net for a product launch, a crate's flattened shape. Cut lines are solid, folds are dashed in the second ink, glue flaps are hatched.

  • Net. box (the one net in v1), with w, d, h and flap in millimetres.
  • Face. face puts art on the front panel; faceInk tints it.
  • Dimensions. dims adds a dimension line and the cut and fold legend.

Layer and volume#

Art: aria-hidden, hidden at Quiet, shown from Studio. The dimension line and the cut and fold legend are decorative lettering at 12 px or more.

Anatomy#

The parts of examples/die-line/basic.tsx, numbered:
  1. CutSolid ink line..mk-die-line-cut
  2. FoldDashed in the second ink..mk-die-line-fold
  3. DimensionsDecorative, 12 px or more..mk-die-line-dims

Volume#

  • Quiet

    Hidden.

  • Studio

    Shown.

  • Press

    Shown.

  • Rave

    Shown.

Content#

  • Dimensions are decorative but true to the drawn net.

Do and don't#

Do

A net for a product moment.

Don't

A die line used as a border around a pricing table.

A die line as a frame.

Die lines mean packaging. As a border they read as a cut-out coupon, which a pricing table is not.

Accessibility#

  • Always aria-hidden: the product's name and size live in the reading text beside it.

Props#

PropTypeDefaultDescription
net"box"noneThe net (v1: a tuck-end box).
wnumbernonePanel width, depth and height, and the tuck flap, in mm (drawn 1 mm = 1 unit).
dnumbernone
hnumbernone
flapnumbernone
faceReactNodenoneSVG content for the front panel, in its own `w × h` box.
faceInkInkRefnoneThe front panel's ink (none by default).
dimsbooleannoneThe dimension line and the cut / fold legend.
childrenundefinednone

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from DieLineProps in packages/overprint-react/src/print/die-line.tsx.

Tokens#

System tokens (4)

Its own properties (1)

  • --mk-die-line-type

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

  • Minorfonts, reactEditionNumber, ProofSheet, DieLine, InkDrawdown and SwatchChip (with inkPairs, the ink's sanctioned pairs in a look), and the Halftone photo plate case. Read the whole entry