UI styling library

Utility-first CSS framework for fast, design-system-friendly styling.

xstyled is a utility-first CSS-in-JS framework designed for the React ecosystem. It functions as a styling library that enables developers to manage component styles and responsive layouts by mapping design system tokens directly to component properties. The framework distinguishes itself by providing a centralized theme management system that propagates design tokens, such as colors and spacing, throughout the component tree. It includes a responsive layout generator that automatically calculates media query breakpoints based on viewport width, allowing for the creation of fluid grid structu

StyleX is a type-safe CSS-in-JS library and atomic CSS compiler that transforms JavaScript style definitions into optimized static CSS and type-safe class names. It functions as a multi-framework styling tool, generating standard CSS assets compatible with various JavaScript UI frameworks and server components. The system includes a CSS design token system and theme engine for managing shared constants and composing visual schemes. It allows for the creation of light, dark, and custom themes through variable overrides and token inheritance. The project covers component styling through object

styled-components is a CSS-in-JS styling library and tool for React components. It provides a cross-platform UI styling API and a dynamic theme management system to maintain consistent design tokens and encapsulate visual logic, preventing global scope conflicts. The library utilizes a unified interface that works across both web environments and native mobile frameworks. It enables the definition of styles using JavaScript and TypeScript template literals, allowing CSS to be bound directly to components. The system supports dynamic prop-based styling, style inheritance, and the creation of

Theme-ui is a React theme framework and CSS-in-JS utility used for building themeable user interfaces. It functions as a design system tool that establishes centralized, constraint-based scales for colors, typography, and spacing to ensure visual consistency across applications. The framework distinguishes itself through an array-based responsive shorthand for mobile-first layouts and a dedicated color mode manager that synchronizes with browser preferences and persists user selections. It also features a system for creating named style variants to control component appearance via properties

Pigment CSS is a framework-agnostic styling tool that moves component style processing from the browser runtime to the build phase. By parsing component source code and theme configurations during compilation, it generates standalone, optimized CSS files and standard class names, effectively eliminating the need for runtime style calculation. The library provides a system for managing design tokens, such as colors and spacing, by transforming them into native CSS variables. This approach allows for dynamic styling and theme-aware logic without requiring a JavaScript-based engine. It also supp

NativeWind is a utility-first CSS framework that integrates Tailwind CSS design patterns into React Native applications. It functions as a cross-platform styling system and style mapper that translates CSS-based utility classes into native style objects compatible with mobile platforms. The framework provides a responsive UI engine that implements breakpoints, dark mode management, and platform-specific modifiers. It allows for the definition of custom themes including global colors, fonts, and spacing values to maintain a consistent visual identity across different devices. The system cover

Material UI is a comprehensive component-based library designed to accelerate the construction of professional, accessible web interfaces. It provides a centralized design system framework that manages visual tokens, typography, and color palettes to ensure consistent branding and layout constraints across complex application architectures. By encapsulating behavioral and accessibility logic within modular primitives, the library enables developers to build inclusive user experiences that adhere to rigorous design standards. The project distinguishes itself through a zero-runtime styling engi

Tachyons is a utility-first CSS framework and functional CSS library. It provides a collection of single-purpose classes used to style elements and build layouts without writing custom CSS. The framework centers on a mobile-first responsive design system and a nestable grid architecture that adapts layouts across different screen sizes. It includes accessible color palettes and schemes designed to meet visual contrast and accessibility standards. The system provides tools for utility-first styling, responsive layout management, and visual debugging to resolve alignment and spacing issues.

styled component for react & style-loader/usable

This project is a styling library and framework designed for component-based architectures, enabling developers to define and manage visual styles directly within JavaScript or TypeScript. It functions as a styling engine that generates unique class names from style definitions, ensuring encapsulated, predictable, and maintainable visual presentation across applications. By integrating with component logic, it allows for the creation of reusable UI elements with styles defined through template literals or object syntax. The library distinguishes itself through a comprehensive suite of build-t

Chakra UI Vue is a component library for the Vue.js ecosystem that provides a collection of modular, accessible building blocks for constructing user interfaces. It functions as a design system provider, enabling developers to manage global design tokens and visual consistency across complex applications through a centralized theme provider. The framework distinguishes itself by integrating accessibility logic and WAI-ARIA attributes directly into its base components, ensuring that keyboard navigation and screen reader compatibility are handled by default. It utilizes a declarative styling ap

Semi Design is a React UI component library and design token system used to build web application frontends. It provides a collection of pre-built interface elements and a framework of visual constants to maintain consistent branding across a product. The project features a design-to-code workflow that converts visual design drafts into production-ready React code and stylesheets. It includes an internationalization framework for adapting interfaces to different languages and text layouts, as well as a web component wrapper to isolate UI elements for use in SDKs and browser plugins. The libr

Open Props is a CSS custom property library and design token set providing reusable variables for colors, typography, and layout. It functions as a CSS variable framework and design system intended to ensure visual consistency across components and platforms. The project includes an optimization toolkit for generating selector-scoped variable bundles and removing unused design tokens from stylesheets to reduce final file size. It also provides configuration files to enable design variable autocompletion within code editors. The system covers broader capabilities in adaptive web interface des

Basscss is a lightweight CSS utility toolkit built on an atomic, single-purpose class architecture. Each class performs exactly one visual function, enabling immutable, side-effect-free styling where no class ever overrides or conflicts with another. The system provides a predefined spacing scale, responsive breakpoint prefixes for conditional styling across device widths, and accessible visibility control that keeps content programmatically available to assistive technologies. The framework distinguishes itself through a float-based grid system that constructs layouts using floated percentag

Mantine is a comprehensive component library for building accessible and responsive web applications. It provides a foundational set of UI elements and layout primitives, anchored by a base component that supports consistent styling, spacing, and layout properties across the entire interface. The library is built on a design-driven theme engine that uses a provider-based system to propagate global design tokens and color schemes throughout an application. The library distinguishes itself through a robust architecture that emphasizes component composition and reusable interaction logic. It uti

Chakra UI is a design system component library and styling framework that provides a foundation for building consistent, accessible web interfaces. It functions as a centralized theme configuration engine, using a design-token-driven architecture to manage visual properties like color palettes and spacing rules as a single source of truth across an entire application. The framework distinguishes itself through a type-safe styling utility that automatically generates TypeScript definitions from theme configurations, ensuring accurate property referencing and editor autocompletion. It employs a

Skeleton is a design system and accessible UI component library built on Tailwind CSS. It provides a collection of pre-built interactive components with built-in accessibility and state management, alongside a CSS custom properties theme engine that enables runtime theme switching and dark mode support. The project distinguishes itself through its adaptive design system approach, using CSS custom properties to create themeable tokens that integrate directly with Tailwind's utility-first framework. This allows developers to build visual design systems with customizable colors, fonts, and aesth

Suit is a CSS component architecture framework and methodology designed for organizing styles using predictable naming conventions for components, descendants, and visual variations. It serves as a design system styling framework that maps application states and design variations to modular CSS rules. The system utilizes namespace-based CSS scoping to isolate component styles and prevent unintended side effects in global stylesheets. It also functions as a utility-first toolkit, providing a system for applying single-purpose layout and spacing rules to reduce code duplication. The methodolog

Pico is a lightweight, classless CSS framework designed to provide consistent, accessible, and responsive visual defaults for web interfaces. By prioritizing semantic HTML tags, it allows developers to build clean, structured pages without the need for complex class names or heavy dependencies. The framework functions as a comprehensive design system that automatically applies styling to standard elements, ensuring that typography, spacing, and layout remain cohesive across different screen sizes. The framework distinguishes itself through a modular, variable-driven architecture that emphasiz

Papercss is a CSS UI framework and document-style design system used to build responsive web page layouts. It functions as a Less-based CSS library that applies a paper-like aesthetic and structured typography to give web pages the appearance of physical documents. The project also incorporates a utility-first CSS library model for rapid styling. The framework is distinguished by its ability to automate visual decorations, such as applying rotating border styles and shadow effects to child elements. It utilizes a Less-based variable system and modular stylesheet compilation, allowing users to

