Retro UI

前端开发者与复古设计爱好者寻找可直接复用的CSS组件时，Retro UI 提供了一套基于Tailwind CSS、风格致敬90年代/千禧年界面的开源组件库。

它能做什么

站点收录了按钮、表单、卡片、导航栏、加载动画等常见UI组件，每个组件都带有复古视觉风格（如像素边框、CRT扫描线、渐变高光）。所有组件基于Tailwind CSS构建，复制HTML代码即可使用，无需额外安装依赖。

• 组件数量：首页展示约40个组件，涵盖输入框、开关、进度条、模态框等
• 风格分类：提供“Y2K”“Win95”“Mac OS 9”“Game Boy”等主题标签筛选
• 代码预览：每个组件右侧实时显示HTML+Tailwind类名，支持一键复制
• 自定义变量：通过CSS自定义属性（--retro-*）调整主色、边框粗细、扫描线密度

适合谁用

主要面向两类人群：一是需要在个人项目或实验性产品中快速实现复古风格的前端开发者，二是寻找设计参考的UI设计师。由于组件不包含JavaScript交互逻辑（如弹窗、轮播），更适合静态展示或搭配其他JS框架使用。

• 技术栈要求：项目需已安装Tailwind CSS（v3+），或能手动引入编译后的CSS文件
• 浏览器兼容：未提供IE/旧Edge支持，现代浏览器（Chrome/Firefox/Safari最新版）均可正常渲染
• 许可协议：MIT许可证，可商用，无需署名

内容特色

与常见的现代UI库不同，Retro UI刻意保留“不完美”的复古细节：锯齿边缘、非标准字体（如Pixeloid Sans）、低分辨率图标（16×16像素）。站点本身也采用CRT扫描线背景和鼠标指针样式，沉浸感较强。

• 字体：正文使用Geist（可变字体），标题使用Space Grotesk，代码块使用Geist Mono，均为开源字体
• 图标：内置一套像素风格图标集，约60个常用符号（箭头、文件夹、软盘等）
• 更新频率：GitHub仓库显示最近一次提交为2024年8月，非活跃维护，但组件库本身稳定可用

常见问题

Q1：Retro UI 的组件能直接用于React或Vue项目吗？

A1：可以，但需手动将HTML代码转换为对应框架的模板语法。组件本身不依赖React/Vue，只输出纯HTML+Tailwind类名，因此任何框架均可使用，只是没有封装好的npm包。

Q2：Retro UI 和同类复古组件库（如98.css）有什么区别？

A2：98.css只模拟Windows 98风格，且基于纯CSS（无Tailwind）。Retro UI覆盖更多年代主题（Y2K、Mac OS 9、Game Boy），且所有组件均用Tailwind类名实现，更适合已使用Tailwind的项目。

更多同类工具与网站,可在其他框架分类继续挑选。

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