Onyx DevTools Form
A terminal-inspired API key configuration form for developer tools.
Features
- Terminal aesthetic — Pure black background with neon green text
- Scan-line effect — CSS repeating gradient overlay for CRT feel
- JetBrains Mono — Monospace font via Google Fonts
- Key generation — Display field with copy and regenerate buttons
- Environment selector — DEV/STG/PROD toggle buttons with color coding
- Rate limit slider — Range input with live numeric display
- IP whitelist — Multi-line textarea for CIDR notation
- Webhook URL — URL input with terminal styling
- Glow effects — CSS text-shadow for neon glow on focus
Dependencies
@/components/vue-ui/card — Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter@/components/vue-ui/button — Button@/components/vue-ui/badge — Badge@/components/vue-ui/separator — Separatorlucide-vue-next — Copy, RefreshCw, Terminal, ShieldCheck icons
Customization
- Fields: Add or remove form fields as needed
- Colors: Change neon green to cyan, purple, or amber for different vibes
- Font: Replace JetBrains Mono with Fira Code or Source Code Pro
