HyperUI

HyperUI 是一个免费开源的 Tailwind CSS 组件集合，提供应用界面、营销页面和新粗野主义三种风格，所有组件均可直接复制 HTML 代码使用，无需安装依赖。

组件分类与数量

官网按用途分为三大类：Application（应用界面）、Marketing（营销页面）、Neobrutalism（新粗野主义风格），每类下细分多组件，每个组件标注具体数量。

• Application 组件：含手风琴、徽章、面包屑、按钮组、图表、复选框、详情列表、分隔线、下拉菜单等，图表组件有22个，其余多为10个左右
• Marketing 组件：含公告、横幅、博客卡片、按钮、卡片、购物车、联系表单、CTA、空内容等，公告12个，博客卡片13个
• Neobrutalism 组件：含手风琴、警告、徽章、按钮、卡片、复选框、输入框、进度条、选择框等，每类6-10个

使用方式与Vue集成

官网提供纯HTML/CSS组件，直接复制代码即可；第三方文档显示HyperUI也有Vue版本（包名hyper-youi），支持全局注册和按需引入。

• 纯前端方式：无需安装，从官网复制组件HTML到项目即可运行
• Vue全局引用：在main.js中import HyperUI并Vue.use()，需单独引入样式文件
• Vue按需引入：只引入Button、Input等具体组件，通过Vue.component()注册，减少打包体积
• 盒模型要求：使用HyperUI时需设置全局border-box盒模型，否则样式异常

作者与许可

HyperUI由Mark Mead开发，以MIT许可发布，完全免费可商用。

• 作者：Mark Mead
• 许可：MIT License
• 附加工具：官网提供暗黑模式生成器和排版比例映射工具，可在浏览器中直接使用

常见问题

Q1：HyperUI的组件需要安装什么依赖？

A1：官网组件是纯Tailwind CSS代码，无需安装任何依赖，直接复制HTML使用。Vue版本（hyper-youi）需要Vue环境，但组件本身不依赖其他UI库。

Q2：HyperUI的Neobrutalism风格组件有多少个？

A2：Neobrutalism类别下共10种组件，每种组件数量在6-10个之间，例如手风琴6个、告警6个、徽章6个、按钮10个、卡片8个等。

更多同类工具与网站,可在落地页组件分类继续挑选。

信息核实于 2026年7月,具体以官网为准。