Cyber Terminal
Holographic cyber terminal stats section with green matrix theme.
Main Features of Cyber Terminal
How to Use Cyber Terminal in Next.js
Installation Guide for Cyber Terminal
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
stats | Array<{label: string, value: number, unit?: string}> | [] | Array of stat items with label, value, and optional unit. |
backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
gridColor | string | rgba(0,255,0,0.05) | Grid pattern color. |
containerBgColor | string | rgba(0,0,0,0.8) | Container background color. |
containerBorderColor | string | rgba(0,255,0,0.3) | Container border color. |
dot1Color | string | #ef4444 | First dot color (red). |
dot2Color | string | #eab308 | Second dot color (yellow). |
dot3Color | string | #22c55e | Third dot color (green). |
headerTextColor | string | #22c55e | Header text color. |
headerText | string | SYS_ADMIN // METRICS | Header text. |
labelColor | string | rgba(0,255,0,0.7) | Label text color. |
valueColor | string | #4ade80 | Value text color. |
valueGlowColor | string | rgba(74,222,128,0.5) | Value glow effect color. |
progressBarBgColor | string | #14532d | Progress bar background color. |
progressBarColor | string | #22c55e | Progress bar fill color. |
cornerColor | string | #22c55e | Corner accent color. |
footerText | string | _SYSTEM_OPTIMAL | Footer text. |
footerTextColor | string | rgba(0,255,0,0.5) | Footer text color. |
Related Components
When to Use
Perfect for deep-tech brands, developer tools, and Next.js experiences that want a futuristic, 'hacker' aesthetic. Use this React component for a terminal-style stats section with progress bars, matrix themes, and holographic corner accents.
Best Practices
Maintain scalable component architecture by keeping foreground text bright and readable. Follow React best practices by pairing this with dark-themed layouts. Optimize for performance by managed the glow effects and scanline filters.
Why This Component Matters in Modern UI Development
Cyber aesthetics create a sense of technical authority and scale. This production-ready UI component helpsคุณ build an interface that feels atmospheric and advanced, adding semantic depth to your system data.
Frequently Asked Questions
QDoes it have a scanning effect?
Yes, the component features a subtle CRT-style scanline overlay to reinforce the terminal aesthetic.
QHow do the progress bars work?
Each metric features a localized progress bar that animates from 0 to its value to simulate data being actively 'populated'.
QWhat is 'SYS_ADMIN'?
It's a stylized header to mimic a command-line interface, which can be fully customized to match your project's naming conventions.