This is the IBM Carbon Design System monorepo, a comprehensive UI component library and design token system. It provides production-ready React components (via `@carbon/react`) and Lit-based Web Components (via `@carbon/web-components`), along with SCSS styles, icons, pictograms, themes, typography, layout, and motion design tokens. The repository also includes a CLI tool for scaffolding and bundling (`@carbon/cli`), an upgrade utility with jscodeshift codemods for automated version migrations (`@carbon/upgrade`), and a set of shared configurations (ESLint, stylelint, prettier, Jest). The architecture is a multi-package monorepo managed with Yarn workspaces and Lerna, with dedicated build pipelines for icons (via `@carbon/icon-build-helpers`) and design tokens (via Style Dictionary). The system is heavily tested with Jest, Playwright for accessibility and end-to-end tests, and includes Figma code-connect files for design-to-code integration.
This is a Tailwind CSS plugin that provides a basic reset and styling for HTML form elements. It generates both global base styles and utility classes (e.g., `form-input`, `form-checkbox`) that make form elements easy to customize with Tailwind utilities. The plugin handles text inputs, checkboxes, radio buttons, selects, textareas, and date/time inputs, including edge cases like forced-colors mode, indeterminate checkboxes, and Safari-specific date input quirks. It uses inline SVGs via `mini-svg-data-uri` for custom chevrons and check/radio indicators. The architecture is a single-file plugin that leverages Tailwind's `plugin.withOptions` to support a `strategy` option ('base', 'class', or both). External dependencies are minimal: `tailwindcss` as a peer dependency and `mini-svg-data-uri` as a runtime dependency. The code is well-structured, handles color resolution with CSS variables, and is actively maintained with regular releases.
Style Dictionary is a mature, well-architected design token transformation and build system. It ingests structured design tokens (JSON, JS, JSON5, YAML) and, through a configurable pipeline of parsers, preprocessors, transforms, reference resolution, and formatters, outputs platform-specific code files for web (CSS, SCSS, Less, Stylus, JavaScript, TypeScript), Android (XML, Compose/Kotlin), iOS (Objective-C, Swift), Flutter/Dart, and more. The system is heavily extensible via hooks—transforms, formats, filters, actions, parsers, preprocessors, and file headers—allowing teams to adapt token processing to any design system. It supports the W3C Design Tokens Community Group (DTCG) standard syntax ($value, $type) alongside its original format. The codebase demonstrates strong engineering: comprehensive test suites (unit, integration, snapshot, performance), a clean class-based core (lib/StyleDictionary.js), thoroughly tested reference resolution, and a plugin-style registration system. While the sheer breadth of platform targets and dual syntax support adds complexity, the architecture remains modular and the majority of components are independently reusable. A few areas show technical drift—patched external test dependencies, bundled ESM shims for glob and memfs, and some deprecated APIs slated for removal in v6—but overall the project is actively maintained with frequent releases and responsive issue triage.
Intent UI is a copy-paste accessible React component library built on React Aria Components and styled with Tailwind CSS v4. It follows the shadcn/ui distribution model: components are installed via CLI (`npx shadcn@latest add @intentui/<component>`) from a registry served by the included Next.js documentation site. The repository contains over 80 UI components (buttons, forms, overlays, charts, navigation, layouts, etc.), each with multiple usage examples and comprehensive MDX documentation. The architecture is a Next.js App Router application that also functions as the component registry host, with custom build scripts generating registry JSON, icon metadata, and LLM-friendly documentation exports. External dependencies include React Aria Components for accessibility, Recharts for charts, motion for animations, sonner for toasts, and tailwind-variants for styling variants. The library is monetized through sponsor tiers and premium design assets, but the core components are MIT-licensed.
Onlook is a browser-based visual editor for building and modifying Next.js + Tailwind CSS websites. It provides a Figma-like canvas where users can directly manipulate React components, with changes written back to source code via AST-based transformation. The application integrates an AI chat assistant that can generate code, edit files, and run terminal commands through a set of well-defined tools (e.g., search-replace, file edit, bash). The monorepo architecture separates concerns into packages for AI agents, code parsing, font management, UI components, database access (Drizzle + Supabase), git operations, and sandbox management (CodeSandbox). It also includes a complete billing system (Stripe), GitHub integration for project import, custom domain management, and a publish/deployment pipeline. The codebase demonstrates strong engineering practices with type-safe tRPC APIs, MobX state management in the editor, extensive use of Radix UI primitives, and a consistent monorepo toolchain (Bun workspaces, ESLint, Prettier). While the editor engine is somewhat monolithic, individual packages like the AST parser, font helpers, and utility library are well-isolated and testable.
This repository is the open-source iOS client for Kickstarter, a crowdfunding platform. It is a production-grade application built with Swift, UIKit, and SwiftUI, following an MVVM architecture with heavy use of ReactiveSwift and some Combine. The app supports project discovery, pledging, rewards, comments, video feeds, user settings, and authentication. The codebase is well-structured with a dedicated design system (KDS), GraphQL integration via Apollo, extensive snapshot and unit testing, and feature flag experimentation via Statsig. While the code quality is high with many reusable patterns (ValueCell, ShimmerLoading, PaginatingList), there is moderate technical drift due to the coexistence of two reactive frameworks, legacy color references, and some deprecated button styles.
This repository implements the Salesforce Lightning Design System (SLDS) as a reusable React component library. It provides over 60 accessible UI components including buttons, modals, tooltips, data tables, and layout elements that follow SLDS guidelines. The library emphasizes accessibility with quarterly audits, includes comprehensive documentation via Storybook, and provides utilities for common React patterns like ARIA prop handling and DOM portal management. Components are designed to be composable and customizable while maintaining visual and behavioral consistency with the Salesforce design system.
BlazorBlueprint is a comprehensive Blazor UI component library inspired by shadcn/ui, providing over 112 styled components and 28 headless primitives. It targets .NET 8 across Server, WebAssembly, and Auto render modes, with full accessibility (ARIA, keyboard navigation), theming via CSS custom properties (compatible with shadcn CSS variables), and zero Tailwind/Node setup. The library is split into two layers: Primitives (headless, behavioral components with focus management, positioning, and portal services) and Components (styled, ready-to-use widgets like DataGrid, charts, forms, dialogs, and navigation). It ships with four icon libraries (5,200+ icons) and 11 chart types via Apache ECharts. The architecture emphasizes composability through cascading contexts, a consistent form-field pattern, and a utility-first approach with the ClassNames.cn helper for Tailwind class merging. The codebase demonstrates strong engineering practices: extensive use of generics, expression trees for filtering, JS interop with guarded disposal, and a localization system with 200+ string keys. However, the large API surface, heavy JS interop, and limited test coverage (only a few unit tests for DataGrid and hierarchy utilities) present maintenance risks.
Sard Uniapp is a UI component library built on Uniapp + Vue 3 framework providing 117+ reusable components for cross-platform application development. The library follows a modular architecture where each component includes implementation, type definitions, styling, and unit tests. Key features include tree shaking support, TypeScript integration, theme customization, internationalization, dark mode support, and >80% unit test coverage. The library is designed for multi-end compatibility targeting H5, WeChat mini-program, Alipay mini-program, and native Apps (excluding nvue/uvue).
Flowbite is a production-grade UI component library built on top of Tailwind CSS. It provides a comprehensive set of interactive, accessible components (modals, dropdowns, tooltips, carousels, datepickers, etc.) that are initialized via HTML data attributes and backed by a lightweight JavaScript runtime. The library is distributed as an npm package with multiple entry points (ESM, CJS, UMD, Turbo, Phoenix) and includes a Tailwind CSS plugin that injects base styles for forms, tooltips, charts, and third-party integrations. The repository also hosts an extensive Hugo-based documentation site with live examples, framework integration guides (React, Vue, Angular, Laravel, Django, etc.), and a theming system with five pre-built themes (default, minimal, enterprise, playful, mono). The architecture follows a consistent component pattern: each component is a class with `init()`, `destroy()`, and static `init*()` methods that scan the DOM for data attributes. A global `Instances` singleton manages all component instances by ID, supporting override and random ID generation. The library uses Popper.js for positioning dropdowns, tooltips, and popovers, and relies on an external `flowbite-datepicker` for datepicker functionality. The Tailwind plugin (`plugin.js`) uses `plugin.withOptions` to conditionally add base styles and component classes, and the CSS theming system leverages CSS custom properties for colors, fonts, radii, and shadows with dark mode support. While the library is well-structured and actively maintained, its large surface area (30+ components) and extensive documentation create maintenance overhead. The integration guides for 20+ frameworks are prone to drift, and the inline SVG icons and hardcoded Tailwind classes in documentation examples require careful version alignment. The codebase demonstrates solid engineering practices with TypeScript, Webpack builds, and consistent patterns, making it a reliable choice for projects needing a Tailwind CSS component library with JavaScript interactivity.
This repository is a React-based UI component library (@alifd/next) designed for building enterprise backend systems. It provides over 50 reusable UI components (Button, Input, Table, Form, etc.) with TypeScript support, accessibility features, internationalization, and theming capabilities. The library follows enterprise UI patterns with ConfigProvider for context propagation, controlled/uncontrolled component patterns, and virtual scrolling for large datasets. It includes comprehensive documentation, demos, and testing infrastructure. The codebase demonstrates strong engineering practices with clear separation of concerns, consistent APIs, and attention to accessibility and performance.
This repository is a production-grade Model Context Protocol (MCP) server that bridges AI assistants to Figma. It exposes 100+ MCP tools for reading and manipulating Figma files, variables, components, styles, FigJam boards, Slides, version history, tokens, and accessibility audits. The architecture is dual-mode: a local Node.js server (`src/local.ts`) communicates over stdio to AI clients and via WebSocket to a bundled Figma Desktop Bridge plugin, while a Cloudflare Workers variant (`src/index.ts`) supports cloud sessions with OAuth and a Durable Object WebSocket relay. The Desktop Bridge is the primary data channel, with Figma REST API fallbacks for scenarios where the plugin is unavailable or limited to certain plans. Beyond basic Figma CRUD, the codebase contains substantial engineering investment in design-token synchronization: canonical DTCG-aligned token documents round-trip through parsers and formatters for CSS variables, Tailwind v3/v4, SCSS, TypeScript modules, Style Dictionary, and Tokens Studio. A separate extraction engine (`src/core/extraction/`) mines production codebases for styling conventions and scaffolds design-system packages, while a scoring engine produces weighted design-system health dashboards. These components give the repo a hybrid quality: it is fundamentally an application, but its token pipeline and codebase-analysis subsystems are data-engineering-like assets that could be reused independently. The codebase demonstrates strong engineering practices: strict Zod schemas, consistent tool registration factories, connector abstraction, extensive Jest test coverage, atomic file writes, adaptive response compression, and careful caching/invalidation. However, it also carries meaningful debt: some token parsers are unimplemented stubs, a few files are monolithic (`figma-tools.ts`, `src/local.ts`), local/cloud connector implementations must be kept in sync manually, and some documentation references outdated internal paths. Overall, this is a mature, feature-rich MCP server with several genuinely reusable components for anyone building design-tool pipelines, token bridges, or local process-lifecycle infrastructure.
Semi.Avalonia is a comprehensive Avalonia UI theme library inspired by Semi Design, delivered as multiple NuGet packages. It provides a complete set of styled controls (buttons, text boxes, data grids, color pickers, etc.) with Light, Dark, and High Contrast themes, plus localization in 16 languages. The architecture follows Avalonia's resource dictionary and control theme patterns: each control has shared, light, dark, and high contrast XAML files that define visual states, triggers, and animations. A central `SemiTheme` class orchestrates theme swapping and locale selection via merged resource dictionaries. The repository also includes a demo application for desktop, Web, Android, and Lixux DRM platforms. The theming system is built on a well-structured token system using `Variables.axaml` and color palette files (e.g., `Light.axaml`, `Dark.axaml`) that define design tokens like spacing, border radii, and semantic colors. Control themes extensively use `DynamicResource` references, enabling runtime theme switching. The color picker extension (`Semi.Avalonia.ColorPicker`) is a notable sub-system with spectrum, palette, and component tabs supporting RGBA and HSVA models. Animations (e.g., `SemiPopupAnimations`) and custom converters (e.g., `PositionToAngleConverter`) add polish. The demo application is an MVVM-based showcase that exercises all controls and provides installation instructions. The CI/CD pipeline builds and publishes NuGet packages and cross-platform demos. Overall, this is a production-quality theming library with good mainainability, though some duplication between variant themes and a large icon file present potential maintenance costs.
This repository is the marketing website for OpenClaw, an open-source AI agent platform that runs locally and integrates with chat applications. The site serves as the primary distribution channel for installer scripts (macOS/Linux via shell, Windows via PowerShell), hosts a blog with technical product notes, an ecosystem catalog of ~70 open-source projects, press coverage, podcast episodes, and community testimonials. It is built as a static site using Astro 7 with TypeScript, deployed on Vercel, and leverages a custom design system (Carapace) for CSS tokens and components. The codebase is well-structured with reusable utility libraries, client-side interactive components (hero animation, integration rail, quickstart code selector), and comprehensive SEO/security measures (sanitized URLs, JSON-LD escaping, CSP headers). While primarily a marketing site, it also includes CI workflows for cross-platform installer testing and skill updates. The repository is actively maintained with frequent commits, dependabot updates, and a clear separation between website code and product installer scripts.
Nue is a monorepo for a standards-first web framework ecosystem, designed as a minimalist alternative to React/Next.js. It provides a complete toolchain for building content-driven websites and single-page applications using semantic HTML, CSS, and JavaScript with minimal abstraction. The core packages include Nuekit (CLI and build system), Nuedom (UI assembly with server-side rendering via a fake DOM), Nuemark (a Markdown flavor), Nueserver (edge-first HTTP server), Nueglow (syntax highlighting), Nuestate (URL-first reactive state management), and Nueyaml (predictable YAML parser). The framework emphasizes separation of concerns, design systems, and the UNIX philosophy of small composable tools. It is built on the Bun runtime and targets developers frustrated with heavy JavaScript frameworks, offering instant startup, universal hot reload, and a 1MB global install size. The repository also includes production templates (blog, SPA, full-stack) and the official Nue website (nuejs.org) with documentation, blog, and interactive examples.
Iconoir is an open-source icon library (MIT) providing over 1600 SVG icons in 24×24 grid, distributed as framework-specific packages for React, React Native, Vue, SolidJS, Flutter, and CSS. The repository is a monorepo containing the raw SVG icons, a build pipeline that generates typed component libraries from those SVGs, and a Next.js website for browsing and downloading icons with search, filtering, and customization. The build system (bin/build/index.js) uses a plugin architecture to produce components for each target framework, while the website includes virtualized rendering for performance. Despite the large surface area, the codebase is well-organized with clear separation between icon sources, build tooling, and distribution packages. The primary architectural pattern is code generation: SVGs are transformed into framework-specific components via templates, enabling consistent cross-platform delivery. Notable components include the build pipeline's template system (e.g., icon-template.js), the website's virtualized icon list with React Window, and a Python script for enriching icon metadata from naming conventions.
This repository is a React component library (`@codegouvfr/react-dsfr`) that provides a complete implementation of the French government's Design System (DSFR) for modern web applications. It covers nearly all DSFR UI components (buttons, forms, navigation, modals, tables, etc.) and adds framework-specific integrations for Next.js (both Pages Router and App Router), Vite, and Create React App, including SSR support without flash. The library also ships a CLI tool (`npx react-dsfr`) that performs static analysis of a project's source code to generate an optimized CSS bundle containing only the DSFR components actually used, solving a common bloat problem in design-system integrations. Additionally, it provides a GDPR consent management system, i18n per component, MUI theming compatibility, dark mode, and a large set of SVG pictograms. The architecture is a typical React library: each component is a memoized, forwardRef-wrapped functional component using DSFR CSS classes via a `cx` helper. Build-time scripts parse the DSFR CSS into TypeScript constants (spacing, colors, breakpoints, class names) to ensure type safety and ease of use. The library avoids bundling all DSFR CSS in JavaScript; instead, it relies on the CSS being loaded from `node_modules` and optionally trimmed by the CLI. Notable internal patterns include a lightweight `StatefulObservable` for reactive state, a set of stable-callback hooks (`useConst`, `useConstCallback`) to avoid unnecessary re-renders, and a factory pattern for pictograms. While not a hybrid repo, its build pipeline demonstrates a unique approach to CSS-to-TypeScript code generation. The codebase is actively maintained with a comprehensive test suite covering both runtime behavior and build-script correctness. However, it carries some technical drift: it relies on a patched version of `@gouvfr/dsfr` (1.14.2), the pictograms are large inline SVGs that must be manually updated, and the CSS optimization script uses hardcoded component mappings that could diverge from future DSFR releases. Overall, it is a high-quality, production-grade library suitable for any French public service website built with React.
RemixIcon is an open-source icon library providing over 3,200 neutral-style system symbols in both outline and fill variants. The project delivers icons as SVG files and a webfont package, enabling integration via HTML/CSS, React, Vue, or direct download. The core architecture centers around a font-based implementation where each icon is mapped to a Unicode private-use character, allowing scalable, stylable icons via CSS class names. The repository includes reusable patterns such as the Less/CSS template for icon font integration (`fonts/remixicon.less`/`fonts/remixicon.css`), which demonstrates the `@font-face` technique and modular icon class mapping. Additionally, the `tags.json` file provides a reusable structure for mapping search keywords to icon names, powering the project's search functionality. Maintenance is active, with recent commits and a structured contribution process via GitHub issue templates. Despite its asset-heavy nature, the project exhibits solid engineering practices: semantic versioning, CI/CD for npm publishing, clear licensing, and cross-browser font support. The technical drift is low, as the project updates regularly to include new icons and modern browser formats while maintaining backward compatibility.
Taro UI is a multi-platform UI component library designed for the Taro framework, enabling developers to build applications that run on WeChat Mini Program, H5, React Native, Alipay, and other platforms with a single codebase. The library provides over 40 reusable UI components (including form controls, layout elements, navigation tools, and feedback mechanisms) with consistent APIs across platforms. Architecture follows a monorepo structure with core components in packages/taro-ui/src, platform-specific adaptations in packages/taro-ui/rn, documentation built with VitePress, and multiple demo applications showcasing usage. The library relies on Taro as a peer dependency and utilizes utilities like classnames and dayjs for cross-platform compatibility. Recent active maintenance has included migration to Function Components + Hooks, build system upgrades to tsup, TypeScript 5.3 adoption, and CSS precompilation efforts to address prior technical debt.
This repository is a production-grade React mobile UI component library, `@arco-design/mobile-react`, developed by ByteDance. It provides over 60 components for building mobile web applications, including form controls, navigation, overlays, media, and feedback elements. The architecture is a Lerna monorepo with separate packages for components, shared utilities, and design tokens. The library supports theming via CSS variables (light/dark mode), internationalization (10+ locales), platform-specific styling (iOS/Android), and responsive layout using rem. It also includes comprehensive documentation sites (PC and mobile) generated from markdown. While the codebase demonstrates solid engineering practices with reusable hooks and patterns, it shows some technical drift due to outdated dependencies (React 16, TypeScript 4.1, Lerna v4) and a complex build pipeline (webpack, rollup, gulp, vite). Several components are well-crafted and isolatable, making this library a valuable resource for teams building mobile React UIs.