Chakra UI vs Shadcn UI

#webdev #frontend #beginners #react

INTRODUCTION

UI components are used to make our lives as developers easier as we get access to re-usable components we can call in our projects. It gives us the ability to focus on what makes our application unique and still helps us to deliver stunning UI in the process.

In this article, we shall discuss about Chakra UI and Shadcn UI. Also, their differences, similarities and which to choose when building your project.

WHAT IS CHAKRA UI?

According to the official documentation:

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Chakra UI provides accessibility - as it follows the WAI-ARIA for all it's components, it is themeable - meaning you can customise it according to your preferences, it is composable and also has an active discord community.

Chakra UI is also open source and anyone can be a contributor.

WHAT IS SHADCN UI?

Shadcn UI provides components you can easily insert into your application. It is also customisable, themeable - uses Tailwind CSS utility classes, open source and accessible.

In order to extend a component's props, check out this issue.

Note: Shadcn UI is not a component library. This means it cannot be downloaded as a dependency using npm or yarn.

SIMILARITIES

Both Chakra UI and Shadcn supports reusable components and can be used with different frameworks like React, Gatsby, Next etc.

DIFFERENCES

Built with:

Chakra UI: Built with React

Shadcn UI: Built with Radix UI and Tailwind css

Responsive styles:

Chakra UI: Uses object or array notations to group related styles together as screen sizes changes.

<Text fontSize={{base:"md", md:"2xl", lg:"6xl"}}> Hello! </Text>

To pass in dynamic styling, you can use the following approach:


import React, { useState } from 'react'
import { Input } from '@chakra-ui/react'

export default function SimpleInput() {
    const [error, setError] = useState(true)
    return <Input variant="filled" borderColor={error ? 'red' : 'initial'} />
}

Shadcn UI: Uses a combination of tailwind css pseudo-classes.

<Input placeholder="Enter project name" className="text-sm md:text-2xl lg:text-6xl" />

To pass in dynamic styling, you can use the following approach:


import React, { useState } from 'react'
import { Input } from '@/components/ui/input'

export default function SimpleInput() {
    const [error, setError] = useState(true)
    return (
        <div>
            <Input
                placeholder="Enter project name"
                className={` w-[480px] ${error && 'border-red-700 focus-visible:ring-transparent'}`}
            />
        </div>
    )
}

CONCLUSION

While both are great for your project, it all depends on preference:

Shadcn UI is more styled based whereas Chakra UI is more interaction based.
Shadcn UI gives more flexibility and you only install what you need. Meanwhile, Chakra UI gives you all the available components after adding it as a dependency to your project.