3 个很酷的开源 UI 前端组件库

为您的网站寻找流行的开源组件，并了解为开发人员开放的新机会

引擎盖下

因此，我正在研究这些前端 UI 组件库，当我看到这个新的 Eldora UI 库时，我萌生了研究它的想法。

我正在为我的网站 iHateReading 撰写时事通讯，撰写时事通讯的一个好处是你必须阅读大量内容，好吧，每个内容创作企业都有一个好处，那就是个人可以阅读大量有关他/她的领域的内容。

Eldora UI 提供了可立即使用或复制粘贴的包装组件或所谓的更高级的组件，这就是为什么我愿意解释这些由于 Reactjs 重用概念而出现的新 UI 组件概念。

Eldora UI、Shadcn、MagicUI design 和 Accenticity UI 是高阶即用型 UI 组件库的最佳示例。

嗯，我喜欢这个概念，它在某种程度上与聚合中心（一种库）的类比密切相关。前端开发人员仍然需要更多的聚合工具或平台，因为现有的工具或平台（嗯，我们目前只有一个，如果加上 app.daily.dev 之后的 dev.to 就有两个了）不足以获得准确的数据，但希望它们能够发挥作用。

让我们逐一检查这些网站，并了解它们提供的内容。

非中心性用户界面

网站
查看组件

这些是我发现的 eccentricity UI 组件使用的库

• @tabler/icons-react
• threejs
• 顺风 CSS
• 顺风合并
• clsx
• 帧运动
• simplex-noise 和更多小型npm模块，那些对 npm 组件一无所知的人可以继续阅读这里。

例如，我们要创建一个具有以下详细信息的悬停卡 UI 组件

显示悬停动画的悬停卡
带有内容和静态 UI 组件的悬停卡
悬停卡背景和动画（如果需要）
让我们开始游戏，为了创建上述悬停卡，我们需要更多 npm 模块来帮助我们生成上述卡片。

ChatGPT 还可以帮助您使用酷炫的 npm 模块创建悬停卡，并在悬停时在卡片中添加一些动画和背景动画。

该提示将提供示例代码并要求 chatGPT 提供更多此类示例来改变您的想法。

接下来，对于悬停卡组件，我的方法如下

找到最热门、最棒（最流行）的动画 npm 模块；
找到最棒（最流行）的 React UI 技术栈、组件和样式库；
创建悬停卡片并添加动画；
开源/共享悬停卡片的完整代码
；我会选择 framer-motion、react-spring 或 gsap 在 React 组件中添加动画；
Tailwind CSS 和 tailwind-merge 当然是目前为止最好、最流行的选择；
Nextjs 和 Reactjs 是热门框架，Vue 和 Svelte 可以稍后处理。
这些库完成后，我只需创建代码并共享或开源即可。

两年前，在 iHateReading，我们有一个名为 custom-repos 的页面，用于提供相同的可重用 UI 组件以及代码库或样板。当时还没有 GPT，所以为每个样板编写代码非常耗时。我发现一种方法是自动化创建代码示例和样板的过程，而 GPT 会非常有帮助。

我计划将这个概念带回 iHateReading，因为我们的自定义 repos 路线仍然可以根据 Google Analytics 进行访问和搜索。

一旦创建了代码，开发人员就可以阅读、复制粘贴代码、安装所需的 UI 库并定制要求，然后就可以开始了。

上图展示了波浪背景组件的示例代码，它指导开发人员安装 framer-motion tailwind-merge 和其他所需的包。

大多数开发人员都会重复相同的过程，由于我可以分享我的工作，因此我可以帮助许多类似的开发人员最终从中获得商业模式。

现在，这些开发人员面临着新的机遇，但我不确定他们的用户群是谁，也就是他们的目标客户或受众的样本量。

令人惊讶的是，我的研究结果与我的想法或预期完全相反。我发现这些样板和 UI 组件之类的 SAAS 工具每年和每月都能带来收入，其中一些甚至每月能赚 1 万美元，年收入甚至超过百万美元。

