This repository provides a comprehensive component library for building admin dashboards and CRUD applications in React. It wraps react-admin's headless core (`ra-core`) with a shadcn/ui aesthetic, delivering over 80 reusable components including data table, forms, inputs, fields, buttons, layout elements, and a rich text editor. The architecture follows a provider pattern for data, authentication, and internationalization, making it backend-agnostic. It includes a demo e-commerce application, a Storybook for visual testing, a marketing website, and a shadcn registry for easy installation via the `shadcn add` command. The codebase is well-structured with extensive unit tests and documentation, though it depends on pre-release Base UI and several react-admin enterprise features that require a paid subscription.
Headless UI is a library of completely unstyled, fully accessible UI components for React and Vue. It provides behavior-only primitives like Combobox, Listbox, Dialog, Popover, Tabs, RadioGroup, and Switch, with no built-in styling, allowing consumers to own the visual layer. The architecture is a monorepo with parallel React and Vue packages that share identical component APIs, test suites, and accessibility patterns, ensuring feature parity across frameworks. Components use render props (React) and slots (Vue) to expose state like open, active, selected, and disabled, plus an `as` prop for polymorphic rendering and a Transition component for enter/leave animations. The codebase is heavily tested with thousands of test cases covering keyboard navigation, focus management, ARIA attributes, form integration, and edge cases like dynamic children and virtual scrolling. Key entry points include the Combobox, Listbox, and Dialog components in both React and Vue, along with shared test utilities for accessibility assertions and interaction simulation. The library is actively maintained with a focus on accessibility-first design, headless composition, and cross-framework consistency.
This is the Microsoft FAST monorepo, a standards-based web component framework. It provides a lightweight, performant foundation for building custom elements with declarative templates, reactive data binding, server-side rendering (SSR), and hydration. The core library `@microsoft/fast-element` offers a complete runtime with observability, templating, dependency injection, and state management. Companion packages include a client-side router (`fast-router`), a test harness (`fast-test-harness`), and Rust-based build tools (`fast-build`, `fast-convert`) for SSR and template syntax conversion. The repository also contains example applications (CSR todo, SSR chat, WebUI todo), extensive Playwright integration tests, and a benchmark suite measuring rendering performance. The architecture is modular, with clear separation between runtime, build-time, and testing concerns. The codebase demonstrates high craftsmanship in areas like reactive observation, template compilation, hydration, and dependency injection, though some experimental features and cross-language (Rust/TypeScript) coordination introduce maintenance complexity.
react-native-haptic-feedback is a React Native library providing comprehensive haptic feedback capabilities for iOS and Android. It implements a dual-tier fallback chain on both platforms: iOS uses Core Haptics (CHHapticEngine) with UIKit generator fallback, while Android uses View.performHapticFeedback constants and VibrationEffect API. The library offers both simple trigger methods and complex pattern-based haptic sequences, includes cross-platform AHAP file playback with Android fallbacks, and provides React-first APIs like the useHaptics hook and TouchableHaptic component. Architecture features platform-specific native modules bridged via React Native's TurboModule system, with TypeScript source and auto-linking support.
This repository is the Microsoft Fluent UI Blazor component library, a comprehensive set of UI components implementing Microsoft's Fluent Design System for ASP.NET Core Blazor applications. It provides over 60 components including buttons, dialogs, data grids, charts, navigation, forms, and more, all with consistent styling and behavior. The library wraps the official Fluent UI Web Components and adds Blazor-specific integration, services, and utilities. The architecture follows a service-oriented pattern with dependency injection via IServiceCollection, base classes (FluentComponentBase, FluentInputBase), and cascading parameters for component composition. Key entry points include the AddFluentUIComponents() registration method, LibraryConfiguration for global settings, and the various component constructors. The library also includes an MCP (Model Context Protocol) server for AI-assisted development, providing tools, resources, and prompts for component documentation, migration guides, and project setup. Data flows primarily involve server-side Blazor components rendering HTML with embedded JavaScript for client-side interactivity. Chart components use TypeScript web components with JSON-serialized data models. The library depends on external packages like @fluentui/web-components, @microsoft/fast-element, and various CDN-hosted libraries (e.g., IMask for masked inputs). It also includes code generation tools for icons and enums, and a documentation generation pipeline. The codebase demonstrates strong engineering practices with reusable patterns such as style builders, debounce utilities, event callback systems, and immutable chart data models. It has extensive unit and integration tests, though some areas rely on generated code and external JSON documentation files that must be kept in sync.
JSX Pragmatic is a JavaScript library that enables developers to write JSX templates without being coupled to a specific rendering framework. Unlike traditional JSX usage which is typically tied to React through Babel presets, this library separates the JSX parsing from the rendering process, allowing developers to decide at runtime how and where to render their JSX components. The core innovation lies in its node-based architecture where JSX elements are converted into a tree of framework-agnostic node objects (ElementNode, TextNode, ComponentNode, FragmentNode). These nodes can then be rendered by different renderer functions to various targets including HTML strings, DOM elements, React components, Preact components, or even custom outputs like regular expressions. This approach provides unprecedented flexibility for isomorphic applications that need to render the same component definitions to different targets. The library includes specialized components that demonstrate its versatility, such as a regex-building DSL that uses JSX syntax to construct regular expressions, and a Style component for injecting CSS. With comprehensive test coverage and active maintenance, JSX Pragmatic serves as a robust solution for projects requiring multiple rendering targets from a single JSX source.
Vexip UI is a large, TypeScript-first Vue 3 component library with over 78 high-quality components, built as a monorepo with multiple internal packages (`@vexip-ui/utils`, `@vexip-ui/hooks`, `@vexip-ui/config`, `@vexip-ui/icons`, `@vexip-ui/bem-helper`, etc.). It provides a consistent prop system via `useProps`, BEM-based theming, extensive composable hooks, custom directives, and a global configuration provider. The codebase is actively maintained, with comprehensive unit and SSR tests, bilingual documentation (VitePress), and a playground. It follows modern Vue 3 patterns (Composition API, JSX/TSX, TypeScript generics) and demonstrates strong engineering practices in component architecture, state injection, and performance (virtual scroll, lazy rendering, resize observers). While heavily coupled internally, many of its building blocks (e.g., BEM helper, PostCSS plugin, utility functions) are published as standalone packages and are reusable in other Vue projects.
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.
Buefy is a Vue 3 UI component library providing approximately 40+ Bulma-based components (buttons, inputs, tables, modals, datepickers, carousels, trees, etc.) that can be consumed individually or as a full bundle. It includes programmatic APIs for overlay components (dialog, toast, notification, snackbar, loading) and a global configuration system for icon packs, locale, and default behaviors. The library is published as the `buefy` npm package and is designed for tree-shaking via individual component registration. The architecture is a monorepo with two packages: `packages/buefy` (the library) and `packages/docs` (a Vite-based documentation site). Components are built using Vue 3 Options API with `defineComponent`, mixins for cross-cutting concerns (form validation, tabbed containers, notice behavior, compat fallthrough), and a consistent prop/event/slot pattern. SCSS styles are organized per component and leverage Bulma's CSS variable system for runtime theming. The library does not handle external data; it only manages UI state and provides a structured way to build Bulma-themed Vue 3 interfaces. Key entry points include `packages/buefy/src/index.ts` (main library export), `packages/buefy/src/utils/config.ts` (global configuration), and per-component index files that register each component as a Vue plugin. Data flows are limited to parent-child communication via provide/inject (e.g., Tabs, Steps, Table) and form element integration with a `BField` parent for validation. External dependencies include Vue 3 (>=3.4), Bulma CSS framework, and optional icon packs (Font Awesome, Material Design Icons). Build tooling uses Rollup, esbuild, Babel, and Vitest for testing.
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 WYSIWYG H5 (HTML5) page editor enabling drag-and-drop creation of responsive web pages without coding. Built with React, TypeScript, and Umi 3.0 framework, it features a plugin-based architecture where components are defined by template (metadata) and schema (editable properties). The editor includes a canvas for arranging components, property panels for configuration, and tools for previewing, exporting, and saving templates. A Node.js/Koa backend provides endpoints for saving and retrieving HTML content. The application emphasizes extensibility and performance through patterns like dynamic component loading with caching, schema-driven form generation, and a modular component library. Key reusable components include a dynamic engine for lazy-loading components, an editable list with drag-and-drop reordering, and an on-screen calibration ruler for alignment. While the project is actively maintained, it shows some technical drift in dependency versions (e.g., React 16, Ant Design 4) and relies on a simple in-memory backend that may require adaptation for production use.
Tunet is a modern, responsive React dashboard for Home Assistant that provides a customizable interface for monitoring and controlling smart home entities. The application features a React/Vite frontend with an Express/Node.js backend, using SQLite for persistent storage of user configurations. It implements a modular card-based UI system with 20+ specialized card types (lights, climate, media, etc.), real-time WebSocket synchronization with Home Assistant, and extensive customization options including theming, layout configuration, and plugin-like extensibility. The application follows React best practices with custom hooks, context API for state management, and a well-organized component architecture.
This repository is the source code for the NG-NEST Angular UI component library (version 22.0.5), providing over 70 reusable components for building enterprise-grade web applications. The library includes a comprehensive set of UI elements such as buttons, tables, forms, dialogs, trees, date pickers, and more, all built with Angular's latest features including signals, standalone components, and OnPush change detection. The repository also contains a documentation/demo site that showcases each component with live examples in both English and Chinese, along with a full RBAC tutorial demonstrating a real-world admin panel using NestJS and Angular. The architecture follows a monorepo pattern: the library lives under `lib/ng-nest/ui/` with each component as an independent Angular module (with its own `ng-package.json`), while the documentation site resides in `src/` and uses the library itself. Key entry points include `lib/ng-nest/ui/index.ts` for the library and `src/app/app.config.ts` for the application. Data flows are primarily unidirectional via Angular signals and observables, with services like `XRepositoryAbstract` providing a consistent CRUD pattern for backend integration. External dependencies include Angular 22, Angular CDK, RxJS, and PrismJS for syntax highlighting. The library demonstrates strong engineering practices: consistent component property classes, a centralized portal service for overlays, a theme system with CSS variables and dark mode, and full internationalization support with 30+ locales. However, many component tests are disabled (using `xdescribe`), and there is some duplication in example data across language variants. Overall, it is a well-maintained, production-ready UI library with a high degree of reusability.
vue-promised is a small Vue library that removes boilerplate around rendering asynchronous state. It exposes two public APIs: `usePromise`, a composition-api function that watches a promise (or a Ref to one) and returns reactive refs for `data`, `error`, `isPending`, `isResolved`, `isRejected`, and `isDelayElapsed`; and `Promised`, a component that renders `pending`, `default`, `rejected`, or `combined` scoped slots based on that state. Both are built on `vue-demi`, so the same package works with Vue 2 (with @vue/composition-api) and Vue 3. In production the code solves two real problems: stale async updates are discarded by comparing the currently watched promise to the promise that settled (an identity check rather than a cancellation token), and a configurable `pendingDelay` prevents loading spinners from flashing on fast requests. Old resolved data is preserved while a new promise is pending, so UIs can render "refreshing" states without losing previous content. The implementation is deliberately small: the entire runtime is `src/usePromise.ts` and `src/Promised.ts`, with tests covering slot rendering, delay timing, timeout cancellation, and promise cancellation. The repository is a library rather than an application or data pipeline. It includes a docs Vite app, API Extractor config for d.ts rollup, size-limit checks, and CI with unit tests. Dependencies have been partially modernized, but the npm package has remained at 2.2.0 since 2021 and some test tooling (Vitest 0.31, Prettier 2.8, TypeScript 5.0) lags current releases, giving the project a medium technical drift.
Ng-Matero Extensions is an Angular component library that extends Angular Material with 15+ additional UI components including grid, datetimepicker, colorpicker, popover, tooltip, select, split, dialog, drawer, loader, progress, alert, button loading, checkbox-group, and photoviewer. The library is built for Angular 22 and supports both Material Design 2 and 3 theming via Sass mixins and CSS custom properties. It provides date adapters for native, moment, luxon, and date-fns libraries. The repository includes a development app for interactive demos and a documentation site with live examples, API references, and i18n support (English and Chinese). The codebase demonstrates strong engineering practices with standalone components, CDK overlay usage, adapter patterns, and performance optimizations like coalesced style scheduling. However, it relies on several third-party dependencies (ng-select, color-picker, photoviewer) and uses some deprecated Angular Material APIs, indicating moderate maintenance risk.
Docgeni is a documentation generator for Angular component libraries and markdown documentation. It operates as a CLI tool (serve, build, init) and a set of libraries that parse Angular component metadata, build navigation, render markdown with custom extensions (embed, code groups, tabs), and generate a static or server-side rendered Angular site. The architecture is a monorepo with packages: @docgeni/cli (entry point), @docgeni/core (orchestration, builders, plugins), @docgeni/template (Angular site components and services), @docgeni/ngdoc (TypeScript parser for Angular decorators), @docgeni/toolkit (utilities for file system, git, templates), and @docgeni/create-docgeni (scaffolding). Key data flows: user provides markdown docs and Angular component libraries; the core builders parse docs, extract component metadata via ngdoc, generate navigation trees, and produce an Angular application with live examples, API tables, and multi-language support. External dependencies include Angular CLI, TypeScript compiler API, marked (markdown parser), Prism (syntax highlighting), Handlebars (templates), cosmiconfig (configuration), and chokidar (file watching). The generated site supports CSR, SSR, and SSG render modes, theming, and i18n.
KokonutUI is an open-source UI component library for modern React applications, specifically targeting Next.js projects with Tailwind CSS v4 and Motion (Framer Motion). The repository contains over 40 reusable, animated components distributed through a shadcn-style registry, allowing developers to copy-paste or install them via `npx shadcn@latest add @kokonutui/<name>`. The library covers backgrounds (beams, flow field, shape hero), buttons (attract, gradient, hold, particle, slide-text, social, switch, v0), cards (apple activity, bento grid, card flip, card stack, carousel, currency transfer, liquid glass, mouse effect, spotlight, tweet), inputs (avatar picker, file upload, loader, team selector), navigation (action search bar, morphic navbar, profile dropdown, smooth drawer, smooth tab, toolbar), AI-specific components (AI input search, AI loading, AI prompt, AI text loading, AI voice), and text effects (dynamic, glitch, matrix, scroll, shimmer, sliced, swoosh, type writer). The project also includes custom hooks (use-auto-resize-textarea, use-click-outside, use-copy-to-clipboard, use-debounce, use-file-input, use-intersection, use-mobile, use-tags) and a comprehensive documentation site powered by Fumadocs with MDX content. A build script generates registry JSON files and agent-facing resources (llms.txt, agent skills index). The codebase follows modern React patterns (compound components, asChild, controlled/uncontrolled state, composition over props) and includes extensive AI agent skills for component architecture, Next.js best practices, and React design patterns. While the library is functional and well-structured, it lacks tests and has a large dependency surface; it is also tightly coupled to Next.js and serves as a marketing funnel for a pro version.
EldoraUI is a modern, open-source React/Next.js component library distributed via a shadcn/ui-style registry. It provides over 40 animated UI components, including text animations, device mockups, 3D globes, interactive cards, and full-page blocks (headers, CTAs, pricing tables, testimonials). The repository is a monorepo with a Next.js documentation site that showcases each component with live previews, code examples, and MDX-based guides. Components are designed for copy-paste installation via CLI (`npx shadcn add`) and rely on Tailwind CSS, Motion (Framer Motion), Three.js, and Radix UI primitives. The library targets 'design engineers' building modern, animated interfaces. While the codebase is actively maintained and demonstrates strong craftsmanship in several complex components (e.g., Browser, CobeGlobe, TextAnimate), it exhibits some technical drift: pervasive typos in block names ('testimonal'), fragile DOM coupling in the table of contents, outdated TODO comments, and potential registry duplication. Overall, it is a solid, production-quality component library with high reusability.
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.
This repository provides a library and build-time plugin for embedding a React (or Preact / React Native Web) web application inside a React Native WebView, with automatic bundling and two-way communication between the native and web sides. It consists of a Metro transformer plugin that uses Babel AST analysis to detect entry files (those calling webViewRender or webViewCreateRoot), then bundles the web app via esbuild with custom asset loaders for images, CSS, JSON, text, Markdown, and WebAssembly. The bundled output is wrapped in an HTML string and returned as the module source, which is then loaded into a react-native-webview at runtime. The library exposes React hooks (useWebViewMessage for native, useNativeMessage and emit for web) that handle message passing via window.postMessage and ReactNativeWebView.postMessage. The architecture is a classic library + build plugin pattern, with clear separation between native (React Native) and web (React DOM) concerns. The codebase is TypeScript, has end-to-end Playwright tests with HTML snapshots, unit tests, and thorough type definitions. It is designed for rapid prototyping or features that require web-specific APIs (e.g., WebAssembly, contenteditable) without rewriting the entire UI for React Native.