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

# Component configuration

> Learn how to configure your custom component package

The custom components workflow focuses on [convention over configuration](https://en.wikipedia.org/wiki/Convention_over_configuration) to reduce the number of decisions you as a developer need to make when developing your custom component. That being said, you can still configure some aspects of the custom component package and directory. This guide will cover how.

## The package name

By default, all custom component packages are called `gradio_<component-name>` where `component-name` is the name of the component's Python class in lowercase.

As an example, let's walkthrough changing the name of a component from `gradio_mytextbox` to `supertextbox`.

<Steps>
  <Step title="Modify the name in pyproject.toml">
    Update the `name` field in the `pyproject.toml` file:

    ```toml theme={null}
    [project]
    name = "supertextbox"
    ```
  </Step>

  <Step title="Change all occurrences in pyproject.toml">
    Change all occurrences of `gradio_<component-name>` to `<component-name>`:

    ```toml theme={null}
    [tool.hatch.build]
    artifacts = ["/backend/supertextbox/templates", "*.pyi"]

    [tool.hatch.build.targets.wheel]
    packages = ["/backend/supertextbox"]
    ```
  </Step>

  <Step title="Rename the backend directory">
    Rename the `gradio_<component-name>` directory in `backend/` to `<component-name>`:

    ```bash theme={null}
    mv backend/gradio_mytextbox backend/supertextbox
    ```
  </Step>
</Steps>

<Tip>
  Remember to change the import statement in `demo/app.py`!
</Tip>

## Top level Python exports

By default, only the custom component Python class is a top level export. This means that when users type `from gradio_<component-name> import ...`, the only class that will be available is the custom component class.

To add more classes as top level exports, modify the `__all__` property in `__init__.py`:

```python theme={null}
from .mytextbox import MyTextbox
from .mytextbox import AdditionalClass, additional_function

__all__ = ['MyTextbox', 'AdditionalClass', 'additional_function']
```

## Python dependencies

You can add Python dependencies by modifying the `dependencies` key in `pyproject.toml`:

```toml theme={null}
dependencies = ["gradio", "numpy", "PIL"]
```

<Tip>
  Remember to run `gradio cc install` when you add dependencies!
</Tip>

## JavaScript dependencies

You can add JavaScript dependencies by modifying the `"dependencies"` key in `frontend/package.json`:

```json theme={null}
"dependencies": {
    "@gradio/atoms": "0.2.0-beta.4",
    "@gradio/statustracker": "0.3.0-beta.6",
    "@gradio/utils": "0.2.0-beta.4",
    "your-npm-package": "<version>"
}
```

## Directory structure

By default, the CLI will place the Python code in `backend` and the JavaScript code in `frontend`. It is not recommended to change this structure since it makes it easy for a potential contributor to look at your source code and know where everything is.

However, if you did want to, this is what you would have to do:

<Steps>
  <Step title="Move the Python code">
    Place the Python code in the subdirectory of your choosing. Remember to modify the `[tool.hatch.build]` and `[tool.hatch.build.targets.wheel]` in the `pyproject.toml` to match!
  </Step>

  <Step title="Move the JavaScript code">
    Place the JavaScript code in the subdirectory of your choosing.
  </Step>

  <Step title="Add the FRONTEND_DIR property">
    Add the `FRONTEND_DIR` property on the component Python class. It must be the relative path from the file where the class is defined to the location of the JavaScript directory.

    ```python theme={null}
    class SuperTextbox(Component):
        FRONTEND_DIR = "../../frontend/"
    ```
  </Step>
</Steps>

<Warning>
  The JavaScript and Python directories must be under the same common directory!
</Warning>

## Best practices

Sticking to the defaults will make it easy for others to understand and contribute to your custom component. After all, the beauty of open source is that anyone can help improve your code!

But if you ever need to deviate from the defaults, you know how!


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.