查看 ShipFast、ScrapingBee 和 ScrapingAnt 的年收入或总收入。或者，阅读我们的新闻通讯，获取有关市场需求的重要信息。

神奇的UI设计

网站

这不仅仅是一个 HOC 组件，也是一个安装整个组件模块库的 CLI 安装库

因此，这不仅仅是一个高阶组件库，而是一个 UI 组件库，它提供 CLI 命令来安装所有 UI 组件，就像 Material UI 或 Ant Design 一样。

Magic UI 在底层使用相同的概念来提供可重复使用的流行高阶组件。

使用第三方 npm 模块作为 UI 组件和动画
使用最流行的前端框架并共享代码组件
该方法将始终保持不变，包括开发人员体验中的几个转折。

我不会讨论传统的 UI 库，因为相关的文章已经很多了。我更多地讨论的是市场上涌现的开发者机会，以及开发者如何围绕它构建 SAAS。

Shadcn/UI
以下是详细的故事，https://medium.com/javascript-in-plain-english/introduction-to-shadcn-ui-library-2ad595f1b424

Shadcn 还提供 CLI 命令和手动设置。

Magic UI 和 Shadcn CLI 命令的具体功能是将整个 UI 组件添加到根目录中的组件目录中。

因此，在使用 CLI 命令安装相应的包后，我的目录将看起来像图中所示，而且该图像仅适用于 next.js 目录。

我们不是从 node_module 目录导入组件，而是从 components 目录导入使用组件。

现在来自material-ui/core、ant-design的按钮将被来自@/components的按钮取代

这为开发人员提供了更多的权力，即能够定制它并将其重新用于他/她的设计系统。

例如，如果我想创建 4 个项目，我可以在我的 4 个项目中的每一个项目中重复使用基于 shadcn 或 magic design 构建的自定义 UI 组件的相同样板。

因此，我节省了大量重复做同样工作的时间，这个单一样板也可以为自由职业者/兼职客户重复使用，我 3 年前就对我的客户这样做了。

Eldora 用户界面

我们家还有最后一个，Eldora UI

Eldora 为 React 和其他前端框架提供了 10 多个但有限的开源 UI 组件。

使用 React、Typescript、Tailwind CSS 和 Framer Motion 构建的开源动画组件。100% 开源且可定制。

Eldora 使用以下软件包

framer-motion
react-day-picker
date-fns
@remix /icons
更多类似的 npm 模块
现在，这对于 SAAS 开发工具或平台应该是什么样子来说是有意义的。

使用小型开源 npm 模块，可以创建 UI 组件集合，然后这些 UI 组件也可以单独共享。

之后要添加的另一个工作流程是使用这些 UI 组件或模板创建示例落地页。我们的愿景是使用这些小型可复用组件开发复杂的应用程序或页面构建器，因为每个网页都是 DOM 中小型 UI 组件或 div 元素的组合。

Webpage (DOM) = UI components(HTML element + Style) + Events (states + actions)

能够处理所有开发人员
这些库无法处理的一件事是交叉兼容性

意义

• 处理多个前端框架以使用这些组件
• 无论是在复杂的应用程序，还是可扩展的应用程序或大型初创企业应用程序中，我都经历过。我曾在印度与数百万流量的网站代码库合作过，这些代码库非常紧凑复杂，以至于我们无法确定一个小小的更改会影响组件或网页的哪个部分，因此为可扩展的应用程序添加组件将是一项艰巨的任务。

以下是10 个最佳 Tailwind CSS 库的列表

前端 UI 库和复用 UI 组件曾经是趋势，现在依然如此，只是方法发生了变化，开发人员的开发能力也在不断提升。想想如何利用小型 UI 组件库创造收益，你就能拥有一个在市场上测试或发布的 SAAS 创意。

结论：
人工智能无疑可以帮助我们展望未来，在前端找到更好的解决方案和工具。人类分享工作成果并为他人再创造事物的创造力，为世界创造了开源事物，未来我们必将创造更多这样的开源事物。

好了，今天就到这里，请订阅并直接通过电子邮件或浏览器订阅阅读我的故事。

下期再见

什雷