uiverse

Uiverse.io 一个开源免费的 UI 组件库，由 HTML&CSS 组成，为前端开发人员提供了全面有趣的 UI 元素，只需要复制粘贴代码到 Web 或者应用里面，帮你轻松节省创作 UI 组件的时间和精力，无需花费一分钱，就能使用漂亮细腻的 UI 组件。 

这里的 UI 组件包含了按钮、复选框、开关、卡片、加载、输入等六种组件类型，让写代码就像拼积木一样简单，如果你是开发人员可不要错过这么不错的资源哦。

如果你需要在项目中使用它，只需要点击它，就会显示相应的css和html代码，直接复制到项目即可使用，喜欢的前端朋友，可以去试一试。

设计师 & 开发者利器

1. 设计师：Figma 里直接拖！

官方插件 Uiverse for Figma 同步 2.0 全部组件，拖进画板自动匹配样式 + 变量，再也不用「截图 → 吸色 → 手搓」。

2. 开发者：10 秒接入项目！

每个组件都给「框架级」导出：

React + TS 示例（复制即可运行）

// NeonButton.tsx
import styles from './NeonButton.module.css';
export const NeonButton = ({ children }) => (
  <button className={styles.button}>{children}</button>
);

Vue3 示例

<template>
  <button><slot /></button>
</template>
<style scoped src="./magnetic-btn.css" />

体积？
官方强制 gzip < 3 KB 才给上架，直接冲！

主题一键换色，暗黑模式自带

所有新组件默认 CSS 变量，品牌色 5 秒替换：

:root {
  --accent: #6366f1;   /* 换你的主色 */
  --surface: #ffffff;
  --text: #1f2937;
}

暗黑模式？媒体查询已写好，无需额外代码：

@media (prefers-color-scheme: dark) {
  :root { --surface: #0f172a; --text: #e2e8f0; }
}

性能 & 无障碍，通通安排

• 动画卡顿？ 全部改用 transform + opacity，再送 will-change。
• 减少跳动？ 优先使用 rem + clamp()，大屏小屏都顺滑。
• ** Accessibility？** 按钮自带 aria-pressed，加载器支持 prefers-reduced-motion。

免费商用，社区日更

• License：MIT，随意商用，改完再闭源都行。
• 日更速度： 社区平均每周 50+ 新组件，RSS / Discord 实时推送。
• 中文搜索： 官网已支持拼音 / 中文关键字，搜「按钮」一样能找 Button。

快速上手

• 打开 https://uiverse.io
• 顶部搜索框输入「aurora」「elastic」等关键词 → 右侧选 React / Vue → 复制代码
• 项目里新建组件文件 → 粘代码 → 引入 CSS
• npm run dev → 浏览器验收 → 设计师惊呼「卧槽，这效果？」

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://web.fly63.com/nav/3884