Awesome GitHub RepositoriesDesign System Foundations

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

shadcn-vue is a collection of accessible and unstyled UI components for Vue. It serves as a design system foundation and a port of Radix UI primitives to the Vue ecosystem, focusing on providing a base for highly customizable web interfaces. The project utilizes a template-driven distribution model, delivering raw source code via a CLI rather than a compiled library. This allows for the direct modification of components using Tailwind CSS utility classes to establish a unique visual identity. The library covers accessible component architecture and custom design system implementation. It pro

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

This project is a React Native UI library and mobile component framework designed for building consistent, themed mobile applications. It provides a collection of reusable user interface components and layout tools, functioning as a cross-platform design system to maintain visual uniformity across different mobile platforms. The toolkit distinguishes itself through a themed UI approach, utilizing global design foundations for typography, color palettes, and spacing. It allows for dynamic theme configuration and the use of style presets to ensure standardized branding across an entire project.

CSS Guidelines est un guide de style complet et une référence pour écrire du CSS maintenable, évolutif et modulaire dans des projets web à grande échelle. Il fournit un ensemble de standards professionnels pour organiser les feuilles de style et implémenter des motifs de nommage cohérents afin d'améliorer la santé de la base de code à long terme et de réduire la dette technique. Le projet se concentre sur une méthodologie stricte pour définir la portée des classes afin de créer des composants isolés et prévisibles, empêchant les fuites de style entre des parties indépendantes d'une interface utilisateur. Il met l'accent sur une hiérarchie de sélecteurs plate pour éviter les conflits de spécificité et encourage la séparation de la mise en page structurelle de l'esthétique visuelle. En organisant le code dans des structures de répertoires logiques et en appliquant des principes de conception à responsabilité unique, les directives garantissent que les styles restent faciles à mettre à jour et à remplacer à mesure qu'un projet grandit. Ces standards couvrent les aspects fondamentaux de la construction de systèmes de design fiables, y compris la gestion des couches de cascade et l'implémentation de modèles architecturaux cohérents. La documentation sert de ressource centrale pour les équipes visant à établir des conventions de style prévisibles et de haute qualité à travers des interfaces complexes.

Zensical is a documentation framework and markdown static site generator designed for authoring modular technical topics. It includes a static site build orchestrator that uses a dependency graph to parallelize asset compilation and perform differential updates. The project features a federated search engine that aggregates results from multiple documentation projects using a combination of inverted indexes and vector-based semantic search. It also includes an LLM context generator to extract lean, semantic information from modular topics to optimize prompts for large language models. The sy

Ce projet est un framework d'interface utilisateur basé sur React qui sert de base à la création d'interfaces web évolutives et accessibles. Il fournit une collection de composants pré-stylisés et de conteneurs de mise en page conçus pour standardiser le langage visuel et le comportement des composants dans les applications. La bibliothèque utilise une architecture basée sur la composition, permettant aux développeurs d'imbriquer des primitives à usage unique pour construire des modèles d'interface complexes. En mappant ces blocs de construction directement sur des éléments HTML sémantiques et en utilisant un modèle de transfert de propriétés (prop-forwarding), le système garantit que les comportements standard du navigateur, la navigation au clavier et la compatibilité avec les lecteurs d'écran sont préservés par défaut. La cohérence visuelle est maintenue grâce à un système centralisé de jetons de conception (design tokens) qui régissent la typographie, l'espacement et la couleur. Le style est appliqué directement via les attributs des composants, ce qui réduit la dépendance aux feuilles de style externes tout en prenant en charge la construction de mises en page réactives sur différentes tailles d'écran.