Skip to main content

· One min read
fengjutian

Better Auth​

alt text

Better Auth是一个与框架无关的TypeScript认证和授权框架。它提供开箱即用功能完善的认证解决方案，并包含一个插件生态系统，简化了添加高级功能。

地址：https://www.better-auth.com/

· 2 min read
fengjutian

gpt4all​

alt text

GPT4All是一个开源项目，让你能在自己的电脑上本地运行各种大语言模型（LLM），不需要联网或高端显卡。它提供了简单易用的桌面应用和Python库，支持多种模型比如Meta的Llama 3，还能让你用本地文档聊天。适合想隐私保护或离线使用AI功能的用户，Windows、Mac和Linux都能用，连树莓派这类设备也能跑。

地址：https://github.com/nomic-ai/gpt4all

NotebookLM​

alt text

NotebookLM 是由 Google 推出的 AI 研究工具，基于最新的 Gemini 模型，旨在帮助用户更高效地进行研究、学习和创意工作。

地址： https://notebooklm.google/

Cherry Markdown Writer​

alt text

Cherry Markdown Writer 是一款 Javascript Markdown 编辑器，具有开箱即用、轻量简洁、易于扩展等特点. 它可以运行在浏览器或服务端(NodeJs).

地址：https://github.com/Tencent/cherry-markdown

AppFlowy​

alt text

AppFlowy是一款开源的知识管理和团队协作工具，它被设计为Notion的替代品。通过提供强大的文档编辑、任务管理和团队合作功能，AppFlowy让用户能够在保持数据安全的同时，享受到流畅的工作体验。使用Flutter和Rust开发的它，支持多平台运行，无论是桌面还是移动设备都能完美适配。

地址： https://github.com/AppFlowy-IO/AppFlowy?tab=readme-ov-file

· 2 min read
fengjutian

tldraw​

alt text

tldraw 是由 tldraw.com[1] 团队维护的开源项目，其核心目标是为开发者提供一个易于集成、功能丰富的无限画布解决方案。该项目自2021年发布以来，已经积累了超过 41,222颗星标，成为 React 生态中备受瞩目的工具之一。

它的主要特性包括：

•支持 多人协作 和实时同步 •提供 丰富的绘图和编辑功能 •可以轻松嵌入到任何 React 应用中 •开发者友好，文档齐全，社区活跃

地址：https://github.com/tldraw/tldraw

excalidraw​

alt text

  • Excalidraw 是一个开源的虚拟白板工具，支持手绘风格的图表绘制。

  • 适用于创建草图、线框图、流程图等。

  • 提供协作功能，并支持端到端加密。

地址：https://github.com/excalidraw/excalidraw

· 2 min read
fengjutian

React Icons​

alt text

  • React Icons 是一个便捷的图标库，将流行的图标集整合进 React 项目。
  • 采用 ES6 模块导入，可以按需加载，减少打包体积。
  • 包含超过 40 个主流图标集，涵盖设计、开发、社交等场景。

地址：https://react-icons.github.io/react-icons/

IconPark​

alt text

  • IconPark 是由字节跳动推出的图标库平台，提供海量免费 SVG 图标资源，支持灵活自定义样式。
  • 图标覆盖 2658+ 个图标，包含丰富分类，适用于产品设计、Web 开发、移动 App 等场景。

地址：https://iconpark.oceanengine.com/official

heroicons​

alt text

Heroicons 是一套简单直接的高品质图标库，由大名鼎鼎的前端框架 Tailwind CSS 的团队制作并且发布。接触过 Tailwind CSS 的开发者可能也注意到，Tailwind CSS 生态里的前端 UI 组件质量都很不错，当然这套图标库也一样。

地址：https://heroicons.com/

svgl​

alt text

地址：https://svgl.app/

remixicon​

alt text

地址：https://remixicon.com/

· 7 min read
fengjutian

React Icons​

alt text

🌟 什么是 MUI？​

  • MUI（Material UI） 是一个功能强大的 React UI 组件库，帮助开发者快速构建美观、可定制的 Web 应用界面。
  • 提供多个子库，包括：
    • Material UI：基于 Google Material Design 的核心组件库
    • MUI Base：无样式基础组件，适合自定义设计系统
    • Joy UI：现代美学风格组件
    • MUI X：高级组件（如数据表格、日历等）
    • Toolpad：用于构建内部工具和仪表盘的组件和工具（Beta）

地址：https://mui.com/

HeadlessUI​

alt text

🧩 项目简介：Headless UI​

  • Headless UI 是一组完全无样式但具备完整可访问性的 UI 组件。
  • 由 Tailwind Labs 开发，专为与 Tailwind CSS 搭配使用而设计。
  • 支持 React 和 Vue 框架。

