Open-source alternatives to Css Blocks

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

vanilla-extract is a type-safe CSS-in-JS library and zero-runtime CSS framework. It uses TypeScript to define styles and design tokens, compiling these definitions into static CSS files during the build process to eliminate styling overhead in the browser. The system acts as a scoped CSS generator, producing unique class names and local variables to prevent global style leakage and naming collisions. It provides a type-safe styling tool that validates CSS property values and ensures design tokens adhere to defined themes during development. The framework covers comprehensive styling utilitie

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

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

Tamagui is a cross-platform user interface framework designed to build high-performance, themeable applications that share logic and styling across web and mobile environments. It functions as a comprehensive design system orchestrator, providing a collection of type-safe components that compile to optimized atomic CSS for the web and native code for mobile platforms. By utilizing a build-time compiler, the framework eliminates runtime overhead, ensuring consistent visual output and interaction behavior regardless of the target platform. The framework distinguishes itself through its advanced

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

Riot is a component-based library for building user interfaces through modular, single-file components. It functions as a framework for creating reusable elements that combine markup, logic, and scoped styles, which are then compiled into standard JavaScript functions for browser execution. The library distinguishes itself by utilizing direct rendering, which updates the document object model by tracking state changes without the overhead of a virtual representation. It supports server-side rendering and hydration to improve initial page load performance and search engine indexing. Developers

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

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

Object-Oriented CSS (OOCSS) is a CSS methodology and framework that structures stylesheets around reusable, composable classes. Its core principle is separating layout and structure from visual design, allowing the same structural classes to work with different visual treatments. The approach encourages styling elements based on their own properties rather than their location in the DOM, making components portable across different contexts. The methodology is built on class composition, where complex visual patterns are created by combining multiple single-purpose CSS classes on a single elem

This project is a React-based administrative template and UI kit designed for building dashboards. It provides a comprehensive collection of pre-styled layouts, an accessible component library, and a Sass-based UI framework for creating administrative interfaces. The template is specifically structured as an AI-optimized project, utilizing coding patterns and organization designed to help AI assistants generate consistent, production-ready React code. It features a flexible styling system using Sass variables and CSS custom properties to support customizable light and dark themes. The kit co

react-select is a customizable select input for React applications that supports single and multiple value selection with integrated search. It functions as a form input library providing a selection interface capable of fetching and displaying options from remote APIs dynamically as a user types. The library is distinguished by a component-injection architecture that allows users to replace internal UI fragments with custom React components. It further enables deep visual customization through prop-based style merging, allowing user-defined CSS objects to override internal defaults for brand

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

Compiled is a styling framework for React that converts component-level styles into static, atomic CSS files during the build process. By utilizing build-time abstract syntax tree transformations, the library eliminates the need for runtime style injection, ensuring that styles are processed and optimized before the application executes. The framework distinguishes itself by decomposing complex style objects into individual, reusable utility classes, which minimizes total stylesheet size. It maintains support for dynamic component properties by mapping them to CSS custom variables, allowing f

rscss is a CSS architecture framework and design system specification used to organize stylesheets. It provides a methodology for defining reusable components and their child elements through a consistent naming standard and component-based file partitioning. The system emphasizes a flat nesting hierarchy to prevent specificity conflicts and deep selector nesting. It utilizes a visual variant pattern that applies appearance variations to components via prefixed classes and a utility class specification for implementing global helper classes for layout adjustments. The framework covers the br

Fuelux is a JavaScript UI framework and front-end component library used to build consistent, unified user interfaces. It provides a collection of lightweight controls and CSS extensions designed to ensure visual and functional consistency across different web views. The project employs a modular frontend architecture, organizing functionality into independent JavaScript control modules. This design allows the framework to remain lightweight and extendable while decoupling functional behavior from visual CSS definitions. The framework handles interface development through component-based sta

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

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

css.gg is a collection of visual assets providing a CSS UI icon library and an SVG icon set. It delivers vector icons and glyphs through CSS classes, SVG sprites, and a library of styled components for web interfaces. The project includes a Figma UI asset pack to support the creation of high-fidelity prototypes and interface mockups. These design assets can be exported into external tools for prototyping and layout standardization. The system provides capabilities for embedding vector graphics, integrating typographic symbols, and managing design assets via API or NPM. It also supports the c

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

This project is a pre-configured project foundation for building scalable web applications. It serves as a React application boilerplate and component scaffold designed to provide a scalable architecture and a foundation for long-term growth. The setup is characterized by an offline-first web framework that maintains application availability without an active network connection. It includes an internationalized UI foundation with integrated translation tooling and a modular CSS-in-JS setup for scoped, component-level styling. The boilerplate covers broader capability areas including automate

This project is a technical library and knowledge base for the Qt framework, serving as a C++ GUI programming guide and a resource for cross-platform development. It provides a collection of technical guides, best practices, and instructional materials focused on building applications using the Qt ecosystem. The repository focuses on optimizing application performance and development workflows. It covers architectural patterns for improving build speeds and execution efficiency, including the use of in-memory databases and asynchronous function calls. It also offers specialized guidance on in

Base UI is a headless component library and unstyled framework providing accessible interface primitives. It decouples behavioral logic and state management from the visual layer, allowing developers to implement complex UI patterns while maintaining total control over the final styling. The library implements WAI-ARIA design patterns to ensure all primitives support standard keyboard navigation and screen reader accessibility. It provides a suite of low-level building blocks that handle the internal mechanics of interface elements without bundling any CSS. The framework covers a broad range

PrimeReact is a comprehensive UI component library for building interactive user interfaces with React. It provides an accessible component suite, a form input framework, and a data visualization toolkit designed to meet accessibility standards through built-in keyboard navigation and focus management. The library features a themed design system that allows for visual customization via pre-defined skin sets or an unstyled mode. This unstyled mode decouples component behavior and accessibility logic from the presentation layer, enabling the implementation of custom corporate design systems. C

This project is a utility and integration layer for mapping scoped CSS module identifiers to React components. It functions as a wrapper and style manager that translates class names into unique local identifiers to prevent style leakage across an application. The system includes a composition tool for merging multiple CSS module identifiers on single elements and an integration layer that connects SASS, SCSS, and LESS preprocessed style maps to component markup. It covers component styling through encapsulated style mapping and the distribution of styles to child elements. The library also

North is a responsive web design methodology and Sass-based CSS architecture framework. It provides a system for building mobile-first user interfaces using fluid grids and progressive enhancement techniques to ensure a consistent experience across different browser capabilities and screen sizes. The project features a standardized CSS naming system that uses Sass mixins to programmatically generate class names, distinguishing between components, layouts, and states. It also functions as a frontend project scaffolding tool, providing a generator to bootstrap new environments with pre-configur

css-loader is a Webpack module that transforms CSS files into JavaScript modules and resolves their internal dependencies during the bundling process. It acts as a CSS asset resolver, translating import rules and url functions into module identifiers to integrate stylesheets into a dependency graph. The project implements CSS Modules to prevent global style collisions by scoping class and ID selectors locally with unique identifiers. It includes a system for Interoperable CSS (ICSS), enabling the sharing and composition of styles across different classes and modules through reusable value dec