当前位置: 首页 > news >正文

前端像素UI库!前端复古风选型必看!像素UI 、精简复古风UI 。

一、像素风 · 复古风(8-bit/街机游戏/精简粗犷主义)

1. NES.css(8-bit 像素/红白机风)

官方文档(官网):https://nostalgic-css.github.io/NES.css/

GitHub:https://github.com/nostalgic-css/NES.css

适用技术栈:无限制(纯 CSS,任意框架可用)

风格:很经典的一个UI库。纯正8-bit像素风格,还原经典红白机、复古游戏的视觉质感,自带怀旧游戏氛围。

2. Pixel-UI(Vue3专用像素风)

官方文档(官网):https://maomentai817.github.io/pixel-ui/

作者:猫闷台817

适用技术栈:Vue3 专用

风格:基于CSS Houdini的复古像素风格,Vue3专用像素风。

3. Pixel RetroUI

官方文档(官网):https://retroui.io/

GitHub:https://github.com/Dksie09/RetroUI

适用技术栈:React / Next.js

风格:我觉得很平庸😂。

4. Pxlkit(最强像素组件+图标库)

官方文档(官网):https://pxlkit.xyz/

GitHub:https://github.com/joangeldelarosa/pxlkit

适用技术栈:React / Next.js

风格:兼顾复古像素感与3D效果实用性,可适配多种像素风项目场景。主要是该组件的像素风还不像老式的像素风,更像高清版像素风🐱我确实很喜欢

5. 8bitcn(像素风资源站)

官方文档(官网):https://www.8bitcn.com/

GitHub:https://github.com/TheOrcDev/8bitcn-ui

适用技术栈:React

风格:纯像素游戏街机风,聚焦8-bit复古游戏视觉风格。

6. RetroUI(精简线条复古+Next.js友好)

官方文档(官网):https://retroui.dev/

GitHub:https://github.com/logging-studio/retroui

适用技术栈:React + TailwindCSS

风格:精简复古风格,融合现代简约设计,摒弃冗余细节,兼顾复古感与实用性,适配现代Web开发场景。

7. Neobrutalism Components(新粗野主义=精简复古)

官方文档(官网):https://www.neobrutalism.dev/docs

GitHub:https://github.com/rikschennink/neobrutalism-components

适用技术栈:React / Next.js

风格:新粗野主义风格,属于精简复古的一种,继承粗野主义的粗犷、原始美学,结合现代排版与动画标准,视觉冲击强。很像动漫😂

二、其他复古风格 · 经典老库(基本无限制)

1. 98.css(Win95/Win98 复古风格)

官方文档(官网):https://jdan.github.io/98.css/

GitHub:https://github.com/jdan/98.css

风格:还原Windows 95/Windows 98经典系统界面风格,复古怀旧,自带年代感。

2. XP.css(Windows XP 复古风格基本都是纯css)

官方文档(官网):https://botoxparty.github.io/XP.css/

GitHub:https://github.com/botoxparty/XP.css

风格:复刻Windows XP系统经典界面风格,还原XP系统的窗口、按钮等视觉特征,怀旧感拉满。

3. 7.css(Windows 7 Aero 毛玻璃风格)

官方文档(官网):https://khang-nd.github.io/7.css/

GitHub:https://github.com/khang-nd/7.css

风格:还原Windows 7系统Aero毛玻璃风格,主打透明窗口、玻璃质感,兼具复古与精致感。

4. System.css(复古 Mac OS 风格)

官方文档(官网):https://sakofchit.github.io/system.css/

GitHub:https://github.com/sakofchit/system.css

风格:经典复古Mac OS风格,以黑白配色为主,还原早期Mac系统的窗口、菜单等视觉设计,简约且有年代感。

5. PaperCSS(手绘/草稿风)

官方文档(官网):https://www.getpapercss.com/

GitHub:https://github.com/papercss/papercss

风格:手绘、草稿风格,模拟手写草稿的笔触与质感,视觉活泼,自带随性、自然的复古感。

三、选型总结(推荐这3个)

组件库技术栈风格
RetroUIReact / Next.js精简复古
PxlkitReact / Next.js像素3D组件+图标
NeobrutalismReact / Next.js新粗野主义

http://www.jsqmd.com/news/669123/

相关文章:

  • lite-server终极指南:快速搭建轻量级开发服务器的10个技巧
  • 企业云盘ROI计算:让你的老板心服口服
  • 告别臃肿文档!用Spire.Doc for Python生成Word文件,体积直接减半(附对比Python-docx代码)
  • 为什么92%的AI团队尚未启动情感智能适配?:2026奇点大会闭门报告揭示3层技术断层与21天迁移路径
  • OmenSuperHub终极指南:三步解锁惠普OMEN游戏本隐藏性能
  • 5分钟掌握KMS_VL_ALL_AIO:Windows与Office智能激活终极指南
  • 别再为OpenWrt空间不足发愁了!保姆级教程:用一块闲置U盘给Overlay扩容到几十G
  • OpenUserJS.org 新手快速上手指南:轻松搭建用户脚本平台
  • ECP 工资单权限问题(You don‘t currently have permission to view this content)
  • Autosar Nm-被动唤醒时一帧网管报文是如何发出的?
  • USB主机控制器驱动:一次由枚举超时引发的底层追踪
  • lite-server进阶技巧:7种自定义配置提升开发体验
  • 终极指南:深度解锁NVIDIA隐藏性能,让游戏帧率翻倍不是梦
  • 2025_NIPS_Sheetpedia: A 300K-Spreadsheet Corpus for Spreadsheet Intelligence and LLM Fine-Tuning
  • SAP HCM SCHEMA-001 AMT=*与FILLF功能
  • YOLO12农业AI应用:田间作物病害识别与农机导航目标检测案例
  • 沉默的数据,喧嚣的资本:AI估值泡沫与价值回归的必然逻辑
  • 如何快速上手Ultralytics YOLO:计算机视觉开发的终极指南
  • java之网络编程
  • 算法---滑动窗口
  • 基于OpenClaw的Alibaba Cloud Linux 3自动化部署YashanDB深度方案
  • 2025_NIPS_InterMT: Multi-Turn Interleaved Preference Alignment with Human Feedback
  • Data Matrix (ECC200) 选型指南:对比libdmtx、ZXing和huBarcode,你的项目该用哪个开源库?
  • Phi-4-Reasoning-Vision开源大模型部署教程:双卡4090免配置镜像实战
  • 前端可视化构建
  • CSS如何快速实现提示框效果_利用Sass @mixin编写Tooltip
  • WordPress 自定义查询分页失效的完整解决方案
  • STM32标准库开发步骤速览,适用于电赛入门学习
  • ofa_image-caption新手友好设计:明确标注‘仅英文输出’降低用户认知负荷
  • 滴水逆向 Day05:函数嵌套调用的内存布局(图文版)