C&C Docs
Log in

cnc-qr

A styled QR code: dot shapes, corner treatments, colours and an optional logo in the middle. Everything is a property, so a branded code needs no image pipeline.

Quick start

Put the encoded text in value. The library is fetched from a CDN at mount, so the element is empty server-side and until that resolves. 

<cnc-qr value="https://dev.clickncode.com"></cnc-qr>

<cnc-qr
  value="https://dev.clickncode.com"
  dot-type="dots"
  dot-color="#0ea5e9"
  corner-square-type="extra-rounded"
></cnc-qr>

Usage guidance

Keep strong contrast between dot-color and background-color. The third example above is what insufficient contrast looks like — recognisably a QR code, and much harder for a camera. Dark dots on a light ground is the reliable combination.

Size it for the distance it will be scanned from. 128 pixels is fine on screen and small for print; a long value makes a denser code that needs more room, so shorten the URL rather than shrinking the code.

Reach for options only for settings the properties do not cover. It replaces them wholesale, so a partial options object loses the rest of your configuration.

← Back to Widgets