UI Libraries Terbaik React.js

React.js merupakan salah satu library javascript yang sedang populer dan digunakan untuk membangun UI untuk web application, mobile application hingga desktop application. Untuk mempermudah membangun UI yang interaktif yang kompleks dengan cepat dibutuhkan UI Libraries yang handal dan flexible, berikut beberapa rekomendasi UI Libraries terbaik dari kami:

1. TailwindCSS

Tailwind CSS adalah sebuah utility-first framework CSS yang mengutamakan penggunaan kelas utilitas untuk membangun tampilan UI dengan fleksibilitas tinggi.

Install tailwind css menggunakan npm, setelah proses ini berhasil maka tailwind akan menggenerate file tailwind.config.js.

npm install -D tailwindcss
npx tailwindcss init

npm install -D tailwindcss
npx tailwindcss init

Tambahkan path

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Tambah tailwind directives pada global CSS-mu.

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

Mulailah gunakan tailwind css utility-classes untuk styling content-mu.

App.js

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      <span className="font-semibold">Hello world!</span>
    </h1>
  );
}

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      <span className="font-semibold">Hello world!</span>
    </h1>
  );
}

2. Ant Design

Ant Design adalah sebuah UI library yang digunakan untuk membangun UI tingkat enterprise untuk web application. Ia memiliki design language sendiri yang digunakan secara luas dalam produk-produk Ant Financial.

Untuk bisa menggunakan Ant Design kita harus melakukan instalasi, jalankan command berikut pada terminal.

npm install antd

npm install antd

Setelah berhasil install, kamu dapat menggunakan berbagai macam component dan utility yang disediakan Ant Design

App.js

import React from "react";
import { DatePicker } from "antd";
 
const App = () => {
  return <DatePicker />;
};
 
export default App;

import React from "react";
import { DatePicker } from "antd";
 
const App = () => {
  return <DatePicker />;
};
 
export default App;

Kamu dapat explore component lainnya pada link berikut

3. Mantine

Mantine adalah libraries component React yang gratis dan sumber terbuka yang menyediakan 134 component React yang responsif sepenuhnya untuk 25 kategori berbeda seperti navbar, blog card, comment, slider, dan lainnya.

Kamu bisa install mantine dengan menggunakan command berikut.

npm install @mantine/core @mantine/hooks @emotion/react

npm install @mantine/core @mantine/hooks @emotion/react

Langkah berikutnya, wrap MantineProvider pada root component.

App.js

import { MantineProvider } from "@mantine/core";
 
function App() {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}
 
export default App;

import { MantineProvider } from "@mantine/core";
 
function App() {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}
 
export default App;

Kamu dapat menggunakan component mantine sebagai berikut.

App.js

import { Button } from "@mantine/core";
 
function Demo() {
  return <Button>Click me!</Button>;
}

import { Button } from "@mantine/core";
 
function Demo() {
  return <Button>Click me!</Button>;
}

Jika ingin tahu lebih lanjut silakan kunjungi link berikut untuk mengenal mantine lebih lanjut.

4. Radix UI

Radix UI adalah kumpulan component tanpa styling bawaan yang dapat digunakan untuk membangun sistem desain dan aplikasi web berkualitas tinggi pada React.

Install seluruh component dari radix ui menggunakan command berikut.

npm install @radix-ui/react-popover@latest -E

npm install @radix-ui/react-popover@latest -E

Berikut salah contoh membuat sebuah component popover based on radix ui.

PopoverDemo.js

import * as React from "react";
import * as Popover from "@radix-ui/react-popover";
 
const PopoverDemo = () => (
  <Popover.Root>
    <Popover.Trigger>More info</Popover.Trigger>
    <Popover.Portal>
      <Popover.Content>
        Some more info…
        <Popover.Arrow />
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);
 
export default PopoverDemo;

import * as React from "react";
import * as Popover from "@radix-ui/react-popover";
 
const PopoverDemo = () => (
  <Popover.Root>
    <Popover.Trigger>More info</Popover.Trigger>
    <Popover.Portal>
      <Popover.Content>
        Some more info…
        <Popover.Arrow />
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);
 
export default PopoverDemo;

5. MUI (Material UI)

MUI (Material-UI) adalah UI framework untuk React yang mengikuti prinsip desain Material Design. MUI menyediakan component-component siap pakai dan utilitas yang memudahkan pengembangan web application yang menarik dan konsisten.

Agar dapat menggunakan MUI install menggunakan command berikut.

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

Tambahkan Roboto Font.

npm install @fontsource/roboto

npm install @fontsource/roboto

kemudian import dalam global CSS.

global.css

import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

Berikut contoh penggunaan button component.

MyApp.js

import * as React from "react";
import Button from "@mui/material/Button";
 
export default function MyApp() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  );
}

import * as React from "react";
import Button from "@mui/material/Button";
 
export default function MyApp() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  );
}

Kamu dapat melihat contoh project lain pada link berikut.

6. Chakra UI

Chakra UI adalah sebuah UI library component yang populer dan sering digunakan oleh pengembang React untuk merancang component, selain itu Chakra UI bersifat open source.

Untuk memulai instalasi jalankan command berikut.

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

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

Setup ChakraProvider pada root component.

App.js

import * as React from "react";
 
// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/react";
 
function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  );
}

import * as React from "react";
 
// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/react";
 
function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  );
}

Berikut contoh AlertDialog component.

AlertDialogExample.js

import React from "react";
 
import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogContent,
  AlertDialogOverlay,
  AlertDialogCloseButton,
} from "@chakra-ui/react";
 
function AlertDialogExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const cancelRef = React.useRef();
 
  return (
    <>
      <Button colorScheme="red" onClick={onOpen}>
        Delete Customer
      </Button>
 
      <AlertDialog
        isOpen={isOpen}
        leastDestructiveRef={cancelRef}
        onClose={onClose}
      >
        <AlertDialogOverlay>
          <AlertDialogContent>
            <AlertDialogHeader fontSize="lg" fontWeight="bold">
              Delete Customer
            </AlertDialogHeader>
 
            <AlertDialogBody>
              Are you sure? You can't undo this action afterwards.
            </AlertDialogBody>
 
            <AlertDialogFooter>
              <Button ref={cancelRef} onClick={onClose}>
                Cancel
              </Button>
              <Button colorScheme="red" onClick={onClose} ml={3}>
                Delete
              </Button>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>
    </>
  );
}

import React from "react";
 
import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogContent,
  AlertDialogOverlay,
  AlertDialogCloseButton,
} from "@chakra-ui/react";
 
function AlertDialogExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const cancelRef = React.useRef();
 
  return (
    <>
      <Button colorScheme="red" onClick={onOpen}>
        Delete Customer
      </Button>
 
      <AlertDialog
        isOpen={isOpen}
        leastDestructiveRef={cancelRef}
        onClose={onClose}
      >
        <AlertDialogOverlay>
          <AlertDialogContent>
            <AlertDialogHeader fontSize="lg" fontWeight="bold">
              Delete Customer
            </AlertDialogHeader>
 
            <AlertDialogBody>
              Are you sure? You can't undo this action afterwards.
            </AlertDialogBody>
 
            <AlertDialogFooter>
              <Button ref={cancelRef} onClick={onClose}>
                Cancel
              </Button>
              <Button colorScheme="red" onClick={onClose} ml={3}>
                Delete
              </Button>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>
    </>
  );
}