9 React Styled-Components UI Libraries for 2019
Like CSS in JS? here are useful React UI libraries built with styled components to choose from.
The discussion in the React community about how to style UI components only seems to be gaining velocity, with people rooting for anything from CSS modules and inline CSS to CSS in JS (we’ll discuss in the next post).
The relative rise of CSS in JS, favored by some developers, is tightly coupled to the rise of the React components ecosystem, and that of the styled-components project by Max Stoiber and over 200 contributors.
To help you save time and put styled-components to the test in your own application’s UI, I’ve gathered some (unranked!) useful libraries which leverage styled-components in order to provide a neat out-of-the-box UI kit.
You can use Bit (GitHub) to share your components into a reusable collection that everyone on your team can share and use to build apps together.
Also read:
How We Build a Design System and How We Build Micro Frontends 🚀
1. Rebass
At 5k stars, rebass is a “React primitive UI components built with styled-system”. It’s lightweight, and beautifully designed set of 8 extendable, consistent and reusable components built with responsivity and customizability in mind (with built-in themes). Here are the components.
2. Zendesk’s Garden React components
Altough “only” at 350 stars, this library provides well-crafted components which are also individually published to NPM and can also be easily made available as Bit components to consume and share. Components are built to respond to a range of user input devices, tuned to handle right-to-left layouts, and some even contain animations. Bite-sized chunks of web HTML, CSS, and JavaScript are prepared to drop into any React-based application. Take a look.
3. Atlaskit
Atlassian’s React UI component library, implementing Atlassian’s design guidelines and putting styled-components to use. The library was started 2 years ago as an effort to implement ADG3 designs for all Atlassian Cloud products, which are built on top of React. Every component is a package.
4. Grommet V2
V2 of the wonderful Grommet library (used by Netflix, Uber etc) replaces SASS with styled-components. So, you don’t need special configs or the use of SASS to style your components, styling is no longer global and theming no longer takes place in build-time. Feel free to give it a try below (still in alpha).
5. Smooth-UI
A 800 stars UI component library with React and styled components that emphasizes user experience including the extendibility of styled. It also exposes some classes, so you don’t have to learn a new API to extend components and you can inspect components and use classes out of the box.
6. Reactackle
At 200 stars reactackle is a React UI library build with styled-components which provides cross-browser support. The library supports customization for basic design aspects and provides theme wrappers out of the box.
7. Reakit
Reakit is a 1K+ star UI library that lets you leverage any component or container to create something new. All components are WAI-ARIA compliant and all components are in accordance with the Single Element Pattern, which makes them consistent like HTML elements. Jump in to take a look.
8. React CSS loaders and Styled loaders
react-css-loaders is collection of pure CSS React loading components, based on the popular css-loaders project and built with styled-components.
Styled loaders is a set of Loaders Built with Preact and Styled Components, conecptually based on the popular spinkit project. Take a look.
9. Styled icons
A project that provides the Font Awesome, Feather, Material Design, and Octicons icon packs as Styled Components, with full support for TypeScript types and tree-shaking / ES modules. Check them out in the “icon explorer”.
Honorable mentions
Note that many of these are unmaintained or a work in progress.
There’s also an alpha branch of react-toolbox with some components converted to styled-components.
