Afterglow
复古终端命令行风格的 shadcn 设计系统，基于 Base UI 构建，提供 8 款荧光显示主题、扫描线与极客 CRT 视觉动效。
项目概述
Afterglow 是一个专为追求复古极客风格打造的终端命令行设计系统，深度整合 shadcn/ui 与 Base UI 底座。它将经典 CRT 荧光显像管、扫描线纹理和字符界面美学转化为现代 Web 交互组件库，提供从状态控制台、ASCII 边框到系统监控仪表盘等全套硬核视觉组件。
核心特性
- 📟 纯正 CRT 终端美学：内置 8 种复古荧光配色方案（经典琥珀黄、黑客绿、赛博青、单色黑白等），支持逼真的发光漫反射与动态扫描线特效。
- ♿ Base UI 底层无障碍支持：底层采用现代 Base UI 原语，在保留硬核命令行外观的同时提供完整的 WCAG 无障碍访问与全键盘交互能力。
- 🔲 等宽排版与字符微交互：内置精心调优的等宽代码字阶、闪烁光标（Prompt Cursor）及状态指示灯组件。
- 📋 标准化 Copy-Paste 源码分发：支持通过 shadcn 官方 CLI 命令直接将组件分发至本地工程，无沉重第三方运行时捆绑。
快速上手与示例代码
npx shadcn@latest add https://afterglow.thebuilder.dk/r/terminal-card
# 或安装完整终端窗口容器
npx shadcn@latest add https://afterglow.thebuilder.dk/r/terminal-windowimport React from 'react';
import { TerminalWindow, TerminalPrompt, TerminalOutput } from '@/components/terminal';
export default function SystemMonitor() {
return (
<TerminalWindow title="SYS_NODE_01" theme="green" scanlines>
<TerminalPrompt command="status --all" />
<TerminalOutput text="[OK] 集群节点运行正常，内存占用: 16.4GB / 64GB" />
<TerminalPrompt command="ping agent-matrix" />
<TerminalOutput text="[200 OK] 延迟 12ms，响应状态: ACTIVE" />
</TerminalWindow>
);
}技术选型建议与适用场景
- 非常适合：开发者工具主页、CLI 命令行文档站、黑客马拉松活动页面、Web3 链上分析仪表盘以及极客主题的个人博客或创意作品集。
- 与纯 CSS 终端对比：Afterglow 不只是静态视觉模拟，而是具备完整状态管理、折叠展开与无障碍键盘响应的生产级 UI 原语。
讨论与评价
分享你对该组件库的上手体验、优缺点或建议...
暂无讨论。欢迎分享你对该组件库的上手体验、优缺点或建议！
相关组件推荐
基于同类与技术栈推荐
Duolingo UI (ShadLingo)
126k+
基于 shadcn/ui v4 与 Tailwind CSS 深度定制的 Duolingo 风格设计系统与组件库，完整复刻多邻国标志性的 3D 按钮弹簧投影、高饱和猫头鹰绿与游戏化卡片交互。
源码拷贝设计令牌Gamification+3
源码拷贝详情
8bitcn/ui
2.1k+
基于 shadcn/ui 与 Tailwind CSS 构建的复古 8-Bit 像素风 React 组件库，兼备像素艺术美学与现代 WAI-ARIA 无障碍标准。
无障碍支持源码拷贝React+2
无障碍支持详情
Astryx (Meta)
14k+
Meta（Facebook）官方开源的企业级设计系统与 React 19 组件库，内置 170+ 高度可访问组件、StyleX 与面向 AI 智能体的工作流。
无障碍支持设计令牌企业级+2
无障碍支持详情