Afterglow

Overview

Afterglow is a retro-futuristic terminal UI design system built on top of shadcn/ui and Base UI. It translates vintage CRT monitor aesthetics and command-line interfaces into a modern, accessible web component kit, featuring authentic scanlines, glowing phosphor palettes, ASCII borders, and hacker-styled dashboards.

Key Features

• 📟 Authentic CRT & Terminal Aesthetics: Features 8 distinctive phosphor color themes (Amber, Green, Cyan, Cyberpunk, Monochrome) with configurable glow and scanline overlays.
• ♿ Base UI Accessibility Primitives: Powered by modern Base UI components under the hood, ensuring WCAG compliance and keyboard navigation.
• 🔲 ASCII & Monospace Architecture: Custom monospace typography scales, blocky retro borders, and status prompt widgets that evoke classic Unix environments.
• 📋 Zero-Runtime Copy-Paste: Fully integrated with the shadcn registry ecosystem for direct code delivery without heavy external runtime dependencies.

Installation & Quick Start

npx shadcn@latest add https://afterglow.thebuilder.dk/r/terminal-card
# or add the full terminal window
npx shadcn@latest add https://afterglow.thebuilder.dk/r/terminal-window

import 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] Core clusters operational. Memory: 16.4GB / 64GB." />
      <TerminalPrompt command="ping agent-matrix" />
      <TerminalOutput text="[200 OK] Response time 12ms. Status: ACTIVE" />
    </TerminalWindow>
  );
}

Why Choose Afterglow?

• Perfect for: Developer tooling sites, CLI documentation portals, hacker-themed landing pages, Web3 analytics dashboards, and interactive retro gaming UIs.
• Comparison: Offers vastly superior accessibility and modularity compared to raw CSS terminal mocks, with real production-grade UI building blocks.