The difference between a website that looks like this, and one that looks like this… is all about the libraries you use. Below are the 3 top React libraries to make beautiful websites, regardless of your design experience. These days if you’re building a project and can’t beautifully convey your idea, you’ll fall into the background noise of every other mediocre website. Below is the video version of this article 👇 The majority of great websites leverage libraries built by the pros to make their sites look polished and professional. If you’re not a great designer, don’t worry, I’ll let you in on a secret, neither are most people. By adding good asset libraries to your toolbelt, you stand a better chance at effectively conveying your message, and standing out in the crowd. Who Am I? Hi, I’m , a Cloud Engineer living in Oregon. I build websites every day for a living and have used many, many different libraries. Today I’m going to condense down years of trial and error and give you my top three React libraries to help you make beautiful websites and apps. Dylan 1. Framer Motion Up first is . Just looking at the website it speaks for itself. It is a library that makes very complicated animations easy to implement. Clean animations are an easy way to bring a wow factor to your site. Clean animations subconsciously tell your users, “hey I notice the details, so you can trust me.” Framer Motion A big use case for framer motion is to show more information only if the user wants it. Instead of throwing them all of your articles, you just show a headline, then a snippet if they click, then the whole page if they decide they want it. Seth Godin would call that process permission marketing and claim it’s the best way to earn trust. 2. Tailwindcss Next is . It’s basically next-generation bootstrap on steroids. Instead of writing CSS from scratch on every project, Tailwind allows you to use their pre-made classes. This ensures consistency over your project. tailwindcss The thing I love most about them is they have an you can copy and paste code from. Let me repeat that, you can literally copy and paste a professional-looking react component into your website then edit it using the tailwind CSS classes. accompanying UI library Quick tip, to edit way faster, add your classes directly in the dev console first to get the look just right, then paste the classes into your actual code. 3. Undraw Lastly is . It’s not exactly React specific but it is a treasure trove for making beautiful websites. It’s a huge library of illustrations that you can customize and use for free! Did I mention, it’s free? If you watch my videos often you’ll recognize the illustrations because I use them all the time. Undraw And there you have it. If you use all of these, you’re well on your way to a beautiful React app. If you find this useful, consider checking out my 🎬 , you’ll probably like my videos. YouTube Channel See you in the next article!

YouTube

How To Build Your First Website For A Client - Workflow and Tools 

Grow Your Business With Tech 🚀

2021 - HackerNoon Contributor of the Year - AWS-LAMBDA

Too Long; Didn't Read

Make resilience your competitive advantage

Top 3 React UI Component & Asset Libraries in 2021

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

An Overview of Users Vs Roles in AWS IAM

4 Challenges of Digital Asset Management For Organizations To Know in 2020

5 Reasons to Integrate Your Business with a Crypto Platform

53 Stories To Learn About Digital Asset

A Beginner's Guide to Virtual Real Estate

An Overview of Users Vs Roles in AWS IAM

4 Challenges of Digital Asset Management For Organizations To Know in 2020

5 Reasons to Integrate Your Business with a Crypto Platform

53 Stories To Learn About Digital Asset

A Beginner's Guide to Virtual Real Estate

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps