Open-source alternatives to React Css Modules

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

classnames is a JavaScript utility for conditionally joining CSS class names into a single space-separated string. It functions as a class name manager that maps boolean flags and objects to specific styles for HTML attribute assignment. The tool resolves abstract class identifiers to computed values, facilitating integration with modular styling systems. It allows for the mapping of dynamic identifiers to scoped class names through a dedicated module resolver. The utility processes strings, arrays, and objects to handle dynamic class name management. It includes capabilities for recursive a

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,

This project provides a methodology for organizing, scoping, and naming styles to ensure maintainable and scalable stylesheets in large web applications. It functions as a structured approach to managing component-based styles, preventing global namespace collisions and simplifying long-term codebase maintenance through a set of established design principles. The architecture relies on strict namespace-based encapsulation, where all class names are prefixed with unique component identifiers to ensure visual isolation between modules. It enforces a class-only selector strategy to avoid the mai

This is a foundational project structure for building scalable web applications using React. It provides a standardized directory structure and build tools to accelerate the bootstrapping of new projects, featuring a Redux architecture for predictable state management through unidirectional data flow and an immutable store. The project is distinguished by a command-line interface for generating standardized components, containers, and routes from predefined templates. It implements an offline-first framework using service workers to enable progressive web app functionality, alongside a compon

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

Microbundle is a zero-configuration JavaScript module bundler designed to package small libraries and modules into optimized distribution files. It serves as a JavaScript library packager and TypeScript compiler, converting source code into compatible module formats for both browser and server-side runtimes. The tool functions as a bundle size optimizer by mangling object properties and analyzing bundle composition to reduce final file sizes. It also acts as a CSS module processor, converting style imports into external stylesheets or scoped modules to prevent global namespace collisions. It

react-dates is a set of React components for date selection, providing interfaces for picking single dates or date ranges through controlled input components and calendars. The project features built-in support for internationalization, allowing date formats and interface strings to be translated via locale settings. It also supports visual customization through theme registration and CSS overrides to match specific application styles. The component suite covers a variety of selection workflows, including calendar range selection and date range input fields.

MPX is a cross-platform framework designed to build applications for multiple mini-program ecosystems and the web from a single codebase. It utilizes a static transpilation pipeline to transform source code into platform-specific bundles, employing a single-file component system that encapsulates templates, logic, and styles. The framework provides a reactive state management system that automatically synchronizes application data with the user interface through computed properties and watchers. The project distinguishes itself through a robust build-time toolchain that supports sub-package p

This project is a cross-platform user interface framework that maps mobile-native component primitives to standard web elements. It enables developers to build consistent applications that function across both mobile and web environments by providing a unified library of components and shared logic. The framework distinguishes itself through a specialized style engine that converts JavaScript object-based declarations into optimized, scoped CSS at runtime. It also features a responsive layout engine that implements a flexbox-based system, ensuring that interfaces adapt dynamically to differen

Treat is a styling library that extracts CSS from JavaScript definitions during the build process to eliminate runtime overhead. It functions as a static style extraction tool, converting component-level style definitions into optimized, standalone CSS files. The framework is designed for building type-safe, themeable design systems that allow user interface components to adapt their appearance based on active design system settings. The library distinguishes itself by enabling complex style composition, including pseudo-selectors, media queries, and animations, within a unified object struct

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

The Vechain dApp Kit is a development framework designed to facilitate the creation of decentralized applications on the Vechain network. It provides a collection of modular tools for integrating wallet connectivity and blockchain transaction signing directly into web-based user interfaces. The kit functions as a unified interface layer that abstracts diverse wallet connection protocols into a consistent application programming interface. It utilizes a pluggable architecture for wallet adapters and a reactive system to track the lifecycle of blockchain transactions from initiation to final co

Lightning CSS is a high-performance CSS toolchain implemented in Rust. It provides a comprehensive suite of tools for stylesheet processing, including a bundler, minifier, module compiler, syntax lowerer, and vendor prefixer. The engine utilizes a browser-grade grammar for parsing and converts stylesheets into typed property values. It distinguishes itself through a visitor-based transformation API that allows for custom modifications of the parsed abstract syntax tree and an error-tolerant parsing mechanism that recovers from malformed syntax to prevent build failures. The toolset covers br

