4 reasons to use Chakra UI in your next project
Mateusz Wójcik
Jan 19, 2021・4 min read
What is Chakra UI?
ChakraUI’s homepage states that it's a simple, modular, and accessible component library to let you build React apps with speed. After delivering a few projects where we used Chakra, I can agree with this description. Building UIs never was so fast and convenient.
You may already be familiar with libraries such as MaterialUI, Ant Design, or React Bootstrap. And you may be wondering why you need another UI library when you already have a big, battle-tested group of options to choose from. Well, Chakra stands out mainly because of its great built-ins, accessibility, and high customization.
The advantages of Chakra UI
Easily customizable
One of the most significant advantages of ChakraUI is that you can easily adjust it to your design needs. Usually, you start with your custom theme to specify things like colors, font sizes, breakpoints for responsive design, shadows, and many more! That alone gives you a lot of flexibility when creating advanced UIs, but that's not all.
Each component you use accepts a lot of different props which you can use to style it.
For example, let's take a look at a simple usage of the `<Button>` component in Chakra UI:
```jsx <Button colorScheme="teal" variant="outline" size="lg" isLoading={loading} loadingText="Loading"> Click me </Button>Using this bit of code, Chakra will render a button with styles provided in the theme.
But now, let's use a few props to change its style:
```jsx <Button colorScheme="red" variant="solid" size="md" isLoading={false}> Click me </Button>In this piece of code, we change the button’s color scheme to use a red color palette, and modify its variant to have a solid background. We also resize the button to medium and set isLoading to false.
Let's see. First, we change the button’s color scheme so that it will use a teal color palette. Next, we change its variant, so instead of the whole background, we only have a border. Then we make the entire button bigger. Besides styles, we can change the behavior of the button. When “isLoading” value is true, we hide the icon and display a loader that takes a few props. Both the icon and the loader are part of ChakraUI too!
If you ever used TailwindCSS, which is gaining popularity lately or Styled System, you may see some similarities. Tailwind is a set of CSS classes that you can use to compose components. On the other hand, Styled System and Chakra give you the whole component, but you can change particular styles using props. All of these solutions have a lot of fans and opponents. The latter mentions a big disadvantage: the code may lose readability due to many classes/props. Of course, it may be an issue, so it's essential to keep our components concise.
Dark mode support
The dark mode is becoming an integral part of our tech lives. We can use it on our smartphones, laptops, and of course websites. Although not every project would require you to implement dark mode, it's great that Chakra can simplify the process. By default, most of Chakra's components are dark mode compatible. You just need a little bit of config, and you are good to go! There is also the possibility of using system color mode, so if a user sets dark mode as default for their device, your website will automatically pick it up.
Easy RWD
ChakraUI supports responsive styles out of the box. You don't have to add media queries manually, ChakraUI provides object and array values to add responsive styles. It's worth noting that it uses “@media(min-width)” to ensure a mobile-first approach.
You can define your own breakpoints in theme config, or you can use default ones.
Let's take a look at how the implementation of responsiveness looks in a basic `<Text>` component:
```jsx <Text fontSize={["24px", null, "56px"]} textAlign={["center", null, "left"]}> Responsive Text </Text>Using the above snippet “<Text>” will have “24px” and be centered on all of the breakpoints.
Instead of a single value, we pass an array of values. Chakra will take “24px” from the “fontSize” prop and “center” from “textAlign” and use it for screen sizes between 0 and 30em (these are the default values in the theme config). Then notice “null” passed in: we don't want to change styles in the range from 30em to 48em (again, default breakpoints) so we pass null to avoid generating unnecessary CSS. In the last indexes of the arrays, we assign “56px” and “left” so our text will have this style for every screen size bigger than 48em.
Personally, I'm not a massive fan of this array notation. It makes it harder to find out which styles are applied to each breakpoint.
Fortunately, we can use the object syntax:
```jsx <Text fontSize={{ base: "24px", md: "56px" }} textAlign={{ base: "center", md: "left" }} > Responsive Text </Text>The syntax looks different, but the behavior stays the same.
Accessible
We can not stress enough the importance of accessibility. A considerable percentage of people experiences some kind of disability, so it's crucial to create accessible UIs. We usually have to implement a few WCAG guidelines, but luckily things like proper outlines and keyboard navigation are covered by Chakra. Of course, that's not all, and we still need to remember things like hierarchical heading structure or alts for images.
BONUS: Lately, ChakraUI added support for RTL languages. From now on, it's much easier to create components that should cover both RTL and LTR languages.
Conclusion
As you can see, ChakraUI proves to be modular and accessible. On top of that, it's also really small (375kB minified, 101kB minified, and gzipped, although you should remember that besides the core Chakra library you have to install Emotion). From my experience, it's one of the best component libraries for React!
If you’d like to know more about component libraries, or which one is best for your project, we’ll be happy to hear from you. Write to us at hello@start-up.house
Digital Transformation Strategy for Siemens Finance
Cloud-based platform for Siemens Financial Services in Poland
You may also like...
How we implemented SWR in a project and why we loved it
SWR, a React Hooks library for remote data fetching, provides a simple yet powerful solution for caching, revalidating, and retrieving data in React applications. Learn how SWR eliminates the complexities of managing state slices, speeds up development, and enhances UI performance. Explore examples of SWR implementation and discover its integrations.
Kamil Polok
Jun 09, 2021・6 min read
How to generate PDF from HTML in React / Node.js app
Generating PDFs from HTML can be a challenge, but with the right methods, you can achieve the desired results. Explore different solutions, from using CSS print rules to libraries like html2canvas, jsPDF, and Puppeteer. Understand the pros and cons of each approach to find the best solution for your project. Contact us at hello@start-up.house for more information and assistance. Good luck in your PDF generation endeavors!
Eugene Zolotarenko
May 20, 2021・6 min read
Business Intelligence Services & Solutions
Most organisations have more data than insight, and the gap is architectural rather than analytical. This guide explains how business intelligence services and solutions turn fragmented data into a strategic asset, and how modern BI differs from traditional reporting. It reviews industry-specific applications, provides a step-by-step implementation framework, and names the pitfalls that stall BI projects. The final sections cover AI-augmented analytics and how to future-proof a data strategy.
Alexander Stasiak
Jul 15, 2026・8 min read
AI Agents for Predictive Maintenance and Asset Reliability
How autonomous agents read vibration, thermal and acoustic data to predict failures weeks ahead — and act on them without waiting for a human.
Alexander Stasiak
Aug 29, 2026・9 min read
Why Knowledge Base Content Becomes Outdated
Your knowledge base was a source of truth once. Now it's a liability. Products have changed, teams have restructured, and the documentation your employees and customers rely on is silently giving wrong answers.
Alexander Stasiak
Mar 17, 2026・11 min read
AI Agents for Factory Workflow Optimization
How autonomous agents orchestrate the whole factory — resolving bottlenecks, scheduling maintenance and reallocating resources before output suffers.
Alexander Stasiak
Sep 28, 2026・8 min read
Recently added
How Startup House Cut Leasing Applications to 2 Minutes for Siemens Financial Services
Leasing used to mean paperwork, manual credit checks, and decisions that waited for office hours. For Siemens Financial Services Poland, Startup House replaced that with SimplyLease Online: an application customers complete in about 2 minutes and an automated credit decision delivered in about 7, at any hour. This case study shows how the platform was built within Siemens Group security standards, how it connects to Siemens systems and external data providers, and what a partnership running since 2016 has delivered. It closes with three lessons that apply to almost any financing or lending product.
Alexander Stasiak
Oct 06, 2026・5 min read
How a Cybersecurity Platform Serving Fortune 500 Clients Cut Onboarding by 95% with an AI Agent Built by Startup House
A cyber risk platform trusted by Fortune 500 companies had a familiar problem: customers respected it but opened it once a quarter, and onboarding took 45 minutes of guided setup. Startup House built Aria, an AI agent embedded inside the product, with a four-layer interface that serves board members, CFOs, and CISOs in one panel. Onboarding dropped by 95% to under 2 minutes, data exploration became fully self-serve, and the platform turned into a daily decision-support tool. This case study explains the interface, the tenant-isolation architecture, and why none of it required touching the platform's core codebase.
Marek Pałys
Oct 05, 2026・5 min read
AI and Digital Projects by Startup House: 5 Measurable Outcomes in Numbers
Claims are easy in software development, so this article sticks to numbers. It walks through five outcomes from Startup House client projects, from a 95% cut in onboarding time with an embedded AI agent to a 40% reduction in development costs for Omnipack. Each section says what kind of work produced the number and links to the public case study behind it. The closing section names three patterns these projects share, worth borrowing whether or not you work with us.
Alexander Stasiak
Oct 04, 2026・5 min read
Healthtech Software Development at Startup House: Compliance-First Projects and Results
In healthcare software, compliance is either an architecture decision or a retrofit. This article shows what designing it in from day one looks like across three Startup House projects: a sales platform for Siemens Healthineers active in more than 60 countries, a dementia care MVP shaped by 7 user testing sessions with patients and caregivers, and Doogie, a HIPAA-grade AI showcase built in 2 months. It also explains how RAG keeps clinical AI answers traceable to verified sources, and why patient data is never used to train models. For MedTech companies and health SaaS platforms, it is a practical look at what compliance-first engineering means beyond the label.
Marek Pałys
Oct 03, 2026・5 min read
Edtech Development at Startup House: What We've Built and What It Changed
EdTech platforms fail for UX reasons more often than technical ones: learners drop off, content doesn't scale, and ROI stays invisible. This article shows how Startup House avoids that with phased delivery and real user testing, using two projects as proof. Graspify went from a bold idea to a microlearning platform that trained hundreds of employees during a corporate event, and LITTLEWINE got an investor-ready scope from 10 user interviews in 2 weeks. It also covers AI learning tools that answer only from approved content and can go live in as little as 2 weeks.
Alexander Stasiak
Oct 02, 2026・5 min read
AI in Fintech: Startup House Projects, Lessons, and Outcomes
Fintech customers expect consumer-grade speed, while regulators expect bank-grade control. This article shows how Startup House has handled that tension in three projects: automated 24/7 credit decisions for Siemens Financial Services, a cyber risk platform that grew revenue 150% in a year, and a climate fintech team for CHOOOSE assembled in 2 weeks. Each project comes with the lesson it taught us. The article closes with five rules for AI in finance, from grounding every answer in verified data to designing tenant isolation into the architecture.
Marek Pałys
Oct 01, 2026・5 min read
Ready to centralize your know-how with AI?
Start a new chapter in knowledge management—where the AI Assistant becomes the central pillar of your digital support experience.
Work with a team trusted by top-tier companies.
