Templates

Apply professional QR code styles instantly.

What Are Templates?

Templates combine colors, patterns, and visual styles into ready-to-use packages.

Available Templates

Default

Classic black and white.

import { QRCode } from 'qrdx';

<QRCode value="https://example.com" templateId="default" size={256} />

Arrow

Modern geometric design.

<QRCode value="https://example.com" templateId="Arrow" size={256} />

Standard Box

Clean, structured design.

<QRCode value="https://example.com" templateId="StandardBox" size={256} />

Square Border

Bordered design with defined edges.

<QRCode value="https://example.com" templateId="SquareBorder" size={256} />

Striked Box

Dynamic design with diagonal elements.

<QRCode value="https://example.com" templateId="StrikedBox" size={256} />

Halloween

Seasonal Halloween theme.

<QRCode value="https://example.com" templateId="Halloween" size={256} />

Customize Templates

Override template defaults:

<QRCode
  value="https://example.com"
  templateId="Arrow"
  fgColor="#your-brand-color"
  hideLogo={false}
  logo="/your-logo.png"
  size={512}
/>

Template Registry

Get All Templates

import { getAllTemplates } from 'qrdx';

const templates = getAllTemplates();

Get Template IDs

import { getTemplateIds } from 'qrdx';

const ids = getTemplateIds();
// Returns: ['default', 'Arrow', 'StandardBox', ...]

Custom Templates

Create your own templates:

const brandTemplate = {
  id: 'brand-template',
  name: 'Brand Template',
  colors: {
    fgColor: '#1a56db',
    bgColor: '#ffffff',
    eyeColor: '#0d47a1',
    dotColor: '#3b82f6'
  },
  bodyPattern: 'rounded',
  cornerEyePattern: 'rounded',
  cornerEyeDotPattern: 'rounded'
};

<QRCode
  value="https://example.com"
  customTemplate={brandTemplate}
  size={256}
/>

When to Use Templates

Brand Consistency — Ensure all QR codes match
Quick Setup — Get professional results fast
Seasonal Campaigns — Use themed templates
Batch Generation — Apply consistent styles

Template Selection Guide

Template	Best For	Mood
Default	Professional	Neutral
Arrow	Tech, modern	Dynamic
Standard Box	Corporate	Professional
Square Border	Formal	Structured
Striked Box	Marketing	Energetic
Halloween	Seasonal	Fun

Next Steps

Patterns — Detailed pattern customization
Colors & Gradients — Advanced colors
Logos — Add logos to templates

Templates

On this page