data@pdfcn-vue/key-value

KeyValue

Aligned label/value pairs for metadata blocks.

Installation

Terminal

npx shadcn-vue@latest add @pdfcn-vue/key-value

Example

<KeyValue :items="[{ label: 'Invoice', value: 'INV-2026-003' }]" />

Prop	Type	Default	Description
items	KeyValueItem[]	—	Label/value pairs.
columns	number	1	Column count for the pair grid.
labelWidth	number	—	Fixed label width in points.

The gallery uses a shared document. Change its theme in the theme builder to compare tokens.

KeyValue in a document

Rendered with Forme in your browser.

Browser render

Rendering the PDF…

Vue SFC → Uint8Array

Registry paths

Files installed under components/pdf.

Need the full template?

See blocks for invoices and reports composed from these primitives.