This is a Webpack extension used to extract CSS from JavaScript files into separate, standalone stylesheets for production builds. It functions as a CSS bundler and asset optimizer that separates styles from script bundles to enable parallel loading and prevent flashes of unstyled content. The project provides utilities for generating JavaScript module exports that map local style definitions to application components. It also implements dynamic theme management by conditionally loading different CSS variants via resource queries and supports long-term browser caching through the use of conte

Farm is a Rust-based web build tool and development server that compiles JavaScript, TypeScript, CSS, HTML, and static assets into optimized bundles. It uses a module-graph-based bundling approach with persistent module-level caching, enabling near-instant builds and sub-20ms hot module replacement during development. The tool processes assets based on file extensions, handling CSS, Sass, Less, PostCSS, HTML, and images as first-class modules without requiring JavaScript transformation. Farm distinguishes itself through its Vite-compatible plugin system, accepting Vite, Rollup, and Unplugin p

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

FlatLaf is a Java Swing look and feel library and theme engine that provides a modern flat design for desktop user interfaces. It serves as a comprehensive framework for applying visual themes, managing high-density scaling, and implementing customized window decorations. The project distinguishes itself through a flexible styling system that supports light and dark mode toggling and the ability to define visual identities via property files, subclassing, and external theme imports. It includes a dedicated scaling framework to ensure that interface elements and vector icons remain crisp on Hi

This project is a collection of React components that implement a responsive grid system using CSS Flexbox and CSS Modules. It provides reusable building blocks for constructing fluid interfaces that organize page content into flexible rows and columns, which automatically adjust their size and alignment based on viewport dimensions. The library distinguishes itself by decoupling style definitions from component logic, which facilitates consistent rendering across both server-side environments and client-side runtimes. By utilizing CSS Modules, it encapsulates styles into local scopes to prev

This project is a front-end development study guide and technical roadmap designed to introduce the tools, libraries, and patterns used in modern web application development. It serves as an educational resource covering single page application architecture, the integration of modern web tech stacks, and the design of components using static typing. The guide focuses on the orchestration of front-end CI/CD pipelines, providing a walkthrough for automating the linting, testing, bundling, and deployment of static assets to cloud hosting. It specifically addresses the implementation of reusable

jss is a CSS-in-JS styling library and dynamic style engine that allows for the authoring of CSS properties as JavaScript objects. It functions as a tool for defining visual rules programmatically to manage application appearance and bind styles to JavaScript data. The project distinguishes itself through a specialized implementation of container queries, which adjust element layouts based on the dimensions of parent containers. It also acts as a CSS animation orchestrator, creating scoped keyframe sequences and transitions controlled via JavaScript logic. The library provides capabilities f

京东风格的移动端 Vue 组件库，支持多端小程序(A Vue.js UI Toolkit for Mobile Web)

High performance, maintainable stylesheets.

tailwind-merge is a utility library that resolves conflicting Tailwind CSS class strings when combining multiple sets of classes. It automatically detects and removes conflicting utility classes, keeping only the last class from each group that modifies the same CSS property, while preserving non-conflicting and non-Tailwind classes unchanged. The library handles complex conflict scenarios including modifier-order resolution, arbitrary value type detection, postfix modifier semantics, and asymmetric conflicts where one class group removes preceding classes from other groups but not vice versa

Ripple is a full-stack TypeScript web framework and reactive UI library used for building interfaces with server-side rendering. It organizes user interfaces into a hierarchy of reusable, scoped components with built-in state management and client-side hydration. The framework is distinguished by its fine-grained reactivity, which updates specific DOM elements without requiring full component re-renders. It integrates server-side logic and client-side components within a single TypeScript codebase, enabling a unified full-stack development workflow. The system covers a broad range of capabil

Wujie is a micro-frontend framework and orchestrator designed to embed multiple independent web applications into a single host shell. It provides a system for managing the lifecycle, mounting, and state preservation of sub-applications while maintaining strict JavaScript and CSS isolation. The framework utilizes a web component sandbox combining iframes and custom elements to prevent global variable pollution and style leakage. It features a decentralized event bus for data exchange and state synchronization between isolated micro-applications, along with a mechanism to mirror internal sub-a

parcel-css is a high-performance CSS bundler and processor written in Rust. It provides tools for parsing, transforming, and bundling stylesheets, utilizing a structured abstract syntax tree with typed property representations to ensure accurate analysis and modification. The project features a syntax lowerer that transpiles modern CSS into compatible versions based on target browser requirements and an automated system for managing vendor prefixes. It also includes a module scoper that isolates class and ID identifiers to prevent global namespace collisions. Additional capabilities include