Pewter Navigation Strip
A monospaced, utilitarian developer tools navigation with integrated code showcase.
Features
- Full-width nav bar with IBM Plex Mono typography for nav items
- Dark zinc (#18181B) background with pewter/silver (#A1A1AA, #71717A) text
- Bright cyan (#22D3EE) accent for active state with bottom glow effect
- Logo area with version badge
- Center-aligned navigation links with hover glow underline
- Search input with ⌘K keyboard shortcut indicator
- Code editor hero with syntax-highlighted TypeScript code
- File tabs, line numbers, and terminal output section
- Stats strip showing edge regions, uptime, cold start, and developer count
- Dark mode support with deeper bg (#09090B)
Dependencies
lucide-react for icons- Shadcn UI: Button, Badge, Input, Separator
Customization
- Replace nav links with your own routes
- Update code block content for your API examples
- Swap stats with real metrics
- Adjust cyan accent color to match your brand
