Styling

Because we are love to style the html that make it have a good looking.

Headless Component Library

These component libraries come with their components unstyles. If you have a specific design system to implement, it might be easier and better solution to go with headless components that come unstyled that to adapt a styled components library such as Material UI to your needs. In this project we use TailwindCSS as a base styling. But you have other option to for styling.

Some good options are:

• Reakit
• Radix UI
• react-aria

Styling Solutions

There are multiple ways to style a react application. Some good options are:

• tailwind
• styled-components
• emotion
• stitches
• vanilla-extract
• CSS modules
• linaria

Good combinations

Some good combinations of component library + styling

• Chakra UI + emotion
• Headless UI + tailwind
• Radix UI + stitches

Storybook

Storybook is a great tool for developing and testing components in isolation. Think of it as a catalogue of all the components your application is using. Very useful for developing and discoverability of components.