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

```css
--neeto-ui-tab-wrapper-border-width: 2px;
--neeto-ui-tab-wrapper-border-color: rgb(var(--neeto-ui-gray-300));
--neeto-ui-tab-padding-x: 8px;
--neeto-ui-tab-padding-y: 12px;
--neeto-ui-tab-font-size: var(--neeto-ui-text-sm);
--neeto-ui-tab-font-weight: var(--neeto-ui-font-semibold);
--neeto-ui-tab-line-height: 1;
--neeto-ui-tab-color: rgb(var(--neeto-ui-gray-600));
--neeto-ui-tab-border-color: transparent;
--neeto-ui-tab-gap: 12px;
--neeto-ui-tab-icon-size: 16px;
--neeto-ui-tab-text-decoration: none;
--neeto-ui-tab-outline: none;

// Hover
--neeto-ui-tab-hover-color: rgb(var(--neeto-ui-gray-700));
--neeto-ui-tab-hover-text-decoration: none;
--neeto-ui-tab-hover-outline: none;

// Focus
--neeto-ui-tab-focus-color: rgb(var(--neeto-ui-gray-700));
--neeto-ui-tab-focus-text-decoration: none;
--neeto-ui-tab-focus-outline: none;

// Active
--neeto-ui-tab-active-color: rgb(var(--neeto-ui-gray-800));
--neeto-ui-tab-active-border-color: rgb(var(--neeto-ui-gray-800));
--neeto-ui-tab-active-text-decoration: none;
--neeto-ui-tab-active-outline: none;

// Focus Visible
--neeto-ui-tab-focus-visible-color: rgb(var(--neeto-ui-gray-800));
--neeto-ui-tab-focus-visible-outline: 3px solid rgba(var(--neeto-ui-primary-500), 50%);
--neeto-ui-tab-focus-visible-outline-offset: 1px;
--neeto-ui-tab-focus-visible-box-shadow: none;
```

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

```css
.neetix-tab {
  --neeto-ui-tab-active-color: rgb(var(--neeto-ui-primary-500));
  --neeto-ui-tab-active-border-color: rgb(var(--neeto-ui-primary-500));
}
```

#### Output
