> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pnlight.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Remote UI components

> Add PNLight components to a Remote UI configuration and configure their supported properties.

Use Remote UI components when a standard Remote UI configuration does not provide the behavior you need. Add a component with `"type": "custom"` and its `custom_type` value.

This page lists every PNLight component that you can add to a Remote UI configuration.

## 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.

```json theme={null}
{
  "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.

<Tip>
  Preview the configuration in **Remote UI**, then test the placement in your app before you enable it for users.
</Tip>