Repolode
提交项目
TheOrcDev

TheOrcDev/8bitcn-ui

基于 shadcn/ui 的复古 8 位风格可访问 React 组件，可通过 CLI 复制到项目中使用。

在 GitHub 查看官网
Star
2,065
Fork
119
未关闭 Issue
20
最近提交
前天

这是什么？

8bitcn/ui 是一套面向 React 项目的复古像素风 UI 组件库，基于 shadcn/ui 构建。组件以源代码形式通过 shadcn CLI 添加到你的项目中，而不是作为依赖包安装，因此可以直接修改样式和行为。

使用时运行 shadcn CLI 并指定 @8bitcn 注册表中的组件名（例如 button），之后即可从 components/ui/8bit 路径导入使用。该路径依赖项目中已配置的路径别名，在 Next.js 等框架中较为常见。

项目提供组件文档、区块（blocks）和主题，采用 MIT 协议开源。它强调可访问性与复古视觉风格的结合，适合需要街机或像素质感的游戏、趣味界面或仪表盘。

核心功能

  • 01基于 React 的复古 8 位风格组件，强调可访问性。
  • 02通过 shadcn CLI 以源码形式安装，代码归项目所有，可自由修改。
  • 03提供组件目录、区块和主题等文档内容。
  • 04基于 MIT 协议免费开源。

适用场景

  • 为 Next.js 或 React 网页应用添加街机或像素风格。
  • 为游戏或创意类项目构建趣味界面。
  • 基于 shadcn 体系快速搭建复古主题的仪表盘。

快速上手

  1. 1

    使用 shadcn CLI 将按钮组件添加到项目中

    pnpm dlx shadcn@latest add @8bitcn/button
  2. 2

    在文件中导入并使用该组件

使用前须知

  • 导入路径 @/components/ui/8bit 假设项目已配置路径别名，可能需要根据项目结构调整。

收录于专题

前端框架与界面组件

标签

#ui-components#react#shadcn-ui#retro-design#accessibility#tailwind-css#typescript#8-bit#components#retro

常见问题

8bitcn-ui 是什么？
基于 shadcn/ui 的复古 8 位风格可访问 React 组件，可通过 CLI 复制到项目中使用。 8bitcn/ui 是一套面向 React 项目的复古像素风 UI 组件库，基于 shadcn/ui 构建。组件以源代码形式通过 shadcn CLI 添加到你的项目中，而不是作为依赖包安装，因此可以直接修改样式和行为。
8bitcn-ui 可以免费使用吗？用的什么许可证？
8bitcn-ui 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
8bitcn-ui 还在维护吗？
活跃维护中。8bitcn-ui 最近一次提交是在 2026年11月5日。
8bitcn-ui 适合用来做什么？
为 Next.js 或 React 网页应用添加街机或像素风格。 为游戏或创意类项目构建趣味界面。 基于 shadcn 体系快速搭建复古主题的仪表盘。
8bitcn-ui 怎么安装和运行？
使用 shadcn CLI 将按钮组件添加到项目中: pnpm dlx shadcn@latest add @8bitcn/button 在文件中导入并使用该组件
在哪里获取 8bitcn-ui？
源代码和安装说明在 GitHub 上：https://github.com/TheOrcDev/8bitcn-ui

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目