> For the complete documentation index, see [llms.txt](https://docs.facefusion.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.facefusion.io/3.6.1/workshop/ui-component.md).

# UI Component

### 1. Create

Create a new example file:

```
facefusion/uis/components/example.py
```

### 2. Implement

Implement the basics of the UI component:

```python
from typing import Optional
import gradio

from facefusion.uis.typing import Update

EXAMPLE_IMAGE : Optional[gradio.Image] = None


def render() -> None:
	global EXAMPLE_IMAGE

	EXAMPLE_IMAGE = gradio.Image()


def listen() -> None:
	EXAMPLE_IMAGE.change(update, inputs = EXAMPLE_IMAGE, outputs = EXAMPLE_IMAGE)


def update() -> Update:
	return gradio.update()
```

### 3. Done

Finally, add the component:

```python
from facefusion.uis.components import example
```