Starting from v6, neeto-ui supports enhanced customization of components using
CSS variables. These are the variables that are being used in the `Tree`
component.

```css
--neeto-ui-tree-checkbox-color: rgb(var(--neeto-ui-primary-500));
--neeto-ui-tree-checkbox-border-color: rgb(var(--neeto-ui-gray-300));
--neeto-ui-tree-checkbox-border-radius: var(--neeto-ui-rounded-sm);

// Hover
--neeto-ui-tree-checkbox-hover-border-color: rgb(var(--neeto-ui-gray-500));

// Checked
--neeto-ui-tree-checkbox-checked-border-color: rgb(var(--neeto-ui-primary-500));
--neeto-ui-tree-checkbox-checked-bg-color: rgb(var(--neeto-ui-primary-500));

// Drag Icon
--neeto-ui-tree-drag-icon-opacity: 0.4;

// Search Value
--neeto-ui-tree-search-value: #f50;
```

You can use these variables to customize the component to your liking. Here is
an example:

```css
.neetix-tree {
  --neeto-ui-tree-checkbox-color: rgb(var(--neeto-ui-success-500));
  --neeto-ui-tree-checkbox-checked-border-color: rgb(
    var(--neeto-ui-success-500)
  );
  --neeto-ui-tree-checkbox-checked-bg-color: rgb(var(--neeto-ui-success-500));
}
```

#### Output
