Hello Tech Enthusiasts! Welcome to the Mysterio Blogs!

Today we will be discussing some useful libraries and UI toolkits for working with React JS. You would love these resources for sure. I hope this blog would help you in your upcoming projects and increase your productivity.

Let's get started...

1 Mantine -

This one is my favorite as it provides a lot of things for React js such as color scheming, typographies, theming, form handlers, utilities, and components like buttons, input, and dropdowns. The best thing about this library is it provides inbuild react hooks like useCounter, useDebounce, useInterval, usePagination, and a lot more to help you save time writing the logic for your Apps.

Example -

// Pagination
import { Text, Pagination } from '@mantine/core';

function Demo() {
  return (
    <>
      <Text mb="xs">1 sibling (default)</Text>
      <Pagination total={20} siblings={1} defaultValue={10} />
    </>
  );
}

Sandbox -

That's how you easily you can create a pagination with memantine hooks and it has lots of customizable options like the total number of pages, how many sibling elements will be there, default value, range, etc.

Link - https://mantine.dev/

2 DaisyUi -

This is a UI Toolkit based on Tailwind CSS, it has inbuild components created with Tailwind CSS like buttons, dropdowns, avatars, inputs, carousel, badge, navbar, footer, etc, and also has other features like theming, colors, layout, and typography. If you are a Tailwind CSS lover, you would love this for sure.

Example -

// Normal Button
<button className="btn btn-primary">Primary</button>

// Outlined button
<button className="btn btn-outline btn-primary">Primary</button>

// Responsive button
<button className="btn btn-xs sm:btn-sm md:btn-md lg:btn-lg">Responsive</button>

// Dropdown
<div className="dropdown">
  <label tabIndex={0} className="btn m-1">Click</label>
  <ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

// Card
<div className="card card-compact w-96 bg-base-100 shadow-xl">
  <figure><img src="/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="Shoes" /></figure>
  <div className="card-body">
    <h2 className="card-title">Shoes!</h2>
    <p>If a dog chews shoes whose shoes does he choose?</p>
    <div className="card-actions justify-end">
      <button className="btn btn-primary">Buy Now</button>
    </div>
  </div>
</div>

Sandbox - https://codesandbox.io/p/sandbox/dry-wave-g9mj5v?embed=1"

Link - https://daisyui.com/

3 Radix UI -

This one is related to interactive components like dropdowns, scroll areas, accordions, popovers, and carousels with lots of customization like keyboard navigation for elements, and touch or click functions, which can be controlled or uncontrolled. But it doesn't have any stylings, it comes in plain HTML looks, you can use plain CSS or libraries like Tailwind CSS to style the components here.

Example -

// Collapsible element
import React from 'react';
import * as Collapsible from '@radix-ui/react-collapsible';
import { RowSpacingIcon, Cross2Icon } from '@radix-ui/react-icons';
import './styles.css';

const CollapsibleDemo = () => {
  const [open, setOpen] = React.useState(false);
  return (
    <Collapsible.Root className="CollapsibleRoot" open={open} onOpenChange={setOpen}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span className="Text" style={{ color: 'white' }}>
          @peduarte starred 3 repositories
        </span>
        <Collapsible.Trigger asChild>
          <button className="IconButton">{open ? <Cross2Icon /> : <RowSpacingIcon />}</button>
        </Collapsible.Trigger>
      </div>

      <div className="Repository">
        <span className="Text">@radix-ui/primitives</span>
      </div>

      <Collapsible.Content>
        <div className="Repository">
          <span className="Text">@radix-ui/colors</span>
        </div>
        <div className="Repository">
          <span className="Text">@stitches/react</span>
        </div>
      </Collapsible.Content>
    </Collapsible.Root>
  );
};

export default CollapsibleDemo;

Sandbox - https://codesandbox.io/p/sandbox/sweet-pascal-98d72d

Link - https://www.radix-ui.com/

4 TanStack -

It has lots of libraries for handling different tasks like TanStackQuery for Asynchronous tasks, TanStackTable for working with Tables, TanStackRouter for type-safe routings, TanStackForm for handling forms, etc.

Example -

// Fetching Data from API Using TanStack Query
function Todos() {
  const { isLoading, isError, data, error } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  })

  if (isLoading) {
    return <span>Loading...</span>
  }

  if (isError) {
    return <span>Error: {error.message}</span>
  }

  // We can assume by this point that `isSuccess === true`
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

As you can see how easy it is to fetch API data and set some states like loading, errors, etc automatically.

Link - https://tanstack.com/

5 Uiverse.io -

This one has inbuild components in plain HTML and CSS. It has some attractive and funky Design components which you can use in your Projects. But you have to convert the plain HTML into JSX to use it in your React Projects.