Bulma is a design-agnostic CSS framework that provides a collection of pre-styled interface components and layout primitives. It is built to be independent of specific JavaScript frameworks or build tools, allowing developers to construct responsive web interfaces by applying standardized classes directly to semantic HTML markup. The framework distinguishes itself through a utility-first approach that combines modular component styling with a flexible grid system. It leverages native CSS variables to manage design tokens, enabling real-time visual customization, automatic dark mode adaptation

UnoCSS is an atomic CSS engine and utility-first framework that generates styles on-demand based on the specific classes used in your source code. By scanning your project files during the build process, it produces only the CSS necessary for your application, effectively minimizing bundle size and eliminating unused styles. The engine distinguishes itself through a highly modular, configuration-driven architecture that allows for deep customization of design tokens, rules, and presets. It supports advanced styling patterns such as attribute-based styling, tag-based styling, and dynamic varia

twin.macro is a build-time style compiler and utility-first styling tool that converts Tailwind CSS utility classes into optimized style objects for JavaScript styling libraries. It acts as an integration bridge, allowing developers to use Tailwind design tokens and utility classes within a component-based architecture. The project distinguishes itself by performing transformations during the compilation phase rather than at runtime. It maps utility strings to CSS-in-JS engines such as Emotion and Styled Components, resolving design tokens directly from a Tailwind configuration file to ensure

Ariakit is a headless component library and accessible UI component toolkit. It provides a set of unstyled web components with built-in accessibility patterns to ensure that screen readers and keyboard navigation function correctly. The project includes an adaptive color engine that calculates high-contrast text and dynamic surface colors for light and dark modes. It also features a concentric layout engine for computing nested padding, margins, and border radii for circular interface elements, alongside a design token system for managing global CSS variables. The toolkit covers broad capabi

Linaria is a zero-runtime CSS-in-JS library and static CSS generator. It evaluates JavaScript expressions at build time to extract styles from tagged template literals into standalone, static CSS files, removing the need for a runtime style injection engine. The library distinguishes itself by mapping component props to CSS custom properties, enabling dynamic styling and runtime property updates without regenerating stylesheets. It utilizes a build-time evaluation engine to resolve interpolations and a hashing system to generate scoped class names that prevent style collisions. The project c

styled-jsx is a CSS-in-JS library and scoped CSS engine that allows for writing CSS directly within JavaScript components using template literals. It serves as a JSX styling solution that integrates CSS into elements while preventing style leakage through a scoping mechanism. The project differentiates itself by providing a server-side rendering CSS manager that extracts and injects styles during the rendering process to prevent flicker and duplicate rules. It also supports dynamic style binding, which allows CSS values to be bound to component state through template interpolation to update v

Bootstrap is a comprehensive, mobile-first CSS framework designed for building responsive web interfaces. It provides a standardized library of reusable UI components, such as navigation bars, modals, and forms, alongside a robust grid system that ensures consistent layout alignment across diverse viewport sizes. By establishing a baseline through browser normalization and standardized typography, the project enables developers to create accessible, cross-browser compatible web applications. The framework distinguishes itself through a modular Sass-based architecture that allows for deep cust

styled-system is a prop-based styling library and CSS-in-JS theme system. It functions as a design token orchestrator that maps component properties to a central theme, allowing developers to change element appearances by passing style properties directly to components instead of writing separate stylesheets. The library features a responsive style prop engine that enables the creation of fluid layouts. This is achieved by using shorthand arrays to adjust styles across different screen breakpoints, ensuring visual arrangements adapt to various screen sizes. The system covers a wide range of

Styled System is a JavaScript library that provides a style props approach for building UI components, enabling developers to map CSS properties directly to component props for rapid, declarative development. At its core, it resolves design tokens from a centralized theme object into CSS values, ensuring consistent styling across components without writing custom stylesheets. The library supports theme-aware styling that connects component styles to a theme object for scalable, maintainable design systems with dynamic value resolution. The library differentiates itself through several capabil