🎯 核心特点​

  • 无样式设计：组件不包含任何默认样式，开发者可完全控制外观。
  • 可访问性优先：每个组件都遵循 WAI-ARIA 标准，确保对所有用户友好。
  • 组件灵活：适合构建高度定制化的 UI，而不受预设样式限制。

📦 使用场景​

  • 构建自定义设计系统
  • 与 Tailwind CSS 深度集成
  • 需要高度可访问性但不希望被样式限制的项目

地址：https://headlessui.com/

HeroUI​

alt text

🌟 项目简介：HeroUI（前身为 NextUI）​

  • HeroUI 是一个现代化、快速且美观的 React UI 组件库。
  • 适用于构建可访问性强、可定制的 Web 应用。
  • 基于 Tailwind CSS，无运行时样式，体积轻巧。

🚀 核心优势​

  • 无样式冲突：使用 Tailwind Variants，避免类名冲突。
  • 自动暗黑模式：根据 HTML 属性自动切换主题。
  • 完全类型化：TypeScript 支持，提升开发体验。
  • 可访问性优先：基于 React Aria，支持键盘导航、屏幕阅读器等。
  • 组件多样：提供 210+ 响应式组件模板（HeroUI Pro）。
  • Next.js 支持：兼容新版本的 app/ 目录结构。

🎨 主题与定制​

  • 提供 Tailwind 插件，可自定义主题色彩与语义 token。
  • 支持 light/dark 模式的独立配置：
    const { heroui } = require("@heroui/react");
    module.exports = {
      plugins: [
        heroui({
          themes: {
            light: { colors: { primary: "#0072f5" } },
            dark: { colors: { primary: "#0072f5" } },
          },
        }),
      ],
    };

📦 快速开始命令​

npx heroui-cli@latest init

地址： https://www.heroui.com/

gestalt​

alt text

🎨 什么是 Gestalt？​

  • Gestalt 是 Pinterest 官方推出的设计系统。
  • 旨在帮助设计师和开发者构建激发用户灵感的产品体验。
  • 提供统一的 UI 组件、设计规范和工具资源。

地址：https://gestalt.pinterest.systems/home

shadcn​

alt text

🧱 项目简介：shadcn/ui​

  • shadcn/ui 是一个开源的 React 组件库，强调设计系统的可扩展性与可定制性。
  • 提供一套美观、实用的 UI 组件，适合构建现代 Web 应用。
  • 设计理念是：“Start here, then make it your own.”

🎯 核心特点​

  • 开源代码：所有组件均可查看源代码并自由修改。
  • 可定制性强：组件结构清晰，支持 Tailwind CSS 和多种主题配置。
  • 组件丰富：涵盖表单、仪表盘、认证、图表、日历等常用 UI 模块。
  • 设计系统基础：适合构建自己的 UI 体系或产品组件库。

地址：https://ui.shadcn.com/

React Aria​

alt text

🎯 项目简介：React Aria​

  • React Aria 是 Adobe 推出的一个无样式、可访问性优先的 React 组件库。
  • 提供超过 50 个组件，具备内建行为、响应式交互、国际化支持。
  • 适用于构建自定义设计系统或高度定制的 Web 应用。

🧩 核心特点​

  • 无样式设计：完全不绑定样式，开发者可自由使用 Tailwind、Vanilla CSS、Styled Components 等。
  • 组件结构清晰：每个组件由多个部分组成，支持 render props、slots、状态管理。
  • 可访问性保障：符合 WAI-ARIA 标准，支持键盘导航、屏幕阅读器等。
  • 国际化支持：内建多语言适配能力。

地址：https://react-spectrum.adobe.com/react-aria/index.html

Skiper UI​

alt text

Skiper UI(https://skiper-ui.com/)提供了一系列现代，简约的组件，该组件由CSS，Next.js和React构建。该库提供了副本组件，包括着陆页模板，投资组合设计以及具有Supabase Integration的全栈模板。功能包括制定运动动画，响应式设计。

地址：https://skiper-ui.com/

MiroTalk SFU​

alt text

基于浏览器 WebRTC 的在线视频通信开源解决方案，链接是多人视频会议版本，另有点对点通信版本、一对一通信版本。

地址：https://github.com/miroslavpejic85/mirotalksfu

react​

alt text

全球最大的开源 React 组件库，基于 Tailwind CSS 和 React Aria 构建

地址：https://github.com/untitleduico/react

Kibo UI​

alt text

Kibo UI（https://www.kibo-ui.com/）是一个可自定义的注册表，该注册表是可与ShadCN/UI一起使用的可组合，可访问和开源组件。

地址：https://www.kibo-ui.com/

Nurui​

alt text

Nurui 是一个基于 React 和 Next.js 的现代化 UI 组件库,旨在简化前端开发。它提供了 CLI 脚手架、自动将 TypeScript 转换为 JavaScript 的功能,以及实时组件预览,为开发人员提供了更快捷、更可定制的工作流程。

地址: https://github.com/afsar-dev/Nurui