The react ecosystem is huge, thanks to the developer community.

Thousands of packages, libraries and frameworks make it so powerful.

Today, we are exploring 17 cool React projects that will be very useful for developers. I've also covered three awesome UI component libraries.

Let's jump in.

1. Tolgee - web-based localization platform.

Tolgee is an open source alternative to Crowdin, Phrase and Lokalise.

You can manage translations by using tolgee for translating texts, editing them in real-time and synchronizing them with your app.

Imagine you have a button in your app that says Submit. Instead of manually creating translations for Submit in different languages (like "Enviar" for Spanish), you add Tolgee to your app.

Instead of manually editing the large JSONs with lot of localization data, you can alt+click the button directly in your app and change its translation on the spot, without digging through code.

Get started with Tolgee React SDK by using this command.

npm i @tolgee/react

This is how you can use this.

// wrap your code with the tolgee provider

import { Tolgee, DevTools, TolgeeProvider, FormatSimple } from "@tolgee/react";

const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatSimple())
  .init({
    language: 'en',
    apiUrl: process.env.VITE_APP_TOLGEE_API_URL,
    apiKey: process.env.VITE_APP_TOLGEE_API_KEY,
  });

...

<TolgeeProvider
  tolgee={tolgee}
  fallback="Loading..." // loading fallback
>
  <App />
</TolgeeProvider>

// Use the T component to translate your texts

import { T } from "@tolgee/react";

export const Component = () => {
  return (
    <h1>
      <T keyName="translate_me">Translate me!</T>
    </h1>
  )
}

Check this sample app using Tolgee React SDK.

You can read the docs about react integration. It supports all the other frameworks like Angular, Vue, Svelte, Vanilla JS and Nextjs.

There are lots of features like:

-→ In-context Translation : translate them directly in the app with the Tolgee i18n tool.

-→ One-click screenshots : Click once to take a screenshot from your app with highlighted phrases to translate.

Tolgee has 1.7k stars on GitHub and growing strong.

Star Tolgee ⭐️

2. Mantine Hooks - react hooks for state and UI management.

How many times have you been stuck in writing hooks from scratch?
Well, I'm never going to do it from now on thanks to mantine hooks!

It's not efficient to write more code since you would end up maintaining it later so it's better to use these production-level hooks to make your work a lot easier.

Trust me, getting 60+ hooks is a big deal considering they have a simple way for you to see the demo of each of the hooks with easy docs to follow.

Get started with the following npm command.

npm install @mantine/hooks

This is how you can use useScrollIntoView as part of mantine hooks.

import { useScrollIntoView } from '@mantine/hooks';
import { Button, Text, Group, Box } from '@mantine/core';

function Demo() {
  const { scrollIntoView, targetRef } = useScrollIntoView<HTMLDivElement>({
    offset: 60,
  });

  return (
    <Group justify="center">
      <Button
        onClick={() =>
          scrollIntoView({
            alignment: 'center',
          })
        }
      >
        Scroll to target
      </Button>
      <Box
        style={{
          width: '100%',
          height: '50vh',
          backgroundColor: 'var(--mantine-color-blue-light)',
        }}
      />
      <Text ref={targetRef}>Hello there</Text>
    </Group>
  );
}

They almost have everything from local storage to pagination, to scroll view, intersection, and even some very cool utilities like eye dropper and text selection. This is damn too helpful!

You can read the docs.

They have more than 26.4k+ stars on GitHub. It's not only for the hooks because Mantine is a component library for React.

Star Mantine Hooks ⭐️

3. Aceternity UI - copy paste components for your website.

After Shadcn was appreciated in the developer community, we saw a surge of new component-based libraries. To be honest, we don't need 100 new libraries, but some definitely stood out.

Aceternity UI is one of them where you can copy paste the most trending components and use them in your websites without having to worry about styling and animations.

You can explore all the components.

I will discuss the top 4 that I really loved. These are animated but you can get the idea based on how they look.

✅ Floating dock: Useful as navigation, it does a clean animation when I hover over any icon.

✅ Lamp Section Header: Useful for separating sections and has a smooth transition of expanding based on scroll.

✅ GitHub Globe: The globe can be dragged. This was originally used on the GitHub website if you are curious.

