前端资源

利用这些资源增强你的开发能力！🚀

👋 大家好！👋

我很高兴能与大家分享我多年来收集的这些资源，它们在我从事的许多项目中都起到了救星的作用。这个汇编汇集了各种工具和库，从用户界面创建到性能优化等等。我希望你也可以充分利用这些精彩的资源。让我们开始吧！

请随意评论您使用过的或觉得有趣的任何其他资源，以便我可以将它们添加到帖子中！

用户界面：

• Material Tailwind：结合了 Material Design 和 Tailwind CSS 的强大 UI 套件

• MiracleUI：纯 CSS 构建且可定制的组件

• Bentoed：html/css/tailwind 便当目录

• Aceternity UI：为您的下一个项目提供时尚现代的 UI 组件

• NextUI：使用 NextUI 轻松制作精美的界面

• ChakraUI：一个简单、模块化且可访问的组件库

• 交易视图图表：使用 TradingView 的轻量级图表增强你的数据可视化游戏

• AutoAnimate：使用 AutoAnimate 轻松创建令人惊叹的动画

• React-magic-motion：为你的 React 组件添加一丝魔力

• 保持 React：保持你的 React 组件新鲜和时尚

• Daisy UI：使用 Daisy UI 创建令人愉悦的界面

• ShadCn：使用时尚优雅的组件提升您的用户界面

• 剪辑路径：使用 Clippy 发挥创意

• Radix：使用 Radix 构建强大且可组合的 UI

• 布局生成器：轻松设计灵活的布局

• 实用程序：用于渐变、光标等的便捷工具包

• 图像生成器：立即使用高质量图像美化你的设计

• 按钮：用时尚的按钮装饰你的 UI

• PrimeReact：适用于 React 应用程序的主要组件

• 所有内容尽在一页中：探索精选的资源

• Beer CSS：基于 Material Design 3 的语义 HTML CSS 框架。

渐变：

• Firecms：为您的项目提供动态渐变

• Shadergradient：轻松创建令人惊叹的着色器渐变

SVG：

• 形状：适合您设计的精美 SVG 形状

• SVG：探索丰富的 SVG 集合

• SVG 插图：使用 Undraw 的插图为你的项目增添活力

其他的：

• 滑块——Swiper：无缝滑动浏览内容

• Toast 通知 — Sonner：让 Toast 通知变得简单

• Atropos - 3D 元素：为您的项目添加沉浸式 3D 元素

• 自动动画（原生 Javascript）：使用原生 JavaScript 轻松为元素制作动画

• Vaul（移动滑块）：使用 Vaul 提升您的滑块

• 视频性能优化器：使用 Lite YouTube Web Component 优化视频性能

• 日历：简化你的日程安排流程

• 对比度选择器：使用 Coolors 的对比度检查器确保可访问性

• 图像优化器：压缩图像以获得更好的性能

顺风：

• 动画：使用 Tailwind CSS Animated 为你的 UI 增添光彩

• 交叉路口观察员：Tailwind CSS Intersect 用于观察交叉路口

• 背景：轻松修饰你的背景

• Bentoed：html/css/tailwind 便当目录

JavaScript的：

• Masonry Grid：轻松创建动态网格布局

• MiniMasonry：砌体布局的轻量级替代品

• Gallery PhotoSwipe：使用 PhotoSwipe 优雅地展示您的图片

• 画廊 LightGallery：LightGallery 提供令人惊叹的图像画廊

• Tempo：使用 Tempo 简化基于时间的操作

• Tippy（工具提示）：通过可自定义的工具提示增强用户体验

• 交叉点观察者：交叉点观察者高效滚动指南

• 无限滚动：轻松实现无限滚动

• Just：一个常见 JavaScript 实用程序库

• GLTF 转换为 JSX：将 GLTF 文件转换为 JSX 组件

反应：

• 计数器：动态计算您的数字

• 砌体布局：在 React 中构建响应式砌体布局

• 拖放：轻松实现拖放功能

• FilePond：使用 FilePond 简化文件上传

• Faker：使用 Faker 生成逼真的虚假数据

• 随机：用随机词语为你的项目增添趣味

• 图表：使用 Chart.js 精美地可视化数据

• UseSound：将音效融入你的 React 应用

• ReCharts：基于 React 组件构建的图表库

• 浮动 UI（工具提示）：用于交互式工具提示的浮动 UI

• Tippy (Tooltips) : 用于 React 应用程序的 Tippy.js

• 日历：另一个满足你所有日程安排需求的日历资源

• CMDK 控制台：React 应用程序的控制台