Pack style

lvgl:
  pages:
    - id: component_preview
      bg_color: 0x08142D
      bg_opa: 100%
      widgets:
        - obj:
            id: qr_card
            x: 0
            y: 0
            width: 150
            height: 150
            scrollbar_mode: OFF
            bg_color: 0x070E1B
            bg_opa: 95%
            border_color: 0x162038
            border_width: 1
            border_opa: 20%
            radius: 12
            shadow_width: 0
            shadow_color: 0x8E9FB8
            shadow_opa: 0%
            widgets:
              - qrcode:
                  id: qr_code
                  x: 29
                  y: 29
                  width: 93
                  height: 93
                  text: 'MyNetwork123'
                  size: 93
                  bg_color: 0xFFFFFF
                  dark_color: 0x000000

150 × 150

Presets5

Layout3

Layout

Dimensions

Width

Height

QR Code Frame - ESPHome LVGL Display for ESP32

QR code with title and label. Share WiFi passwords, URLs, device info, or any text via scannable code. Label is separate from QR content.

Use the live preview to tweak parameters, then click Open in Designer to drop QR Code Frame into your project. The designer exports clean ESPHome LVGL YAML you can paste into any ESP32 firmware configuration - works with ILI9341, ST7789, ST7796, GC9A01 and other supported displays.

Related: qr, code, wifi, password, url, share, scan.

Available in Free Components pack

Need help with the YAML?

Step-by-step guide

Getting started with ESPHome + LVGL