✨ 8 components to become a React master 🧙‍♂️ 🪄
Tags: react, webdev, javascript, opensource
Published: 2023-10-16 05:47:29

# TL;DR
I have gathered React components you can use to build the ultimate website.

Each one of them has a unique use case!
Don't forget to star them 🌟
So let's do it!

![Let's do it](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxaa9vnqc8ye5a0g1iv2.gif)

<hr />

## 1. [Clickvote](https://github.com/clickvote/clickvote?utm_source=dev&utm_medium=react-component-expert) - Like, Upvote, And Review Any Context. 👑

[![Clickvote](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yn237newdjgm4uhl1p1.png)](https://github.com/clickvote/clickvote?utm_source=dev&utm_medium=react-component-expert)

Seamlessly Integrate Like Upvote and Review Components into Your App.

Render likes boxes, review boxes, and reaction components using this simple React code!

```jsx
import { ClickVoteProvider } from '@clickvote/react';
import { ClickVoteComponent } from '@clickvote/react';
import { LikeStyle } from '@clickvote/react';

<ClickVoteProvider>
    <ClickVoteComponent id={CONTEXT} voteTo={ID}>
        {(props) => <LikeStyle {...props} />}
    </ClickVoteComponent>
</ClickVoteProvider>
```

Star it here 🌟
[https://github.com/clickvote/clickvote](https://github.com/clickvote/clickvote?utm_source=dev&utm_medium=react-component-expert)

<hr />

## 2. [Novu](https://github.com/novuhq/novu) - Add in-app notifications to your app!

[![Novu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyb47s6sbh232x77f794.png)](https://github.com/novuhq/novu)


Simple components and APIs for managing all communication channels in one place: Email, SMS, Direct, and Push

You can add in-app notifications to your app with this React component

```jsx
import {
  NovuProvider,
  PopoverNotificationCenter,
  NotificationBell,
  IMessage,
} from "@novu/notification-center";

<NovuProvider
  subscriberId={"SUBSCRIBER_ID"}
  applicationIdentifier={"APPLICATION_IDENTIFIER"}
>
    <PopoverNotificationCenter colorScheme="dark">
        {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
     </PopoverNotificationCenter>
</NovuProvider>
```

Star it here 🌟
https://github.com/novuhq/novu

&nbsp;
&nbsp;

## 3. [CopilotKit](https://github.com/RecursivelyAI/CopilotKit) - Add autocompletion to your text with GPT!

[![CopilotKit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bvi730jwuggjti7peg8.png)](https://github.com/RecursivelyAI/CopilotKit)

A powerful & hackable copilot for any react app.
Get started in minutes & iterate ad infinitum.

A simple component that will auto-complete your content, just like you have on Gmail.

```jsx
import { CopilotTextarea } from "@copilotkit/react-textarea";
import { CopilotProvider } from "@copilotkit/react-core";

<CopilotProvider>
    <CopilotTextarea/>
</CopilotProvider>
```
Star it here 🌟
https://github.com/RecursivelyAI/CopilotKit

&nbsp;
&nbsp;


## 4. [Tolgee](https://github.com/tolgee/tolgee-platform) - Translate any context to any language!

[![Tolgee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbsuotaz842jjgaduqe3.png)](https://github.com/tolgee/tolgee-platform)

Smart platform, Fast integration, Painless localization.

A simple component that will translate any context to any language!

```jsx
import { TolgeeProvider, T } from "@tolgee/react";

<TolgeeProvider
  tolgee={tolgee}
  fallback="Loading..." // loading fallback
>
  <T keyName="translate_me">Translate me!</T>
</TolgeeProvider>
```
Star it here 🌟
https://github.com/tolgee/tolgee-platform

&nbsp;
&nbsp;

## 5. [Hanko](https://github.com/teamhanko/hanko) - Passkey authentication to your app!

[![Hanko](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j2aa3um0umgxskgau7u.png)](https://github.com/teamhanko/hanko)

Beautiful, customizable components, SDKs, and APIs to power your login and user management.

Add passkey authentication in 5 minutes! Here is the component:

```jsx
import { register } from "@teamhanko/hanko-elements";

const hankoApi = process.env.HANKO_API_URL;

register(hankoApi);

<hanko-auth />;
```

Star it here 🌟
https://github.com/teamhanko/hanko

&nbsp;
&nbsp;

## 6. [React Email](https://github.com/resendlabs/react-email) - The next generation of writing emails


[![React Email](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ga9lcps91gv78sdy6l62.png)](https://github.com/resendlabs/react-email)

A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.

A component to help you design and send emails!

```jsx
import { Button } from '@react-email/button';
import { Html } from '@react-email/html';

<Html lang="en" dir="ltr">
    <Button href="https://example.com">
        Click me
    </Button>
</Html>
```

Star it here 🌟
https://github.com/resendlabs/react-email

&nbsp;
&nbsp;

## 7. [React Flow](https://github.com/wbkd/react-flow) - The best way to create draggable workflows!

[
![React Flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqcjbtlg5d8hx69vtvaa.png)](https://github.com/wbkd/react-flow)

A highly customizable React component for building node-based editors and interactive diagrams

A simple component that will render drag and drop nodes for workflows.

```jsx
import ReactFlow, {
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
} from 'reactflow';

<ReactFlow
    nodes={nodes}
    edges={edges}
    onNodesChange={onNodesChange}
    onEdgesChange={onEdgesChange}
    onConnect={onConnect}
>
    <MiniMap />
    <Controls />
    <Background />
</ReactFlow>
```

Star it here 🌟
https://github.com/wbkd/react-flow

&nbsp;
&nbsp;

## 8. [Novel](https://github.com/steven-tey/novel) - The best WYSIWYG editor!

[
![React Flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dz1xewgmoc7htoq6d08b.png)](https://github.com/steven-tey/novel)

Notion-style WYSIWYG editor with AI-powered autocompletion.

A simple component that will render a notion style editor with tons of features!

```jsx
import { Editor } from "novel";

<Editor />
```

Star it here 🌟
https://github.com/steven-tey/novel

&nbsp;
&nbsp;

<hr />

Thank you all!
See you next week 😎