components / docket
docket.
work order / docket — mono header with a reference, label-value rows, a slot for a stamp, and an optional tear-off stub below a perforation. detail-list renders the same pairs, but a docket is the document around them: numbered, marked, and torn. the notches are opaque circles in the page colour rather than a mask, because masking the card to cut real holes also masks the border.
work orderOJ-0042
received
rebuild the intake form
- job type
- build
- budget
- 1k – 5k
- by when
- no fixed date
- links
- figma, one loom walkthrough
keep this stub
installation
bunx @justin06lee/chrome@latest add docketprops
| name | type | default | description |
|---|---|---|---|
| reference | ReactNode | - | printed in the header, e.g. 'OJ-0042'. set in mono. |
| kind | ReactNode | - | small caps line opposite the reference — the document's kind. |
| mark | ReactNode | - | top-right slot in the body; a Stamp is the intended occupant. |
| title | ReactNode | - | |
| rows | DocketRow[] | - | { label, value }[] rendered as a real <dl>. |
| children | ReactNode | - | body content under the rows. |
| stub | ReactNode | - | content below the perforation; omit and no tear edge is drawn. |
| notchColor | string | '#000000' | colour showing through the notches — has to match whatever the docket sits on. |
| className | string | - |