# Custom advance

The **"Advanced Customization"** feature allows users to tailor the appearance and behavior of components using custom CSS classes and styles. This is a powerful tool designed for developers or web designers who require detailed customization to meet specific design needs.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FiN7wEbbHK64U5yffP3u6%2Fimage.png?alt=media&#x26;token=c2eb06ed-372c-42f4-9077-5fc3c21fc67f" alt=""><figcaption></figcaption></figure>

**1. Custom Classes**

**Purpose:** Users can add CSS classes to apply predefined styles from the project's CSS file.

**How to Use:**

* Enter class names separated by commas if adding multiple classes (e.g., `class1, class2`).
* These classes will be added to the component, triggering the corresponding styles.

**2. Custom CSS**

**Purpose:** Allows users to write CSS code directly to modify specific properties of a component without editing the original CSS file.

**How to Use:**

* Write CSS rules in the input box, such as:

  ```css
  overflow: hidden;
  display: block;
  background-color: #f3f3f3;
  ```
* These CSS rules will apply only to the selected component.

**3. Benefits of Advanced Customization**

* Enables developers to create unique designs without altering the default structure.
* Adjusts components to match specific design themes or branding.
* Simplifies testing changes without affecting the entire CSS codebase.

{% hint style="warning" %}
**Notes:**

* This feature requires basic knowledge of CSS.
* Avoid conflicts with existing CSS classes or rules.
* Test changes across multiple devices to ensure consistent performance and appearance.
  {% endhint %}