---
title: "Introducing neetoUI v6"
description:
  "Let's explore the exciting features and enhancements of neetoUI v6."
canonical_url: "https://www.bigbinary.com/blog/introducing-neeto-ui-v6"
markdown_url: "https://www.bigbinary.com/blog/introducing-neeto-ui-v6.md"
---

# Introducing neetoUI v6

Let's explore the exciting features and enhancements of neetoUI v6.

- Author: Goutham Subramanyam
- Published: February 22, 2024
- Categories: UI

### Introduction

[NeetoUI](https://neeto-ui.neeto.com/) is an open-source React component library
developed for [neeto](https://www.neeto.com/). It makes it easier to build
accessible and consistent UI in React applications. It is currently being used
in more than 20 Neeto products. In this blog post, we will explore the exciting
new features and enhancements of neetoUI.

### The Spark

Though we were using neetoUI across all our products, we had to avoid neetoUI in
certain products that followed a different UI style. For example,
[NeetoCode](https://neetocode.com/), a coding platform built by BigBinary, has
its own special design that is drastically different from the established
neetoUI style. So, while building the new landing page for NeetoCode, we also
had to create custom buttons and form elements that followed the NeetoCode
design.

Secondly, neetoUI only supported theme overrides. This means the users could
easily override the color scheme of neetoUI just by replacing the color
variables. But with NeetoCode, just updating the theme was not enough. From
button sizing to border radius and variants, every component was different in
the NeetoCode design system. That's when we realized that neetoUI requires even
more customization options to improve its adaptability.

### The Solution

To enhance the customizability of neetoUI, we planned to implement a set of
customization features similar to popular design systems like
[Bootstrap](https://getbootstrap.com/docs/5.3/customize/overview/) and
[Ant design](https://ant.design/docs/react/customize-theme). These features
would allow users to adapt the library to their unique design without
compromising on the core advantages of using neetoUI. Apart from the color
theming which neetoUI already supported, we also wanted to introduce component
styling and responsive typography to further advance the customizability of
neetoUI.

### The Execution

NeetoUI has more than 30+ components, and enhancing the customizability of those
components was not an easy task. We approached each component one by one and
refactored the respective styles to use CSS variables for all the properties.

Let’s take the example of the `Button` component from neetoUI. Earlie,r we could
only customize the colors used in the buttons. But with v6, we have made every
aspect of the button, like padding, border-radius, font size, etc. customizable.

Here is the list of variables used by the `Button` component.

**CSS**

```css
--neeto-ui-btn-padding-x: 8px;
--neeto-ui-btn-padding-y: 6px;
--neeto-ui-btn-font-size: var(--neeto-ui-text-sm);
--neeto-ui-btn-font-weight: var(--neeto-ui-font-medium);
--neeto-ui-btn-line-height: 16px;
--neeto-ui-btn-color: rgb(var(--neeto-ui-black));
--neeto-ui-btn-bg-color: transparent;
--neeto-ui-btn-border-width: 0;
--neeto-ui-btn-border-color: transparent;
--neeto-ui-btn-border-radius: var(--neeto-ui-rounded);
--neeto-ui-btn-gap: 4px;
--neeto-ui-btn-icon-size: 16px;
--neeto-ui-btn-box-shadow: none;
--neeto-ui-btn-outline: none;

// Disabled
--neeto-ui-btn-disabled-opacity: 0.5;

// Hover
--neeto-ui-btn-hover-color: rgb(var(--neeto-ui-black));
--neeto-ui-btn-hover-bg-color: transparent;
--neeto-ui-btn-hover-box-shadow: none;
--neeto-ui-btn-hover-opacity: 1;

// Focus
--neeto-ui-btn-focus-color: rgb(var(--neeto-ui-black));
--neeto-ui-btn-focus-box-shadow: none;
--neeto-ui-btn-focus-opacity: 1;

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

The users can now tweak each property of the Button component using these
variables and create their version of the component. You can see it in action,
[here](https://n53f9m.csb.app/).

![Button customization examples](https://www.bigbinary.com/blog/images/images_used_in_blog/2024/introducing-neeto-ui-v6/button-customization-example.png)

[![Edit in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/n53f9m?view=Editor+%2B+Preview&module=%2Fsrc%2Fstyles.scss&hidenavigation=1)

Likewise, we have updated all the components and the new
[neetoUI storybook](https://neeto-ui.neeto.com/) has examples on how to override
each component.

### The Result

With all the customization improvements, neetoUI v6 has been released to the
public. Just by changing a few CSS variables, you can now change the look and
feel of neetoUI at both the global and component levels to match your exact
design requirements.

![Button customization examples](https://www.bigbinary.com/blog/images/images_used_in_blog/2024/introducing-neeto-ui-v6/neeto-ui-v6-customization.gif)

Do visit this [page](https://mlxvmt.csb.app/) to understand the nuances of
neetoUI v6 up close.

We hope you have a clearer understanding of the improvements we have made to the
library. Do try it out and let us know your feedback.

## Links

- [Human page](https://www.bigbinary.com/blog/introducing-neeto-ui-v6)