Retro Terminal
Retro terminal pricing section with command-line aesthetics.
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. |
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
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.
FAQ
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.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.