Remote UI components

Use Remote UI components when the standard configuration does not provide the behavior you need. Add a component with "type": "custom" and its custom_type value. This page covers the PNLight components you can add to a Remote UI configuration. Components marked as schema v3 require "schemaVersion": 3 in the Remote UI document. Components marked as schema v3 require "schemaVersion": 3 at the Remote UI document root.

Circular loader

pnlight.circular_loader displays a circular loading indicator in your Remote UI screen. Use it while your app or the screen loads content.

{
  "type": "custom",
  "custom_type": "pnlight.circular_loader",
  "width": { "type": "fixed", "value": 48 },
  "height": { "type": "fixed", "value": 48 },
  "custom_props": {
    "style": "large",
    "color": "#FF007AFF",
    "accessibility_label": "Loading"
  }
}

Property	Use
`style`	Set `medium` or `large`. The default is `medium`.
`color`	Set a `#RRGGBB` or `#AARRGGBB` color. The default follows the system label color.
`accessibility_label`	Set the label announced by assistive technology. The default is `Loading`.

Set the component size with its width and height fields. Use { "type": "wrap_content" } for either dimension when you want the loader to use its intrinsic size.

Progress bar

pnlight.progress_bar displays an animated linear progress bar. Use it for scan progress, onboarding completion, loading steps, or any Remote UI state where a filled bar should move smoothly between values.

{
  "type": "custom",
  "custom_type": "pnlight.progress_bar",
  "width": { "type": "match_parent" },
  "height": { "type": "fixed", "value": 10 },
  "custom_props": {
    "instance_id": "scan_progress_bar",
    "progress": 0,
    "progress_variable": "scan_progress",
    "animation_duration": 0.45,
    "track_color": "#FFE5E5EA",
    "fill_color": "#FF007AFF"
  }
}

Property	Use
`instance_id`	Set a stable ID for this bar. Use a unique value for each bar rendered at the same time.
`progress`	Set the target fill from `0` to `1`. Values outside this range are clamped.
`progress_variable`	Set a DivKit variable name that updates `progress` reactively.
`initial_progress`	Set the first rendered fill when you want the bar to animate in on appear.
`indeterminate`	Set `true` for a looping sliding band when progress is unknown.
`track_color`	Set the track color as `#RRGGBB` or `#AARRGGBB`.
`track_height`	Set the intrinsic thickness used when `height` is `wrap_content`.
`fill_color`	Set the fill color or the start color for a gradient.
`fill_color_end`	Set a second fill color to render a horizontal gradient.
`corner_radius`	Set the track and fill corner radius. The default is a pill shape.
`fill_inset`	Add spacing between the track bounds and the fill.
`animation_duration`	Set the seconds spent moving to a new value.
`indeterminate_duration`	Set the seconds for one indeterminate band pass.
`indeterminate_band_width`	Set the indeterminate band width as a fraction of the track width.
`reduced_motion`	Set `true` to apply values immediately without animation.
`accessibility_label`	Set the label announced by assistive technology. The value is announced as a percentage.

This is a schema v3 component. The Remote UI document must declare "schemaVersion": 3.

Animated number

pnlight.animated_number displays a number that counts between values. Use it for counters, savings amounts, progress summaries, or metrics that should update smoothly.

{
  "type": "custom",
  "custom_type": "pnlight.animated_number",
  "width": { "type": "match_parent" },
  "height": { "type": "wrap_content" },
  "custom_props": {
    "instance_id": "issues_count",
    "value": 0,
    "value_variable": "issues_found",
    "suffix": " issues found",
    "font_size": 28,
    "font_weight": "bold"
  }
}

Property	Use
`instance_id`	Set a stable ID for this number. Use a unique value for each number rendered at the same time.
`value`	Set the target number.
`value_variable`	Set a DivKit variable name that updates `value` reactively.
`initial_value`	Set the first rendered value when you want the number to count in on appear.
`decimals`	Set the number of fraction digits. The same value is used for minimum and maximum fraction digits.
`min_integer_digits`	Pad shorter numbers with leading zeroes.
`grouping`	Enable or disable thousands separators. The default is enabled.
`monospaced_digits`	Use tabular figures so the label does not jitter while counting.
`prefix`	Add text before the formatted number.
`suffix`	Add text after the formatted number.
`font_size`	Set the text size in points.
`font_weight`	Set `ultralight`, `thin`, `light`, `regular`, `medium`, `semibold`, `bold`, `heavy`, or `black`.
`text_color`	Set the text color as `#RRGGBB` or `#AARRGGBB`, or use the default adaptive text color.
`text_alignment`	Set `left`, `center`, `right`, or `natural`.
`animation_duration`	Set the seconds spent counting to a new value.
`curve`	Set `linear`, `ease_in`, `ease_out`, or `ease_in_out`.
`reduced_motion`	Set `true` to apply values immediately without counting.
`accessibility_label`	Set the label announced by assistive technology. The target value is announced as the element value.