✅ Animated Tooltip: Useful for showcasing authority and trust. You can use it to show people or organizations you work with.

You will find code, installation instructions, a CLI guide and even the description of props that are used within the code.

One thing I really loved is that a lot of components are keeping things simple, no fancy over-kill type stuff. You can read the docs.

This is the only project on the list that is not open source but definitely worth checking out.

Visit Aceternity UI 🔥

4. xyflow - to build node-based UIs with React.

XYFlow is a powerful open source library for building node-based UIs with React or Svelte. It is a mono repo and provides React Flow & Svelte Flow. Let's see more on what we can do with React flow.

You can watch this video to understand React Flow in 60 seconds.

Some of the features are available in pro mode, but the ones in the free tier are more than enough to make a very interactive flow. React flow is written in TypeScript and tested with Cypress.

Get started with the following npm command.

npm install reactflow

Here's how you can create two nodes, Hello & World, connected by an edge. The nodes have predefined initial positions to prevent overlap and we are also applying styling to ensure sufficient space for rendering the graph.

import ReactFlow, { Controls, Background } from 'reactflow';
import 'reactflow/dist/style.css';

const edges = [{ id: '1-2', source: '1', target: '2' }];

const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];

function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes} edges={edges}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

export default Flow;

This is how it looks. You can also add a label, change the type and make it interactive.

You can read the docs and see example React Flow apps for Create React App, Next.js and Remix.

React Flow comes with several additional plugin components which can help you to make more advanced apps with the Background, Minimap, Controls, Panel, NodeToolbar and NodeResizer components.

For instance, you may have noticed dots in the background on many websites. You can simply use the Background component in React Flow to implement that pattern.

import { Background } from 'reactflow';

<Background color="#ccc" variant={'dots'} />  // this will be under React Flow component. Just an example.

In case, you're looking for a quick article, I recommend checking React Flow - A Library for Rendering Interactive Graphs by Webkid.

It has 25k+ stars on GitHub.

Star xyflow ⭐️

5. cmdk - Fast, unstyled command menu React component.

This is a command menu React component that can also be used as an accessible combobox. You render items, and it filters and sorts them automatically. ⌘K (project name) supports a fully composable API so you can wrap items in other components or even as static JSX.

Get started with the following npm command.

pnpm install cmdk

This is how you can use this in general.

import { Command } from 'cmdk'

const CommandMenu = () => {
  return (
    <Command label="Command Menu">
      <Command.Input />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>

        <Command.Group heading="Letters">
          <Command.Item>a</Command.Item>
          <Command.Item>b</Command.Item>
          <Command.Separator />
          <Command.Item>c</Command.Item>
        </Command.Group>

        <Command.Item>Apple</Command.Item>
      </Command.List>
    </Command>
  )
}

You can read the docs about parts and styling.

You can see how you can change it based on the styling you want.

You should see the list of all the examples and the FAQs which answers a lot of important questions.

It has almost 9.7k stars on GitHub.

Star cmdk ⭐️

6. Magic UI - UI library for design engineers.

Magic UI is another component based library where you can copy and paste them into your apps. It's more focused on creating landing pages and user-facing marketing materials.

You can view all the components. Let's see the top 4 that I really loved:

✅ Bento grid : You can use this layout to showcase the features. This has a smooth animation.

✅ Interactive icon cloud : An interactive 3D tag cloud component with icons. Could be useful to showcase the tech stack or tools you work with.

✅ Animated grid pattern : Grid blocks that appear and disappear to showcase smooth animation.

✅ Particles : A fun way to add some visual flair to your website.

They have a lot of useful components since everyone has a different preference based on what they need.

Other than this, they also provide sample templates like Portfolio. Check the live preview.

Magic UI has 10.2k stars on GitHub which just shows how popular they are.

Star Magic UI ⭐️

7. React Content Loader - SVG-powered component to easily create skeleton loadings.

I often visit websites and there is nothing there (blank page). I know it's loading since I'm a developer, but not everyone can realize it.

That is why skeleton loaders are important, they give users a visual signal that something is happening, especially for the loading state.

