Fun React Components of the Week

Photo by Park Troopers on Unsplash

While I was working with a project this week, I found out these awesome and fun react components that you won’t regret using:

1. React95 — create a windows 95 themed app
2. react-credit-cards — smooth credit card design
3. react-trend — modern data visualization tool

React95

Inspired by Windows 95. If you are looking for a fun and throwback theme, this is the one. It is easy to install and it has good documentation.

Check out the interactive demo here.

Awesome Storybook

Check out their Storybook. You can view and interact with all the React95 components here. It has everything you wanted, ranging from Buttons, Form Inputs, Tables and more. This includes code snippets where you can easily copy and integrate them into your app!

Get Started

You can install using npm or yarn:

# yarn
yarn add react95 styled-components
# npm
npm i react95 styled-components

And make sure to wrap your components with ThemeProvider. Check this page for more info on how to get started.

The Windows 95 aesthetic is just iconic. I used this for a hackathon competition, and oh boy, the judges were pretty much impressed. So if you are looking for a theme that is relatable and gives a fun vibe, try using React95.

react-credit-cards

Improve your payment form with this credit card component. The react-credit-cards component gives us a beautiful & slick credit card design that we can easily integrate with our app. And, it supports all credit card types in Payment.

Check out the Sandbox for an interactive demo.

Get Started

Install by npm:

# npm
npm install --save react-credit-cards

Then make sure to import the CSS or SASS

# css
react-credit-cards/lib/styles.scss
# sass
import 'react-credit-cards/es/styles-compiled.css'

That’s it. You’re good to go. All I can say is my payment forms look so clean with this. My clients love it a lot!

react-trend

Create beautiful line graphs using react-trend by the Unsplash team. You can check out their website for a simple demo. This is great if you are looking for a simple, easy to install and highly customizable line graphs. The quality is also great as it uses SVG.

Get Started

All you need to do is install using npm or yarn

# yarn
yarn add react-trend
# npm
npm i -S react-trend

Here is a sample code:

import Trend from 'react-trend';

const MyComponent = () => <Trend data={[0, 10, 5, 22, 3.6, 11]} />;

For more info on how to customize, check out their github.

That’s all folks!

React has a lot of awesome packages that we can easily use. If you know of any cool components, themes or anything that is fun to use, let me know and let’s check it out!

Thanks for reading. Team Kodou — Just Code It.

Check out our merch, click here! A portion of the profits will be donated to charity. We got everything, from shirts, hats, stickers, mouse pads, accessories and more.

TeamKodou Shop | Redbubble