This is a schema v3 component. The Remote UI document must declare "schemaVersion": 3.

Preview the configuration in Remote UI, then test the placement in your app before you enable it for users.

Progress bar (schema v3)

pnlight.progress_bar displays an animated progress indicator. Use it in schema v3 documents when a screen needs to show completion, scanning, loading, or another fractional state.

{
  "type": "custom",
  "custom_type": "pnlight.progress_bar",
  "width": { "type": "match_parent" },
  "height": { "type": "fixed", "value": 10 },
  "custom_props": {
    "instance_id": "scan_progress",
    "progress": 0.72,
    "initial_progress": 0,
    "fill_color": "#FF087EF5",
    "fill_color_end": "#FF34C759",
    "animation_duration": 1.4
  }
}

Property	Use
`instance_id`	Keeps the displayed progress stable if the Remote UI view re-renders.
`progress`	Sets the target progress from `0` to `1`.
`progress_variable`	Subscribes the component to a DivKit variable for progress updates.
`initial_progress`	Sets the first displayed value before the component animates to `progress`.
`indeterminate`	Shows a moving band instead of a fixed progress value.
`track_color`	Sets the track color.
`track_height`	Sets the minimum track height when the DivKit height is `wrap_content`.
`fill_color`	Sets the fill color.
`fill_color_end`	Adds a second color for a horizontal gradient fill.
`corner_radius`	Sets the track and fill corner radius.
`fill_inset`	Adds padding between the track and the fill.
`animation_duration`	Sets the progress animation duration in seconds.
`indeterminate_duration`	Sets the indeterminate animation duration in seconds.
`indeterminate_band_width`	Sets the width of the moving band as a fraction of the track.
`reduced_motion`	Disables the animation when set to `true`.
`accessibility_label`	Sets the accessibility label. The default is `Progress`.

For variable-driven progress, keep progress as the literal initial value and put the DivKit variable name in progress_variable.

Animated number (schema v3)

pnlight.animated_number displays a number that counts from its current value to a new target. Use it in schema v3 documents for counters, scan results, scores, and other numeric summaries.

{
  "type": "custom",
  "custom_type": "pnlight.animated_number",
  "width": { "type": "match_parent" },
  "height": { "type": "wrap_content" },
  "custom_props": {
    "instance_id": "items_scanned",
    "value": 1284,
    "initial_value": 0,
    "suffix": " items scanned",
    "font_size": 28,
    "font_weight": "bold",
    "text_alignment": "left",
    "animation_duration": 1.4
  }
}

Property	Use
`instance_id`	Keeps the displayed number stable if the Remote UI view re-renders.
`value`	Sets the target number.
`value_variable`	Subscribes the component to a DivKit variable for value updates.
`initial_value`	Sets the first displayed value before the component animates to `value`.
`font_size`	Sets the text size.
`font_weight`	Sets the text weight.
`text_color`	Sets the text color.
`text_alignment`	Sets `left`, `center`, `right`, or `natural` alignment.
`decimals`	Sets the number of decimal places.
`min_integer_digits`	Pads the integer part with leading zeroes.
`grouping`	Turns locale-aware digit grouping on or off.
`monospaced_digits`	Uses tabular digits to avoid visual jitter while counting.
`prefix`	Adds text before the number.
`suffix`	Adds text after the number.
`animation_duration`	Sets the count animation duration in seconds.
`curve`	Sets `linear`, `ease_in`, `ease_out`, or `ease_in_out`.
`reduced_motion`	Disables the animation when set to `true`.
`accessibility_label`	Sets the accessibility label.

For variable-driven counts, keep value as the literal initial value and put the DivKit variable name in value_variable.

Start here

SDK integration

Dashboard

Troubleshooting

Changelog

Circular loader

Progress bar

Animated number

Progress bar (schema v3)

Animated number (schema v3)

​Circular loader

​Progress bar

​Animated number

​Progress bar (schema v3)

​Animated number (schema v3)

Circular loader

Progress bar

Animated number

Progress bar (schema v3)

Animated number (schema v3)