Retro Terminal
Retro terminal pricing section with command-line aesthetics.
Main Features of Retro Terminal
How to Use Retro Terminal in Next.js
Installation Guide for Retro Terminal
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
plans | Array<{name: string, price: number}> | [] | Array of pricing plans with name and price. |
features | string[] | [] | Array of feature strings to display. |
backgroundColor | string | #1a1b26 | Background color (hex, rgb, or hsl). |
terminalBgColor | string | #24283b | Terminal background color. |
terminalBorderColor | string | #414868 | Terminal border color. |
terminalShadowColor | string | rgba(0,0,0,0.5) | Terminal shadow color. |
headerBgColor | string | #1f2335 | Header background color. |
headerBorderColor | string | #414868 | Header border color. |
dot1Color | string | #ff5f56 | First dot color (red). |
dot2Color | string | #ffbd2e | Second dot color (yellow). |
dot3Color | string | #27c93f | Third dot color (green). |
promptTextColor | string | #9aa5ce | Prompt text color. |
commandTextColor | string | #7aa2f7 | Command text color. |
successTextColor | string | #73daca | Success text color. |
infoTextColor | string | #a9b1d6 | Info text color. |
planPrefixColor | string | #7aa2f7 | Plan prefix color. |
planNameColor | string | #ffffff | Plan name text color. |
planPriceColor | string | #9aa5ce | Plan price text color. |
planHoverBorderColor | string | #7aa2f7 | Plan hover border color. |
detailsBgColor | string | #1f2335 | Details background color. |
detailsBorderColor | string | #414868 | Details border color. |
detailsTitleColor | string | #7aa2f7 | Details title text color. |
featureCheckColor | string | #73daca | Feature check color. |
featureTextColor | string | #a9b1d6 | Feature text color. |
hintBgColor | string | #1f2335 | Hint background color. |
hintTextColor | string | #9aa5ce | Hint text color. |
hintKeyBgColor | string | #414868 | Hint key background color. |
hintKeyTextColor | string | #ffffff | Hint key text color. |
cursorColor | string | #7aa2f7 | Cursor color. |
promptText | string | $ | Prompt text. |
commandText | string | cat pricing.txt | Command text. |
successText | string | ✓ Loaded | Success text. |
infoText | string | → Select a tier | Info text. |
detailsTitle | string | Features: | Details title text. |
hintText | string | Press | Hint text. |
hintKey | string | ENTER | Hint key text. |
Related Components
When to Use
Excellent for developer-centric startups, security-themed apps, and Next.js projects that want a retro 'command-line' aesthetic. Use this React component for a terminal-style pricing section with keyboard-driven navigation and ASCII-like visuals.
Best Practices
Maintain consistent spacing within your design system by using it as a secondary interactive layer. Follow React best practices by using monospaced typography and high-contrast colors (e.g., terminal green). Optimize for performance by managed the cursor blink animations.
Why This Component Matters in Modern UI Development
Terminal UIs create a sense of technical depth and nostalgia. This production-ready component helpsคุณ build an interface that feels advanced and developer-friendly, reinforcing a technical brand identity.
Frequently Asked Questions
QAre there keyboard shortcuts?
Yes, users can navigate tiers using arrow keys and select plans with the ENTER key, simulating a real CLI experience.
QCan I customize the colors?
The component supports full customization of prompt, command, cursor, and success colors via its extensive props list.
QIs it mobile responsive?
On mobile, the keyboard-specific hints are hidden, and the interface becomes fully touch-interactable like a standard pricing list.