✨11 React Components to Become a Pro 🦃🍁 🥧
Tags: webdev, javascript, react, opensource
Published: 2023-11-21 14:11:00

## TL;DR
"Reactsgiving" is upon us 👨‍🌾

I have harvested the finest React components you can use to build a powerful web app.

Each has its own flavor.
Don't forget to show your support 🌟

Now, let's gobble up this code! 🍽️


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2p4508nvzg74qd060lx.gif)


---

## 1. [CopilotPortal](https://github.com/RecursivelyAI/CopilotKit): Embed an Actionable GPT-Chatbot Into Your web-app. 



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0s5nodilnbgy2myna6ny.png)
Insert a GPT-powered chatbot into your react app.

Can integrate and RAG with cloud & app state in realtime. 

Takes a few lines of code to embed.  

```tsx
import "@copilotkit/react-ui/styles.css";
import { CopilotProvider } from "@copilotkit/react-core";
import { CopilotSidebarUIProvider } from "@copilotkit/react-ui";

export default function App(): JSX.Element {
  return (
  <CopilotProvider chatApiEndpoint="/api/copilotkit/chat">
      <CopilotSidebarUIProvider>

        <YourContent />

      </CopilotSidebarUIProvider>
    </CopilotProvider>
  );
}
```

{% cta https://github.com/RecursivelyAI/CopilotKit %} Star CopilotPortal⭐️ {% endcta %}



---


## 2. [ClickVote](https://github.com/clickvote/clickvote) - Like, Upvote, And Review Any Context



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xubftfmy9xum98zjgv5m.png)


Easily Add Upvotes, Likes and Reviews into Your Web-App.

Simple react code for adding these components. 



```tsx
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>
```

{% cta https://github.com/clickvote/clickvote %} Star ClickVote ⭐️ {% endcta %}


---

## 3. [React Flow](https://github.com/xyflow/xyflow) - The best way to create draggable workflows!



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hy0bsacbfzctin4r7tq.png)

A React component tailor-made for constructing node-based editors and interactive diagrams. 

Highly customizable, it offers drag-and-drop capabilities for efficient workflow creation.

```tsx
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> 
```
{% cta https://github.com/xyflow/xyflow %} Star React Flow ⭐️ {% endcta %}

---

## 4. [CopilotTextarea](https://github.com/RecursivelyAI/CopilotKit/tree/main/CopilotKit/packages/react-textarea) - AI-powered Writing in React Apps


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uye8z6aac1015iiqd3lk.png)

A drop-in replacement for any react `<textarea>` with the features of Github CopilotX. 

Autocompletes, insertions, edits.

Can be fed any context in real time or by the developer ahead of time.


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


// Provide context...
useMakeCopilotReadable(...)

// in your component...
<CopilotProvider>
    <CopilotTextarea/>
</CopilotProvider>`
```

{% cta https://github.com/RecursivelyAI/CopilotKit %} Star CopilotTextarea ⭐️ {% endcta %}

---

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



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c81fkg15xucqbyg4xctt.png)

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.

```tsx
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>
```


{% cta https://github.com/novuhq/novu %} Star Novu ⭐️ {% endcta %}

---

## 6. [ReactIcons](https://github.com/react-icons/react-icons) - Collection of the most Popular react Icons



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1sj51u7omogoa5v7di6.png)

Easily add popular icons from Font Awesome, Material Design, and more to your React app. 

A simple, vast selection for developers.

```tsx
import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      Lets go for a <FaBeer />?
    </h3>
  );
}
```

{% cta https://github.com/react-icons/react-icons
 %} Star ReactIcons ⭐️ {% endcta %}

---


## 7. [React-dropzone](https://github.com/react-dropzone/react-dropzone) - add HTML5 drag & drop UI. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apr4lbjc1i0glbs0kize.png)

Straightforward React hook for implementing an HTML5 drag-and-drop zone, focusing on file interactions. 

It provides an easy-to-use interface for adding file drag-and-drop capabilities to React applications.

```ts
import React from 'react';
import {useDropzone} from 'react-dropzone';

const Basic = (props)=>{
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();

  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <section className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}

export default Basic;
```

{% cta https://github.com/react-dropzone/react-dropzone %} Star ReactDropzone ⭐️ {% endcta %}

---


## 8. [React ChartJS 2](https://github.com/reactchartjs/react-chartjs-2) - Create and integrate diverse charts.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k820fg3ep6cocfukqdny.png)

A plug-and-play solution for charting within React applications, akin to Chart.js capabilities.

Enables dynamic, interactive charting.

Adaptable to real-time data or predefined datasets.


```tsx
import React from 'react';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Doughnut } from 'react-chartjs-2';

ChartJS.register(ArcElement, Tooltip, Legend);

const data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
       
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        
      ],
      borderWidth: 1,
    },
  ],
};

export default function ShowChart() {
  return <Doughnut data={data} />;
}
```

{% cta https://github.com/reactchartjs/react-chartjs-2 %} Star ReactChart ⭐️ {% endcta %}


## 9. [Redux](https://github.com/reduxjs/redux) - predictable state container library


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7iv2maik6xq4w5yl21y.png)



A seamless addition to Redux in JavaScript applications, providing reliable state management.

Ensures consistent app behavior.

Facilitates easy debugging and testing.

Integrates with various libraries.


{% cta https://github.com/reduxjs/redux %} Star ReactRedux ⭐️ {% endcta %}

---
## 10. [Blueprint](https://github.com/palantir/blueprint) - dense UI library by Palantir


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/176noa7v8f25ll0jixqn.png)

Provides a set of components and styles for creating complex and data-rich interfaces. 

design and develop desktop-like web applications with a modern look and feel.

Developed by Palantir


```tsx
import React from 'react';
import '@blueprintjs/core/lib/css/blueprint.css';
import { H3, H4, OL, Pre } from "@blueprintjs/core";

function App() {
  return (
    <div style={{ display: 'block', width: 500, padding: 30 }}>
      <h4>ReactJS Blueprint HTML Elements Component</h4>
      Heading Component:
      <H4>H4 Size Heading</H4>
      <H3>H3 Size Heading</H3>
      <br></br>
      OrderList Component:
      <OL>
        <li>1st item</li>
        <li>2nd item</li>
      </OL>
      Pre Component:
      <Pre>Sample Pre</Pre>
    </div>
  );
}
```

{% cta https://github.com/palantir/blueprint %} Star BluePrint ⭐️ {% endcta %}

---

## 11. [Headless UI](https://github.com/tailwindlabs/headlessui) - Accessible Tailwind-integrated UI components.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vsxfiivef7du8u3g5i5l.png)

Create accessible UI components in React and Vue application. 

Adaptable to real-time data or predefined datasets, making it a valuable addition to modern web development projects

```tsx
import React, { useState } from 'react';
import { Dialog } from '@headlessui/react';

function MyDialog() {
  let [isOpen, setIsOpen] = useState(true);

  return (
    <Dialog open={isOpen} onClose={() => setIsOpen(false)} className="relative z-50">
      {/* The backdrop, rendered as a fixed sibling to the panel container */}
      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
      {/* Full-screen container to center the panel */}
      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
        {/* Your dialog content goes here */}
      </div>
    </Dialog>
  );
}

```

{% cta https://github.com/tailwindlabs/headlessui %} Star HeadlessUI ⭐️ {% endcta %}

---
Save these components to build as pro as a pilgrim.  

Thanks everyone & Happy Holidays!