Berkenalan dengan Chakra UI

3 min readMay 3, 2023

Mengenal apa itu Chakra UI, alasan untuk menggunakan, dan cara menggunakannya pada aplikasi React

Baca artikel versi bahasa inggris: https://up2dul.hashnode.dev/introduction-into-chakra-ui.

Apa itu Chakra UI?

Jika mengutip dari website resminya, maka ini definisinya:

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

Jadi bisa dibilang Chakra UI adalah salah satu library UI Component React yang sangat populer saat ini. Chakra UI menyediakan banyak komponen built-in yang siap pakai, sehingga ini menjadi solusi untuk yang tidak ingin membuat komponen React secara manual dari awal.

Ada beberapa pilihan library UI Component React yang lain seperti Material UI, Mantine, dan Ant Design, namun kita akan membahas mengenai Chakra UI kali ini dan bukan untuk membanding-bandingkannya.

Alasan untuk menggunakan Chakra UI

Built-in accessibility

Komponen-komponen Chakra UI sudah memenuhi kebutuhan untuk aksesibilitas seperti screen reader dan keyboard navigation. Lebih lanjut mengenai aksesibilitas website: https://chakra-ui.com/blog/the-beginners-guide-to-building-an-accessible-web.

Menyediakan banyak custom hooks

Dalam mengembangkan website menggunakan React, tentu saja kita selalu dihadapkan dengan situasi di mana kita membutuhkan custom hooks, nah Chakra UI sendiri menyediakan utility custom hooks yang sangat banyak, di antaranya adalah useBoolean, useClickOutside, dan useClipboard. Kita tidak perlu meng-install apapun lagi, kita hanya tinggal meng-import hooks yang kita mau dari '@chakra-ui/react'.

Komunitas yang aktif

Chakra UI memiliki komunitas developer yang aktif dan mendukung yang berkontribusi pada pengembangannya. Ini memudahkan untuk mendapatkan bantuan dan menemukan solusi ketika menemukan kendala saat menggunakan Chakra UI.

Mulai menggunakan Chakra UI

Pastikan kita sudah memiliki proyek aplikasi React, entah itu menggunakan CRA, Vite, atau framework seperti Next.js dan yang lainnya. Lalu buka terminal pada direktori aplikasi tersebut, dan kita install Chakra UI beserta beberapa library pendukungnya. Silakan gunakan npm, yarn, atau pnpm untuk meng-install-nya.

# menggunakan npm
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

# menggunakan yarn
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

# menggunakan pnpm
pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion

Setelah itu kita bisa tambahkan komponen provider dari Chakra UI ke root aplikasi, contohnya di sini adalah file bernama App.jsx pada folder src.

// ~/src/App.jsx
import { ChakraProvider } from '@chakra-ui/react';

const App = () => {
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  )
}

Atau jika menggunakan framework Next.js maka seperti ini:

// ~/pages/_app.jsx
import { ChakraProvider } from '@chakra-ui/react';

const MyApp = ({ Component, pageProps }) => (
  <ChakraProvider>
    <Component {...pageProps} />
  </ChakraProvider>
);

export default MyApp;

Jadi intinya, silakan sesuaikan dengan struktur folder proyek yang digunakan.

Setelah itu kamu bisa langsung menggunakan komponen dari Chakra UI, dengan meng-import-nya ke dalam page atau komponen lagi, untuk melihat daftar komponen yang ada, kamu bisa lihat di https://chakra-ui.com/docs/components. Contoh sederhananya seperti ini pada proyek aplikasi Next.js:

// ~/pages/index.jsx
import Head from 'next/head';
import {
  Box,
  Button,
  Heading,
  Text,
} from '@chakra-ui/react';

const Home = () => (
  <>
    <Head>
      <title>Hello Chakra UI</title>
      <meta name='description' content='Hello Chakra UI' />
      <link rel='icon' href='/favicon.ico' />
    </Head>
        
    <Box as='section' mt='40px' textAlign='center'>
      <Heading fontSize='4xl'>Hello world</Heading>
      <Text mt='4px'>
        Welcome to Chakra UI
      </Text>
      <Button mt='20px'>Button from Chakra</Button>
    </Box>
  </>
);

export default Home;

Maka hasilnya akan seperti ini:

Kesimpulan

Pada pembahasan kali ini, kita telah mengetahui apa itu Chakra UI, beberapa alasan untuk menggunakannya, dan cara menggunakannya. Selanjutnya kamu bisa mengeksplorasi komponen-komponen lainnya yang ada atau bahkan menerapkannya pada proyek yang sedang kamu kerjakan. Dengan dokumentasi yang jelas dan komunitas yang aktif baik itu dari developer-nya maupun dari penggunanya, maka tidak perlu ragu lagi untuk menggunakannya.