This project provides you with an SVG-powered component to easily create placeholder loadings (like Facebook's cards loading).

Skeletons are often used during the loading state to indicate to users that content is still loading. Every developer should use this handy project to improve the overall UX of the app.

A few things that make this one better!

✅ Lightweight - less than 2kB and 0 dependencies for the web version.

✅ Feel free to change the colors, speed, sizes, and even RTL.

✅ It supports React Native with the common API and powerful features.

Get started with the following npm command.

npm i react-content-loader --save

This is how you can use it.

import React from "react"
import ContentLoader from "react-content-loader"

const MyLoader = (props) => (
  <ContentLoader 
    speed={2}
    width={400}
    height={160}
    viewBox="0 0 400 160"
    backgroundColor="#f3f3f3"
    foregroundColor="#ecebeb"
    {...props}
  >
    <rect x="48" y="8" rx="3" ry="3" width="88" height="6" /> 
    <rect x="48" y="26" rx="3" ry="3" width="52" height="6" /> 
    <rect x="0" y="56" rx="3" ry="3" width="410" height="6" /> 
    <rect x="0" y="72" rx="3" ry="3" width="380" height="6" /> 
    <rect x="0" y="88" rx="3" ry="3" width="178" height="6" /> 
    <circle cx="20" cy="20" r="20" />
  </ContentLoader>
)

export default MyLoader

The output of this is shown below.

You can even drag the individual skeleton or use pre-defined made for different socials like Facebook, and Instagram.

You can read the docs and see the demo.

The project has 13.7k+ stars on GitHub and is used by 50k+ developers on GitHub.

Star React Content Loader ⭐️

8. Tremor - React components to build charts and dashboards.

Tremor provides 20+ open source React components to build charts and dashboards built on top of Tailwind CSS to make visualizing data simple again.

Get started with the following npm command.

npm i @tremor/react

This is how you can use Tremor to build things quickly.

import { Card, ProgressBar } from '@tremor/react';

export default function Example() {
  return (
    <Card className="mx-auto max-w-md">
      <h4 className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
        Sales
      </h4>
      <p className="text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">
        $71,465
      </p>
      <p className="mt-4 flex items-center justify-between text-tremor-default text-tremor-content dark:text-dark-tremor-content">
        <span>32% of annual target</span>
        <span>$225,000</span>
      </p>
      <ProgressBar value={32} className="mt-2" />
    </Card>
  );
}

This will be generated based on the above code.

You can read the docs. Between, they use remix icons under the hood.

From the variety of components that I've seen, it's a good starting point. Trust me!

Tremor also provides a clean UI kit. How cool is that!

If you're looking for an alternative, you can check out Shadcn charts which are based on recharts.

Tremor has 16k+ stars on GitHub.

Star Tremor ⭐️

9. Victory - React components for building interactive data visualizations.

A lot of developers work on a lot of data these days (mostly using APIs). A method to easily visualize that data is a cool concept to take your app to the next level.

Victory is an ecosystem of composable React components for building interactive data visualizations.

Get started with the following npm command.

npm i --save victory

This is how you can use this.

<VictoryChart
  domainPadding={{ x: 20 }}
>
  <VictoryHistogram
    style={{
      data: { fill: "#c43a31" }
    }}
    data={sampleHistogramDateData}
    bins={[
      new Date(2020, 1, 1),
      new Date(2020, 4, 1),
      new Date(2020, 8, 1),
      new Date(2020, 11, 1)
    ]}
  />
</VictoryChart>

This is how it's rendered. They also offer animations and theme options, which are generally useful.

You can read the docs and follow the tutorial to get started. They provide around 15 different chart options and an insane customization under each of them, it's almost unbelievable!

It's also available for React Native (docs). Check FAQs if you want solutions to common problems with code and explanation such as styling, annotation (labels), handling axes.

Victory has 11k stars on GitHub.

Star Victory ⭐️

10. React Diagrams - a super simple, no-nonsense diagramming library written in React.

A flow & process orientated diagramming library inspired by Blender, Labview and Unreal engine.

Get started with the following npm command. You will then find a dist folder that contains all the minified and production ready code.

yarn add @projectstorm/react-diagrams

Let's see how we can use it.

import createEngine, { 
    DefaultLinkModel, 
    DefaultNodeModel,
    DiagramModel 
} from '@projectstorm/react-diagrams';

import {
    CanvasWidget
} from '@projectstorm/react-canvas-core';

We need to call createEngine which will bootstrap a DiagramEngine for us that contains all the default setups.

// create an instance of the engine with all the defaults
const engine = createEngine();

// creating two nodes
// node 1
const node1 = new DefaultNodeModel({
    name: 'Node 1',
    color: 'rgb(0,192,255)',
});
node1.setPosition(100, 100);
let port1 = node1.addOutPort('Out');

// node 2
const node2 = new DefaultNodeModel({
    name: 'Node 1',
    color: 'rgb(0,192,255)',
});
node2.setPosition(100, 100);
let port2 = node2.addOutPort('Out');

//we link the two ports of both of the nodes
// also add a label to the link
const link = port1.link<DefaultLinkModel>(port2);
link.addLabel('Hello World!');

We need to create a DiagramModel to contain everything, add all the elements to it and then add it to the engine.

const model = new DiagramModel();
model.addAll(node1, node2, link);
engine.setModel(model);

// we just need to render in react
<CanvasWidget engine={engine} />

You can read the docs and check the live demo.

The inspiration for this library is Joint JS (a fantastic library) and the need for rich HTML nodes, LabView, Blender Composite sub-system.

You can also find detailed info on how to make custom nodes and custom ports on the docs.

It has 8.7k stars on GitHub.

Star React Diagrams ⭐️

11. UI Layout - design that your website needs.

This is the third component-based library that I'm discussing apart from Acernity UI and Magic UI.

This is also a collection of reusable components, each with a bunch of examples in different styles.

You can see the list of all components. Let's cover the top 5 that I really loved.

✅ Video Masking : Creative video masking with various shapes, adding unique and artistic effects to images through custom cutouts. This looks insane!

✅ Blur Vignette : Apple Vision Pro like Blur Effect to use it in images, videos and cards. The background is a playing video.

✅ Noise effect : A noise effect component that adds a noise overlay to your website, with adjustable opacity for control.

✅ Spotlight Cards : a mouse-sensitive spotlight effect that highlights the border of the div or section as you move your cursor.

✅ Masonary Grid : An adaptive masonry grid component that arranges items in a dynamic, variable-height layout, similar to Unsplash.

If you need a structure for custom Talwind UI blocks (interested in coding from scratch), then I recommend checking out flowrift and flash UI.

UI Layout has 356 stars on GitHub and is definitely valuable for someone focusing on interface design.

Star UI Layout ⭐️

12. React Cosmos - Sandbox for developing and testing UI components in isolation.

React Cosmos is a powerful tool for developing and testing UI components in isolation. It allows you to focus on one component at a time, resulting in faster iteration and higher-quality components.

You can install it using this npm command for a nextjs project. You can also use it with Vite, React native or even a custom bundler.

npm i -D react-cosmos react-cosmos-next

It has all the features to make it a standard.

You can read the docs and check the live demo.

They have 8.3k stars on GitHub.

Star React Cosmos ⭐️

13. React Joyride - create guided tours in your apps.

Tours can be an excellent way to showcase your app to new users or explain the functionality of new features. It improves the user experience and can create a personalized touch.

Get started with the following npm command.

npm i react-joyride

This is how you can use it.

import React, { useState } from 'react';
import Joyride from 'react-joyride';

/*
 * If your steps are not dynamic you can use a simple array.
 * Otherwise you can set it as a state inside your component.
 */
const steps = [
  {
    target: '.my-first-step',
    content: 'This is my awesome feature!',
  },
  {
    target: '.my-other-step',
    content: 'This another awesome feature!',
  },
];

export default function App() {
  // If you want to delay the tour initialization you can use the `run` prop
  return (
    <div>
      <Joyride steps={steps} />
      ...
    </div>
  );
}

They also provide a list of components and an easy way to customize the default user interface.

You can read the docs and see the demo. You can also play with the live codesandbox.

They have 6.8k+ stars on GitHub and have more than 250k weekly downloads on the npm package.

Star React Joyride ⭐️

14. React Spring - spring physics based React animation library.

If you like react-motion but feel like your transitions aren’t smooth, it’s because it’s exclusively using React rendering.

If you like Popmotion but feel like you are limited by what you can do, it’s because it entirely skips React rendering.

react-spring gives both options, try it!

Get started with the following npm command.

npm i @react-spring/web

This is how you can import a higher-order component to wrap things up for animations.

import { animated } from '@react-spring/web'

// use it.
export default function MyComponent() {
  return (
    <animated.div
      style={{
        width: 80,
        height: 80,
        background: '#ff6d6d',
        borderRadius: 8,
      }}
    />
  )
}

I decided to try React Spring because of the below codesandbox. It's amazing how many things can we do with React Spring.

You can read the docs.

They also provide a lot of examples that you can learn from.

It provides an insane amount of options, such as useScroll, which allows you to create scroll-linked animations.

For instance, this codesandbox tells the usage of useScroll.

React Spring has around 28.1k stars on GitHub.

Star React Spring ⭐️

15. BlockNote - block-based rich text editor (Notion style) and extensible.

It's often said not to reinvent the wheel unless you're learning something new.

Blocknote is the open source react rich text editor. You can easily add a modern text editing experience to your app. Built on top of Prosemirror and Tiptap.

They have a lot of features as shown below.

You can easily customize the built-in UI Components, or create your custom Blocks, inline content and styles. If you want to go even further, you can extend the core editor with additional Prosemirror or TipTap plugins.

Other libraries are powerful but often have quite a steep learning curve and require you to customize every single detail of your editor. BlockNote instead, offers a great experience with minimal setup, including a ready-made and animated UI.

Get started with the following npm command.

npm install @blocknote/core @blocknote/react

This is how you can use this. With the useCreateBlockNote hook, we can create a new editor instance and then use the theBlockNoteView component to render it.

@blocknote/react/style.css is also imported to add default styling for the editor and the Inter font that BlockNote exports (optional).

import "@blocknote/core/fonts/inter.css";
import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
import "@blocknote/react/style.css";

export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote();

  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}

