Newsletter Subscription

5 UI Libraries to Use With React

If you’re a developer who – like me – is not a good designer or a CSS pro, you might know how troublesome it can be to put together the design for your React app. You spend a lot of time tinkering with the styles, but in the end, it just doesn’t look quite nice.

This is not only annoying, it’s demotivating … after all, you just want to have a good-looking app that is also responsive to support mobile devices. How hard can it possibly be?

If this sounds familiar to you, I can assure you’re definitely not alone.

Use UI Libraries to Style a React App

Styling a web app is a huge pain for many developers. Maybe that’s why there are so many UI libraries out there in the wild. Here are some examples of libraries for styling React apps for you to try out:

React-Bootstrap

React Bootstrap

You might already know the Bootstrap Framework. It helps you to create responsive grid layouts on your website and offers a whole lot of controls like buttons and form elements. React-Bootstrap offers the functionality of Bootstrap through handy-to-use React components.

Rebass

Rebass

Rebass provides React components for primitive UI elements like grid layouts, buttons or boxes. It is built with styled-components, which allows you to customize all the provided elements and use real CSS in your code.

Atlaskit

Atlassian’s Atlaskit

Atlaskit is Atlassian’s (Jira, Confluence, Trello) official UI library and complies to their own Design Guidelines. It is also built with styled-components and provides a lot of customizable UI elements in form of React components.

Spend some time with each of the libraries. You’ll soon see which library you’re the most comfortable with, or which one you like best. If you create the same project with each of them, you can directly compare the differences.

Want to improve your React knowledge?

Sign up below and you'll get articles like this about React delivered right into your inbox on a weekly-ish base.