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!
1. Clickvote - Like, Upvote, And Review Any Context. 👑
Seamlessly Integrate Like Upvote and Review Components into Your App.
Render likes boxes, review boxes, and reaction components using this simple React code!
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
2. Novu - Add in-app notifications to your app!
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
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
3. CopilotKit - Add autocompletion to your text with GPT!
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.
import { CopilotTextarea } from "@copilotkit/react-textarea";
import { CopilotProvider } from "@copilotkit/react-core";
<CopilotProvider>
<CopilotTextarea/>
</CopilotProvider>
Star it here 🌟
https://github.com/RecursivelyAI/CopilotKit
4. Tolgee - Translate any context to any language!
Smart platform, Fast integration, Painless localization.
A simple component that will translate any context to any language!
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
5. Hanko - Passkey authentication to your app!
Beautiful, customizable components, SDKs, and APIs to power your login and user management.
Add passkey authentication in 5 minutes! Here is the component:
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
6. React Email - The next generation of writing emails
A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.
A component to help you design and send emails!
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
7. React Flow - The best way to create draggable workflows!
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.
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
8. Novel - The best WYSIWYG editor!
Notion-style WYSIWYG editor with AI-powered autocompletion.
A simple component that will render a notion style editor with tons of features!
import { Editor } from "novel";
<Editor />
Star it here 🌟
https://github.com/steven-tey/novel
Thank you all!
See you next week 😎
Top comments (50)
Amazing work, Nevo!
How about a tutorial using all these tools? 🤗
Great idea!
Thank you for the kind words!
k
And I thought I would read something about component references, State management and store practices. You're simply showcasing components without going any further on what is beneficial for you to use it as developer.
Using those components won't make me a master on React. Understanding how React works internally would indeed make me a master of it.
Exactly !!
I was surprised too and was searching for someone who said this
I've been hearing a lot about the react email library, have to try on a project..
Thanks for the comprehensive list!
Resend labs is doing an amazing work with everything connected to emails!
good
Thank you so much 🔥
well structure article Nevo. Looks great.
Thank you so much Shreya!
React is great
It really is!
true
Thanks __
🚀
This is awesome!
Im learning react right now this will help alot thanks
Thank you for reading 😎
Amazing list, I liked the concept of Clickvote and the ability to add in the option to vote anywhere in general. Also, the WYSIWYG editor, Novel is also amazing!
Thanks for making this list, awesome work.