Styling & UI Libraries
Helpful tip: before using any libraries below, you should check your IDE for plugins that might improve the developer experience of using it. For example, if you use Tailwind, the Tailwind IntelliSense plugin (which recommends classnames in the auto-complete dropdown) and the Headwind plugin (enforces consistent ordering of classnames in your markup) in Visual Studio Code might be useful for your team.
Utility Approach
CSS / CSS-in-JS
Component Libraries
Most UI libraries will come with a "theme" or global way to configure certain things like colors, fonts, etc. — but in general, the components render with opinionated styles already applied.
If your app is small enough, it may be simpler to reach for a headless solution (more below) and create the critical components in your app than try to overwrite or customize an entire library.
- Material UI
- Twitter Bootstrap
- Chakra UI
- NextUI
- Ant Design
- Semantic UI
- Fluent UI
- Carbon Design System
- Pico CSS
- Mantine
If you need a lot of customization or control over the presentation of the UI, you should consider a headless solution.
Headless Component Libraries
Recommended Combinations
- Radix UI + tailwind
- Headless UI + tailwind
- Chakra UI + emotion
- Base UI + CSS Modules / styled-components
Universal / Mobile Component Libraries
Misc
- Demystifying Styled Components - Josh Comeau
- shadcn/ui - Radix + Tailwind components to copy/paste into your project