331 dépôts
Solutions specifically designed to encapsulate styles within UI components or provide hooks for component-level customization.
Explore 331 awesome GitHub repositories matching user interface & experience · Component Styling Tools. Refine with filters or upvote what's useful.
Developer Roadmap est une plateforme pilotée par la communauté qui fournit des parcours d'apprentissage structurés basés sur des graphes pour le génie logiciel. Elle sert de dépôt de connaissances complet où les domaines techniques sont organisés en séquences visuelles pour guider l'acquisition de compétences professionnelles et la croissance de carrière. Le projet se distingue par un écosystème collaboratif qui permet aux utilisateurs de contribuer à des roadmaps, d'organiser les meilleures pratiques de l'industrie et de maintenir des profils professionnels. Il intègre des cadres d'évaluation diagnostique pour évaluer la compétence technique, aidant les développeurs à identifier les lacunes en matière de connaissances et à se préparer aux entretiens professionnels grâce à des séquences d'apprentissage ciblées. Au-delà de ses capacités de cartographie de base, la plateforme propose des idées de projets pratiques et du tutorat interactif pour renforcer les concepts d'ingénierie. Elle offre un espace centralisé pour que la communauté puisse partager des ressources, suivre le développement progressif des compétences et naviguer dans des paysages techniques complexes.
Isolates style rules to specific components to prevent style leakage across the application.
React est une bibliothèque JavaScript pour créer des interfaces utilisateur basées sur une architecture orientée composants et un flux de données unidirectionnel.
Applies visual styles to interface elements using standard class attributes and external style sheets.
Vue est un framework JavaScript progressif basé sur des composants, conçu pour construire des interfaces utilisateur réactives et des applications monopage. Il se concentre sur un système de modèles déclaratif qui transforme le HTML en fonctions de rendu efficaces, permettant aux développeurs d'organiser des interfaces complexes en unités isolées et réutilisables qui se synchronisent automatiquement avec l'état de l'application. Le framework se distingue par un système de réactivité de suivi des dépendances qui surveille l'accès aux données pendant le rendu pour déclencher des mises à jour précises. Il fournit une architecture flexible qui prend en charge à la fois l'adoption incrémentale en tant que bibliothèque légère et le développement d'applications à grande échelle. Les développeurs peuvent tirer parti d'un modèle d'extensibilité robuste basé sur des plugins pour injecter une logique globale, tandis que la réconciliation du DOM virtuel du framework garantit des mises à jour d'interface efficaces en calculant des mutations minimales. Au-delà de ses capacités de rendu de base, le projet inclut une suite complète d'outils pour gérer l'état de l'application, le routage basé sur les URL et le rendu côté serveur. Il offre un support étendu pour la composition de composants, la distribution de contenu et la gestion d'animation, aux côtés de mesures de sécurité intégrées comme l'échappement automatique du contenu pour prévenir les vulnérabilités courantes. Le framework est distribué avec des déclarations de type officielles pour prendre en charge l'analyse statique et peut être installé via des gestionnaires de paquets standard ou intégré directement dans les environnements de navigateur via des balises de script.
Links CSS values directly to component state so that styles update automatically when data changes.
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
Applies consistent, cross-browser styling to form inputs, textareas, selects, and file upload controls.
Angular is a platform for building web applications using a component-based architecture. It provides a comprehensive suite of tools for managing encapsulated UI units, including hierarchical dependency injection, a declarative template system, and fine-grained reactivity through signals. The framework supports complex application requirements such as client-side routing, form management, and internationalization. The project includes a command-line interface for scaffolding and build automation, alongside a testing ecosystem for unit and integration verification. It offers multiple rendering
Permits the inclusion of global CSS files by overriding default component-level style isolation.
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
Grants granular control over table elements through semantic class hooks for headers, rows, cells, and pagination controls.
This project is a component-based UI framework and a React Material Design library. It provides a comprehensive set of reusable interface elements that implement Google Material Design specifications to ensure consistent visual styles and behaviors across web applications. The framework enables the construction of professional layouts for enterprise web interfaces and the rapid prototyping of frontend designs. It uses a collection of pre-designed React components to standardize layouts and accelerate the overall development process. The system integrates a styling engine and theme-based inje
Distributes global design configurations via React context to ensure consistent styling across all components.
Utility-first CSS framework for fast, design-system-friendly styling.
Triggers style changes during user interaction through hover, focus, and active variants for immediate visual feedback.
Ce projet est une bibliothèque d'interface utilisateur graphique en mode immédiat conçue pour le développement rapide d'outils et d'interfaces de débogage. En générant la géométrie de l'interface utilisateur à chaque image via du code procédural, elle élimine le besoin de synchronisation d'état persistante entre les données de l'application et l'interface. Elle est principalement destinée à être intégrée dans des pipelines de rendu existants, où elle produit des tampons de sommets bruts et des commandes de dessin agnostiques vis-à-vis de l'API graphique sous-jacente. La bibliothèque se distingue par une architecture hautement découplée qui prend en charge des mises en page complexes, ancrables et multi-fenêtres. Elle gère les positions des fenêtres, le glisser-déposer des onglets et le fractionnement des nœuds, permettant aux développeurs de détacher les éléments d'interface dans des fenêtres de système d'exploitation indépendantes. Pour assurer une interaction cohérente dans divers environnements, elle mappe les événements d'entrée natifs dans un format unifié et fournit une portée robuste basée sur des identifiants pour suivre les états des éléments à travers les images. Le framework offre une large surface de capacités pour construire des outils de moteur sophistiqués et des utilitaires de diagnostic. Il inclut la prise en charge de composants visuels avancés tels que des éditeurs de nœuds, des traceurs 2D et 3D, et des inspecteurs spécialisés, ainsi qu'une infrastructure pour la mise à l'échelle DPI et le rendu de formes personnalisées. Le système est conçu pour une haute portabilité, avec des options de configuration à la compilation qui permettent aux développeurs d'adapter les structures de données de base et les types mathématiques aux exigences spécifiques du moteur. Le dépôt fournit des exemples étendus pour connecter la bibliothèque aux principaux backends et frameworks graphiques, ainsi que des outils pour générer des liaisons spécifiques aux langages.
Customizable visual properties let users apply gradients and unique aesthetic themes to standard interface elements.
This project is a web-native presentation framework that renders slide decks from standard HTML or Markdown. It functions as a declarative slide engine, managing navigation, state persistence, and lifecycle events through a configuration-driven interface. By leveraging standard web technologies, it enables the creation of responsive, browser-based presentations that support complex layouts, nested transitions, and interactive content. The framework distinguishes itself through a modular, plugin-based architecture that allows developers to extend core functionality using custom hooks and event
Adjust global design tokens like colors and spacing by modifying CSS custom properties on the root element.
Nuxt is a universal web framework designed for building full-stack applications that seamlessly transition between server-side rendering and client-side interactivity. It provides a comprehensive development environment that automates routing, dependency injection, and type generation, allowing developers to focus on application logic rather than manual configuration. By executing code in a platform-agnostic server engine, it supports deployment across diverse environments, including edge networks, serverless functions, and traditional Node.js runtimes. The framework distinguishes itself thro
Applies scoped styles, CSS modules, and dynamic class bindings directly within single-file components for modular visual presentation.
Ionic Framework is a cross-platform UI toolkit and hybrid app framework used to build native-quality mobile and progressive web applications using HTML, CSS, and JavaScript. It functions as a web component library that enables the deployment of a single codebase across iOS, Android, and the web. The framework features a platform-adaptive design system that automatically switches the visual style of components to match the design patterns of the host operating system. It utilizes a web-component-based architecture with CSS custom properties for global theming and specialized bindings to synchr
Automatically switches the visual style of components to match the design patterns of iOS and Android.
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
Provides a comprehensive CSS-in-JS solution for encapsulating and scoping styles directly within React components.
Ant Design Pro is a comprehensive starter kit and administrative framework for building enterprise-level admin dashboards and professional user interfaces. It provides a structured project foundation and a set of React admin templates, including pre-defined layout blocks and routing configurations. The framework distinguishes itself by providing a built-in frontend mocking environment and mock-service middleware to simulate backend API responses during development. It also features integrated conversational AI components and assistant pages for embedding intelligent interactions directly into
Implements a styling architecture that combines theme tokens, CSS Modules, and utility-first CSS.
This project is a comprehensive administrative dashboard framework built for the Vue ecosystem. It serves as a modular starter kit designed to accelerate the development of large-scale, enterprise-grade web applications by providing a pre-configured foundation of reusable components and standardized layout patterns. The framework distinguishes itself through a configuration-driven approach to interface development, allowing developers to generate complex forms and tables from schema definitions rather than manual coding. It integrates dynamic route generation and role-based access control, en
Allows overriding default design tokens and theme variables to match specific branding requirements.
Filament is a full-stack framework for building administrative panels and management interfaces within the Laravel ecosystem. It provides a declarative, component-based architecture that allows developers to construct complex, data-driven applications using server-side configuration objects rather than manual HTML. By inspecting database model structures and relationships, the framework automates the generation of CRUD interfaces, forms, and data tables, significantly reducing boilerplate code. The project distinguishes itself through a highly modular and extensible design that supports custo
Provides styling hooks for customizing slider tracks, handles, and visual feedback indicators.
This project is a curated knowledge base and technical reference for professional web styling. It serves as a comprehensive guide to modern CSS best practices, focusing on techniques that leverage native browser capabilities to create efficient, maintainable, and scalable stylesheets. The collection emphasizes the use of declarative style logic and modern layout engines to replace brittle, imperative approaches. By prioritizing native pseudo-class state management, logical property mapping, and relative unit scaling, the guide demonstrates how to build responsive interfaces that remain consis
Uses pseudo-classes to selectively apply or exclude styles from specific list items or elements.
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
Provides encapsulated, co-located CSS with unique class names to prevent style clashes.
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
Implements a system for defining styles scoped to specific components to avoid global CSS conflicts.
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
Allows applying custom visual themes and overriding CSS properties to modify the selection interface look and feel.