--- title: "Dev Discussions: Creating Fantastic User Interfaces with Esther Agbaje of Chakra UI | CoderPad" description: "One of the most significant benefits of using component libraries is that it’s easier to build accessibility into your application than pinning it on as an afterthought. Esther Agbaje of Chakra UI discusses creating fantastic user interfaces in this blog post." canonical: "https://coderpad.io/blog/development/user-interfaces-with-esther-agbaje-chakra/" last_modified: "2023-06-05 14:25:41" --- [Back to blog](https://coderpad.io/blog/) # Dev Discussions: Creating Fantastic User Interfaces with Esther Agbaje of Chakra UI June 6, 2022 5 Minute Read By Ken Swearengen [Development](https://coderpad.io/blog/development/) Scaling user interfaces (UI) is hard. While a simple application can be thrown together, there’s a surprisingly deep level of complexity once you grow. You need tests to validate functionality and consistency in UI elements across all app screens. And don’t forget to consider edge cases. When an application gets large enough, front-end teams will regularly reach for a UI component system to make development more streamlined. However, not all off-the-shelf tools are perfect for every scenario. Many teams end up writing their own UI component system to solve these problems. Unfortunately, building your own UI component system comes with its own set of challenges. CoderPad Developer Advocate Corbin Crutchley recently sat down with Developer Advocate Esther Agbaje of Chakra UI, an open-source component library, to discuss the challenges of making UI design systems that can scale. One of the most significant benefits of using component libraries is that it’s easier to build accessibility into your application than pinning it on as an afterthought. ## Learn how to run front-end developer interviews that don’t suck [Read our guide](https://coderpad.io/blog/interviewing/5-tips-for-interviewing-frontend/) ## The Importance of Accessibility in UI components Web accessibility is not a side issue or a nice-to-have. It’s essential for our modern digital lives. From making web pages readable for colorblind users to allowing pages to be easily translatable for readers whose first (or even second language) is not English, accessibility opens up the web experience for those traditionally excluded from it. However, it’s not only a case of “this is the morally right thing to do” – many countries also have legal requirements for creating accessible web pages. These requirements are often driven by the standards and specifications outlined in the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/#:~:text=Web%20Content%20Accessibility%20Guidelines%20(WCAG)%202%20is%20developed%20through%20the,%2C%20organizations%2C%20and%20governments%20internationally.) established by the Web Accessibility Initiative (WAI). While these guidelines attempt to make the accessibility process more manageable, it can be overwhelming for new developers or anyone unfamiliar with web accessibility. Things like right-to-left (RTL) text support, color contrast, and assistive technology support are just a few of the accessibility considerations developers have to contemplate while designing their sites and applications for accessibility. That’s where component systems like Chakra UI come in. One of the first points that Esther brought up was the accessibility of Chakra – Chakra wants to make design systems available for everyone to use, no matter their circumstances. It follows the [Web Accessibility Initiative’s Accessible Rich Internet Applications Suite](https://www.w3.org/WAI/standards-guidelines/aria/). This internet standard defines ways to make web applications more accessible for people with disabilities and across different cultures. Meeting the specifications for this standard is not easy, as Chakra had to consider how their application would work not only on various browsers but also across various languages. One example of this is Right-to-left (RTL) text support. Many of the world’s languages – Hebrew, Arabic, Persian, and Urdu, to name a few – are read from right to left rather than left to right, like with English and other European languages. UI developers often need to code these different language structures into their application, but with a plugin like Chakra UI, they can automatically flip the margin based on the language type. As Corbin has discussed previously with [accessibility expert Ben Myers](https://coderpad.io/blog/development/accessibility-with-ben-myers/), an excellent accessibility experience isn’t added like ice cream on the top of apple pie – it’s baked in like the cinnamon sprinkled in the apple filling itself. Using components that already have the accessibility standards baked into them, like Chakra’s components, not only improves the experience for users who have disabilities but also [for everyone else](https://www.policylink.org/resources-tools/curb-cut-effect#:~:text=The%20Curb%2DCut%20Effect%20is,we%20rise%20or%20fall%20together.). ## Advice for maintaining project documentation Open-source documentation can be challenging for many reasons: - Inconsistent contributions – getting people motivated to contribute, especially when you need it most during a new feature release or update, can be challenging. - Communication difficulties – you have a limited number of subject matter experts and contributors who may be working across multiple time zones and in various languages. - Inefficient processes – not having a thought-out formal process for how contributors should add to the documentation can prevent timely and regular updates. Esther and her team at Chakra UI ran into some of these obstacles. Initially, their documentation was in the same repository as their code base, but they were having trouble getting contributors to help with the documentation – the process of cloning the repo and then pushing documentation changes was too cumbersome. So they moved to have two separate repositories, one for the documentation and one for the Chakra UI code base. This not only helped get more people to contribute, but it also made translating the documentation into other languages a lot easier. Some other tips for overcoming those obstacles listed above: - Use a library to generate automatic changelogs every time your code is updated. Chakra UI used [Changesets](https://github.com/changesets/changesets). - Create a formal update and review process for your documentation. There is no one-size-fits-all approach, so you should tailor the process to what works best for your team of contributors and maintainers. - Similarly, do what you can to make it as easy as possible for contributors to update the documentation. ## Design advice: Popovers vs. Modals After discussing their documentation process, Corbin then asked Esther about a UI topic he had been thinking about recently – when do you use a popover versus a modal to notify a user within an application? Popovers and modals are tools to display information to the user. A popover is simply a box that pops up when you click on an element on the webpage. However, a popover still allows you to scroll up and down the page while the popover is active. On the other hand, a modal freezes scrolling until you click on an action on the modal. Esther recommends reserving modals for alert dialog where you want a user to take (or not take) a critical action or to inform them of something important before they continue scrolling. Popovers can be used for less urgent messages where a user’s action will have minimal impact on the future state of the application. For example, if a user wants to delete a vital piece of information from their account, such as a bank account number, this would call for a modal where a user has to confirm that they want to delete their bank account number. Everyday use for a popover would be linking users to a website for more information – for example, linking a form to a documentation page that explains what all the fields of the form are for. ## What’s next for Chakra UI? Corbin ended the interview by asking Esther what was next for Chakra UI. Esther mentioned that they completed their [first successful hackathon](https://hackathon.chakra-ui.com/) and had a whole list of initiatives to make the web development experience even easier for front-end developers. Among the things they’re working on now: - [React 18 support](https://coderpad.io/blog/development/how-to-upgrade-to-react-18/) - Improve color mode - Adding even more components, like pagination and carousels - Integration with web component API provider [Zag](https://zagjs.com/) If you’re looking for more information on how to use Chakra UI, you can start by checking out their web page [here](https://chakra-ui.com/). ## Subscribe for more CoderPad insights ## Trending Articles Previous slide Next slide [Development ## What is Prompt Engineering? Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post. Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development ## A Guide To Using React’s useCallback() Hook Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together. Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development ## MySQL vs. PostgreSQL: How Do They Compare? A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you. Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development ## PostgreSQL LIKE Operator: A Detailed Guide When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator. Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development ## How To Use DataProvider In TestNG With Examples When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG. Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development ## How To Get Up And Running With Django Migrations: A Guide Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects. Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development ## Writing A Parameterized Test In JUnit With Examples A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide. Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development ## How To Use Assert In JUnit With Examples The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples. Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development ## A Simple Guide To TypeORM: What It Is And How To Use It Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is. Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development ## Using PreparedStatement in JDBC With Examples In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code. Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development ## React vs React Native: The Differences Explained React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice. Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development ## Logging in Django The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article. Read the post](https://coderpad.io/blog/development/logging-in-django/) ## Hire with confidence. See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows. [Request a demo](https://coderpad.io/sales/)