Carbon is an enterprise design system that provides a comprehensive collection of reusable UI components, design tokens, and guidelines for building professional web applications. It functions as a CSS framework that enforces a unified design language across projects through standardized typography, spacing, and color palettes. The system utilizes a platform-agnostic design token system to maintain visual consistency across different technologies. This includes centralized management of brand colors, motion easing curves, and a curated library of accessible SVG icons. The framework covers a

gluestack-ui is a cross-platform React component library built with Tailwind CSS. It provides over 30 pre-built, accessible components that can be installed by copying their source files directly into a project, giving developers full control over customization without external runtime dependencies. Every component implements WAI-ARIA patterns, keyboard navigation, and screen reader support out of the box. A key differentiator is the copy-paste architecture: rather than a traditional package dependency, component source code is placed in the project, allowing direct editing and eliminating ve

HeroUI is a declarative toolkit for building accessible user interfaces through modular, React-based component composition. It provides a comprehensive set of reusable building blocks designed to standardize visual language and interaction patterns across web and mobile applications. The library distinguishes itself through an integrated approach to accessibility and styling. It automatically manages state and keyboard interactions by injecting appropriate attributes, while utilizing a utility-driven styling architecture to enforce design system consistency. Developers can leverage polymorphi

shadcn-vue is an accessible design system framework and UI component library for Vue applications. It provides a collection of accessible, unstyled interface elements and pre-designed building blocks styled with Tailwind CSS, all of which are built on top of Radix Vue primitives. The project utilizes a command line interface to install specific components and themes directly into a local project directory rather than as pre-compiled dependencies. This distribution model allows users to own and modify the source code locally to create a custom design language. The library covers a broad range

Buttons is a CSS button framework and UI component library providing a set of reusable visual elements for mobile and desktop web environments. It functions as a CSS utility system and variable-driven theming engine that enables the creation of consistent buttons using configurable typography and shapes. The system utilizes a modular CSS architecture where independent style and color classes are composed on single elements to produce varied visual effects, such as 3D or flat designs. It employs a declarative design framework that maps configuration options to real-time visual attributes via c

Arco Design is a React UI component library and design system framework used to build professional web interfaces. It provides a collection of pre-built visual elements and layouts designed to maintain a consistent design language across applications. The system features a token-based theming engine that utilizes hierarchical design variables and CSS variables to enable granular visual customization. This allows for the modification of global and component-level styles through a dedicated theme editor or loader to align the interface with specific brand identities. The framework supports ent

Ant Design is an enterprise-grade component library and design system framework built for developing complex, data-heavy web applications. It provides a comprehensive collection of pre-built, state-driven interface elements that map data properties to rendered components, ensuring consistent interaction patterns and visual language across large-scale projects. The library distinguishes itself through a robust styling architecture that utilizes design tokens and hierarchical configuration providers to propagate global settings like themes, locale, and layout direction. By employing component-l

The mdb-ui-kit is a frontend component library and visual extension that combines the Bootstrap 5 framework with Material Design principles. It provides a collection of pre-styled interface elements and responsive web templates to facilitate the development of consistent web applications. The toolkit extends the Bootstrap ecosystem by adding Material Design aesthetics and advanced styling options. It enables rapid prototyping through the use of pre-configured design blocks and provides mechanisms for deep visual customization via SCSS variables and native CSS custom properties, including supp

This project is a utility-first component library that provides a comprehensive suite of pre-styled, reusable interface elements. It functions as a build-time engine that generates design-system-compliant styles by mapping semantic tokens to standard HTML elements and utility classes. By compiling all component styles into static CSS at build time, the library eliminates the need for client-side style calculation, ensuring efficient performance. The library distinguishes itself through a configuration-driven architecture that manages color palettes and visual styles, enabling dynamic switchin

mdui is a framework-agnostic UI library and design system based on Material Design 3 standards. It provides a comprehensive set of reusable interface elements implemented as native Web Components, ensuring compatibility across different JavaScript frameworks. The library features a sophisticated theming system that supports light and dark modes, as well as the ability to generate dynamic color palettes from seed colors or image sources. It distinguishes itself with a high level of flexibility in visual customization, using CSS custom properties to control design tokens such as typography, cor

