Awesome GitHub RepositoriesStyle Props Frameworks

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

This project is a cross-platform UI toolkit and universal UI framework providing a collection of pre-styled interface components for building mobile and web applications. It functions as a mobile design system and themed component library, allowing developers to maintain a cohesive visual language across different screens and devices using a shared codebase. The toolkit centers on a themed component architecture that supports global and component-level style configurations. This enables the definition of colors and property defaults in a central location to ensure consistent branding and a un

Lucide is a collection of consistent, scalable vector icons designed as a reusable component library for web and mobile interfaces. It provides a standardized set of visual symbols that support dynamic styling, programmatic manipulation, and accessibility features, ensuring that icons remain perceivable and usable across diverse development environments. The library distinguishes itself through a framework-agnostic architecture that defines icons as raw coordinate data, allowing for consistent rendering across various platforms. It supports tree-shakable module exports and bundle size optimiz

NativeBase is a comprehensive toolkit of accessible components and responsive design frameworks used to build consistent mobile and web applications. It provides a cross-platform UI component library and a React Native component framework that enable the creation of layouts across Android, iOS, and the web from a single codebase. The system is distinguished by a responsive design system that automatically adjusts layouts and global themes to fit different screen sizes and color modes. It utilizes a utility-based styling approach, allowing developers to apply visual styles directly through com

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

lottie-react-native is a React Native animation library and cross-platform vector animation engine used to render high-quality animations exported from After Effects via the Lottie file format. It functions as a Lottie animation player that allows mobile applications to display hardware-accelerated animations that maintain visual quality across different screen resolutions. The library serves as a dynamic animation controller, enabling the manipulation of playback, color filters, and text layers in real time. It provides the ability to change animation colors and visuals by applying filters t

lottie-react-native is a library for rendering Lottie JSON animations as native graphics within a cross-platform mobile framework. It serves as a JSON-based animation renderer that parses design-exported files into high-performance vector animations on mobile devices. The framework uses a GPU-accelerated vector animation implementation to offload rendering to the device processor, reducing CPU load to maintain smooth motion. It provides a cross-platform motion framework for controlling animation playback, layout scaling, and dynamic color modifications across different mobile screens. The li

Rofi is a keyboard-driven application launcher and window switcher for X11 desktops. It functions as a scriptable command palette and a compatible emulator for dmenu, capable of reading options from standard input and returning a user selection to standard output. The project is distinguished by a customizable window interface using a CSS-like theming system and a flexible box-model widget hierarchy. It features a recursive theme inheritance system and responsive styling that adapts based on screen dimensions and monitor identifiers. The tool provides advanced text filtering using fuzzy, reg

svg.js is a JavaScript library and vector graphics API that provides a programmatic interface for creating and modifying scalable vector graphics in the browser. It functions as a lightweight wrapper for the browser DOM to simplify the management of SVG elements and attributes. The project serves as both a manipulation library and an animation framework, enabling the development of dynamic user interfaces and web vector animations. It covers the creation of motion and visual transitions for vector graphics to produce fluid animations. The library's capabilities extend to vector graphic visua

Stylus is a CSS preprocessor that transforms a dynamic language into standard CSS. It utilizes a compilation workflow to enable the use of variables, nesting, and arithmetic, which are then rendered into stylesheets for use in frontend asset pipelines. The project is distinguished by a flexible syntax that allows for indentation-based styling, meaning curly braces, colons, and semicolons can be omitted. It further differentiates itself through a JavaScript-driven plugin pipeline and the ability to extend the native syntax with custom JavaScript functions for complex logic. Its capability sur

This project provides a set of customizable calendar and date-picking interfaces for cross-platform mobile applications. It includes an interactive date grid and a date picker interface used for selecting single dates or date ranges. The components support localized date displays, allowing month names and date formatting to adapt to different languages and regional settings. Users can navigate months via a scrollable grid and mark specific days with custom highlights or indicators to signify events and status. The library covers date selection constraints to block specific dates and a select

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

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

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

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

Theme-ui est un framework de thème React et un utilitaire CSS-in-JS utilisé pour construire des interfaces utilisateur thématisables. Il fonctionne comme un outil de système de design qui établit des échelles centralisées basées sur des contraintes pour les couleurs, la typographie et l'espacement afin d'assurer une cohérence visuelle entre les applications. Le framework se distingue par un raccourci réactif basé sur des tableaux pour les mises en page mobile-first et un gestionnaire de mode de couleur dédié qui se synchronise avec les préférences du navigateur et conserve les sélections de l'utilisateur. Il dispose également d'un système pour créer des variantes de style nommées afin de contrôler l'apparence des composants via des propriétés et fournit des capacités de synchronisation pour traduire les configurations de thème en styles Figma. Le projet couvre un large ensemble de capacités de stylisation, incluant l'injection CSS globale pour les réinitialisations d'éléments, les surcharges de thème imbriquées via le contexte, et un système de configuration de fusion profonde (deep-merge) pour étendre les préréglages de design. Il inclut également un ensemble de composants de mise en page thématisables, tels que des grilles réactives et des champs de formulaire standardisés. Un plugin dédié est disponible pour intégrer le système de design au sein des sites Gatsby.

react-native-progress is a collection of visual components for cross-platform mobile applications designed to represent completion percentages and loading states. It provides a set of progress bars, circular indicators, and loading spinners for mobile environments. The library includes specific components for visualizing progress, such as a percentage progress pie, circular progress indicators with inner text, and linear progress bars. For active background processes, it provides animated loading spinners and activity spinners to signal ongoing tasks. These components support task completion