A QR code for scanning tickets at the gate.
import { QRCode } from '@oztix/roadie-components/qr-code'
The default code is branded: square modules with the Oztix mark on a dark 5×5-module tile in the centre.
<div className='w-48'> <QRCode value='A7K2MKWX' aria-label='Ticket QR code' /> </div>
branded={false} renders a standard code with no mark and nothing cleared.
<div className='w-48'> <QRCode value='A7K2MKWX' branded={false} aria-label='Ticket QR code' /> </div>
children swaps the mark on the tile, the same way Navigator.Brand takes your own logo. The mark is drawn white in a 3.4-module square, so pass an <svg> with a viewBox, or an icon at size='100%', filled with currentColor. The tile and its size don't change, so a custom mark scans exactly like the Oztix one.
<div className='w-48'> <QRCode value='A7K2MKWX' aria-label='Ticket QR code'> <StarIcon weight='fill' size='100%' /> </QRCode> </div>
On the ticket, the code sits at the top at full width, with the ticket type under it and the ticket holder below a perforation. If a scan fails, gate staff look the ticket up by the holder's name.
The code's colours, module shape and tile size are fixed on purpose. Every styled option scored worse in scan testing, and the tile is sized in modules so a longer value never grows it into something a scanner mistakes for a finder pattern.
Do
Show the code as large as the layout allows, at least 160px wide on phones. Module size on screen decides how well it scans through blur and distance.
General admission
Don’t
Don't shrink it into a list row.
<div className='rounded-xl bg-raised p-4'><QRCode value={ticket.hash} /></div>
Do
The code carries its own white quiet zone, so it reads on any surface. Frame it on a light tile.
<div className='emphasis-strong intent-brand p-1'><QRCode value={ticket.hash} className='rounded-full' /></div>
Don’t
Don't crop the quiet zone, and don't sit it on a dark or brand surface without room around the white.
<QRCode value={ticket.hash} />
Do
Use the code as it renders. It's dark on white in light mode, dark mode and inside any intent.
<QRCode value={ticket.hash} className='[&_path]:fill-brand-11' />
Don’t
Don't recolour, round or space the modules. Rounded modules and mid blues both cost scans, and warm colours fail red-LED scanners.
Do
Use a bold, single-colour mark that inherits the white. The tile is already counted as lost, so the mark never affects scanning.
<QRCode value={ticket.hash}><img src='/logo.png' className='size-24' /></QRCode>
Don’t
Don't pass a photo, a full-colour logo or anything sized in pixels. It won't fit the tile's square or read against the dark tile.
role="img" and the default name "QR code". Pass a specific aria-label, such as "Ticket QR code for General admission".The text to encode, such as a ticket hash. Encoded as given at error correction level H.
Adds a mark on a 5×5-module tile in the centre. `false` renders a plain code.
Defaults to true.
The mark on the branded tile, drawn white in a 3.4-module square. Pass an `<svg>` with a `viewBox`, or an icon at `size='100%'`, filled with `currentColor`.
Defaults to <OztixMark />.