This project is a comprehensive UI toolkit that provides a declarative, reactive framework for building modular web interfaces. It centers on a component-based architecture that maps application state to rendered elements, utilizing a twelve-point flexbox grid system and nested containers to manage complex layouts. The library ensures consistent behavior across large-scale applications by providing centralized configuration for component defaults, themes, and global design tokens. What distinguishes this framework is its deep integration of Material Design principles alongside a highly flexib

CSS Modules is a build-time tool that transforms local class names into unique, collision-resistant identifiers. By scoping styles to specific components during the compilation phase, it ensures that visual definitions remain isolated and prevents naming conflicts within web applications. The project functions as a frontend build plugin that integrates with module bundlers to manage style dependencies and assets. It generates a JavaScript object mapping that links original local class names to their transformed global counterparts, allowing developers to reference styles programmatically with

This project is a CSS design system framework and modular library providing a standardized set of UI component stylesheets. It establishes a unified system of visual guidelines to ensure a consistent and professional look and feel across web interfaces. The framework is organized as a collection of standalone stylesheets that can be imported individually to minimize bundle size and eliminate unused styles. It utilizes a design token system based on CSS variables to manage theming and a utility-first class system for layout and spacing. The system employs a block element modifier naming conve

Rebass is a React design system library that provides a collection of theme-driven, responsive UI primitives. It functions as a theme-based layout engine, using a set of stateless components to standardize spacing, typography, and colors across a user interface. The library distinguishes itself by mapping style properties to a central design theme through a styled-system approach. This allows for responsive style mapping where components automatically adapt their appearance based on screen size and provides the ability to swap underlying HTML elements while preserving styling logic to maintai

This project is a styling library for Vue that enables component-based design by attaching CSS rules directly to HTML tags or component constructors. It utilizes tagged template literals to encapsulate design logic within JavaScript, allowing developers to define, extend, and manage styles directly alongside component code. The library distinguishes itself through a dynamic style injection engine that evaluates functions against component properties at runtime, ensuring visual output updates in response to data changes. It supports polymorphic rendering, which allows the underlying HTML eleme

React Toolbox is a Material Design React component library and cross-platform UI kit. It provides a set of pre-styled user interface components that implement the Material Design specification to ensure consistent layouts and interaction patterns. The library utilizes a CSS Modules styling framework to provide scoped design variables and theme overrides. This approach allows for global theming and fine-grained visual adjustments through a variable-based theme engine and custom property style overrides. The project supports server-side rendering, enabling components to generate HTML on the ba

Ant Design Mobile is a mobile UI component library and design system built for React. It provides a collection of pre-styled interface elements and standardized UI blocks used to create consistent, responsive user interfaces for mobile web applications. The framework focuses on mobile web design and frontend interface engineering, providing tools to implement interaction patterns tailored for touch-based browsing. It ensures a uniform look and feel across different mobile browsers and handheld device screens. The library incorporates responsive layout systems and CSS-variable-based theming.

This project is a Sass implementation of the Bootstrap framework, providing a collection of responsive, mobile-first UI toolkits and layout systems. It serves as a Sass UI library that allows for the creation of custom CSS frameworks through the use of a preprocessor to generate browser-ready stylesheets. The framework is distinguished by its deep customization capabilities, enabling users to override default themes and visual variables using Sass variables and mixins. It utilizes a modular import system, allowing specific components to be selectively included to control the final CSS bundle

Ant Design Vue is a comprehensive UI component library and enterprise design system for Vue. It provides a collection of reusable user interface elements designed specifically for building professional web applications and complex business software. The project functions as a server-side rendering framework, enabling the generation of HTML on the server to increase initial page load speeds and improve search engine visibility. It is designed for the implementation of corporate design systems and the construction of data-heavy internal tools, such as admin dashboards. The library covers broad

styled-jsx is a CSS-in-JS library and styling framework for JSX components. It functions as a scoped CSS engine that uses compile-time transformations to generate unique class names, preventing style leakage between components. The system includes a server-side CSS renderer that flushes styles into HTML to prevent layout flicker during the first paint. It ensures security compliance by attaching per-request nonces to generated style tags to satisfy Content Security Policy requirements. The framework covers global CSS management with deduplication, dynamic styling via template interpolation,