You can read the docs and the ui components that are available.

You should give it a try, especially because it includes a wide range of features like a 'slash' menu, smooth animations and the potential to create a real-time collaboration app.

They have also provided 20+ examples with the preview and code.

Blocknote has 6.5k stars on GitHub.

Star BlockNote ⭐️

16. Remotion - make videos using React.

Create real MP4 videos using React and scale your video production using server-side rendering and parametrization.

If you've seen GitHub wrapped for the last 2 years, it was made by the Remotion team.

Get started with the following command.

npx create-video@latest

It gives you a frame number and a blank canvas where you can render anything you want using React.

This is an example React component that renders the current frame as text.

import { AbsoluteFill, useCurrentFrame } from "remotion";
 
export const MyComposition = () => {
  const frame = useCurrentFrame();
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        fontSize: 100,
        backgroundColor: "white",
      }}
    >
      The current frame is {frame}.
    </AbsoluteFill>
  );
};

You can read the docs including the fundamentals.

Check the list of resources including templates, SAAS Starter kits, effects, examples and even full projects.

Also, check demo videos created during products and campaigns.

For instance, this was created with Remotion. Watch this!

You can watch the tutorial demo of Remotion by Fireship, their videos are just damn awesome :)

They have 20.5k stars on GitHub and are used by 2k+ developers.

Star Remotion ⭐️

17. MDX - Markdown for the component era.

MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts and embed them within your content.

In simple words, MDX can be explained as a format that combines markdown with JSX and looks as follows:

# Hello, world!

<div className="note">
  > Some notable things in a block quote!
</div>

The heading and block quote are markdown, while those HTML-like tags are JSX. MDX supports JavaScript expressions inside curly braces and also supports import/export statements as well. See the list of all components.

You can read the docs which explains the core concepts of MDX. Also, check playground if you're interested in the live demo.

MDX has 17k stars on GitHub and is used by 390k+ devs on GitHub.

Star MDX ⭐️

These react libraries can improve your game as a developer.

Some can save hundreds of hours while others on this list can help you improve user experience. That's it for now.

Have a great day! Till next time.

If you loved this, please follow me for more :)

Follow Tolgee for more content like this.

Tolgee Follow

Tolgee is an open-source developer tool for web apps localization 🐁