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

```css
--neeto-ui-kbd-font-size: var(--neeto-ui-text-sm);
--neeto-ui-kbd-font-weight: var(--neeto-ui-font-semibold);
--neeto-ui-kbd-color: rgb(var(--neeto-ui-gray-700));
--neeto-ui-kbd-bg-color: rgb(var(--neeto-ui-gray-200));
--neeto-ui-kbd-border-radius: var(--neeto-ui-rounded);
--neeto-ui-kbd-min-width: 24px;
--neeto-ui-kbd-height: 24px;
--neeto-ui-kbd-padding: 4px;
```

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

```css
.neetix-kbd {
  --neeto-ui-kbd-font-size: var(--neeto-ui-text-base);
  --neeto-ui-kbd-color: rgb(var(--neeto-ui-primary-800));
  --neeto-ui-kbd-bg-color: rgb(var(--neeto-ui-primary-100));
  --neeto-ui-kbd-border-radius: var(--neeto-ui-rounded-sm);
  --neeto-ui-kbd-min-width: 32px;
  --neeto-ui-kbd-height: 32px;
}
```

#### Output
