Choosing a styling solution

By Tuukka Tähtinen

February 20th, 2026

It’s 2026, component libraries are popping up left and right, and with existing libraries going into maintenance mode, it's time to talk about some of the other available options.

Tailwind CSS

Tailwind CSS is a lightweight CSS framework built around using compact utility classes for styling your elements, instead of having to create css modules for each component. With multiple different installation options, there is a wide range of support for using the framework.

It can be intimidating to begin working with Tailwind due to having to learn the utility classes instead of using the standard css attributes. Once you get used to the naming convention for the classes, development gets easier. No need to look at different files to set a class name and separately edit the class, or having to edit another object, just tack on your utility classes. You’re not going to be limited to the default classes, you can also use one-off custom values or add new reusable values to the configuration based on your needs.

These days Tailwind also has their own optional component library you can install if you like having template components to work from along with a multitude of Tailwind-compatible component libraries.

Sass/SCSS

Sass is a CSS preprocessor which extends the default CSS functionality with new features. With improved nesting support, variables, partial styling that can be extended and mixin support, you can’t go wrong with it if you’re going to be using CSS modules. Sass brings with it two possible syntaxes, Sass which uses indentation for nesting, and SCSS which extends the CSS syntax.

Mixins are a collection of styles you can call inside a class to have a reusable group of styles across multiple classes at your leisure. An example listed on their documentation is a mixin for a button base. Another use case could be a media query mixin for viewport-specific styling. Partials are files that are prefixed with an underscore, which won’t be compiled into CSS until they’re used by another file, after which they will be compiled as if they were written in the file referencing them. These could include variables or element styling.

styled-components

OK, let’s talk about styled-components. Used by sites like Patreon, Vimeo, and Vogue, styled components used to be a giant in the web development sphere. However, the library entered maintenance mode in April 2025, and as such, it is not recommended to integrate it into any new projects. It was a popular part of web development, which is why it is included here, but the industry has been moving away from the css-in-js style of component styling. Moving on to…

Emotion

Emotion is a younger version of styled-components with a very similar syntax, which makes it the easiest migration from styled components. While styled-components does maintain a larger ecosystem, with Emotion still being in active development along with having better performance and a smaller bundle size, it doesn’t hurt to migrate.

And while Emotion does use css-in-js for component styling, it's still a fine consideration. Has multiple installation options for using different syntaxes, Styled to support the syntax also used by styled components, CSS is a simple, framework-agnostic way of installation that adds a css function that composes styles directly into the className prop of elements but requires additional configuration for server-side rendering and React, which is purpose-built to specifically function with React and server-side rendering out of the box. Community-created component libraries are also available.

Material UI

The most popular component library on the web that implements Google's open source material design system. Includes a styled utility function that can be used to style HTML elements and to customize the Material UI components.

Being a component library, it’s quick to work out of the box, but you should be customising the default theme and the component styling to make sure you differentiate yourself from other websites and applications using Material UI. Values used in your theme, such as custom colors, font sizes, and spacing values, can be inherited on Material UI components from the active theme and used without needing to separately import them.

shadcn/ui

shacdn/ui is a Tailwind-based component library that is compatible with React, including Next.js and Vite. Includes a CLI for exporting and importing custom components, which helps support the intended use case of using the default components as a base for your own component library. As such, you aren’t restricted to styling components with the use of props like is common on other component libraries, instead you’re able to edit the component code directly.

The components are imported from a registry.json file indicating what kind of component they are, any component dependencies, and the source code for the component is stringified and then parsed on import to generate the component JSX files. See the documentation example of the registry.json file below.

{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    {
      "name": "hello-world",
      "type": "registry:block",
      "title": "Hello World",
      "description": "A simple hello world component.",
      "files": [
        {
          "path": "registry/new-york/hello-world/hello-world.tsx",
          "type": "registry:component"
        }
      ]
    }
  ]
}

As far as I could tell, there is no automatic way to generate the registry file for exporting components but in the past there have been some community resources to help streamline the process.

The developers also describe the library as “AI ready” and say that it should be easy for large language models to understand.

Chakra UI

Chakra UI is a simple and lighter component library that has received praise from a variety of companies, including Vercel. Based on Emotion, it is compatible with Remix, Next.js, Vite, and Storybook. Can also be installed into an iframe or a shadow DOM if needed. It also has an optional react-mcp package to run an MCP server to improve how AI assistants such as Claude or CoPilot interact with the library.

One of the more unique inclusions of this library is including an optional rich text editor component built on top of Tiptap.

Mantine

A CSS Built component library that supports the styled api for overriding styles. Compatible with React and the following frameworks: Next.js, Gatsby, Vite, and Redwood. User feedback has repeatedly praised the ease of customisation. Has a multitude of optional official and community-maintained extensions, such as code highlighting and a parallax component, to include based on your needs. Comes with custom hooks for detecting different interactions with elements and for usage with event listeners. Different project templates available, official and community made, such as Next project with Tailwind and templates for Next using the app router and Next using the pages router.

How to decide between using a component library or a styling library?

A component library is a quick way to get your front-end up and running, especially so if your design team is planning to use the component library as the base for your design system. You are not limited to the existing component designs as you are able (and it is recommended) to adjust the theme values and styles on components to bring your own design flair, along with further styling adjustments where needed.

If you have an existing design system, you’re likely going to be working with styles that may not be simple fits with existing component libraries, so it makes sense to pick a styling library instead of a component library. With some of these component libraries you’re able to introduce a small set of components to your project to ease development of modules that may need them, or even entire component libraries for a specific styling library in mind.

How to choose a component library?

Choosing between multiple component libraries may seem like a daunting task, but you can just pick the one that matches your requirements and needs best, mostly this comes down to the design of the library. In some cases a library may have a functionality you may need, or it may come down to being the only one that slots in with your existing project, as they may not be compatible with all of the popular frameworks.