VibeUI Logo
VibeUI
ExploreStyle PacksFavorites
Get Started
VibeUI

Design ingredients for AI coding. Built for Cursor, Windsurf, and beyond.

Back to Explore

Vercel Command Bar

Navigation as infrastructure. A stark black bar where the most prominent element isn't a link — it's a command palette trigger (⌘K) that says 'skip the menu, just tell me what you want.' Link hover states transition from dim gray to white like a terminal cursor activating a line. The entire nav is monochrome because color would imply hierarchy, and in a command-driven UI, everything is equally accessible.

futuristicminimaltechsaas

Interactive Preview

Vercel Command BarNavigation as infrastructure.
Preview
Build a Vercel-style command bar navigation.

Design philosophy — developer-first navigation:
1. Background: Pure black (#000000) with a 1px bottom border (#333). No blur, no transparency — solid and authoritative.
2. Layout: Fixed top, full-width. Logo left, navigation center, actions right (including a ⌘K command palette trigger).
3. Typography: 13px, font-weight 400, color #888 default. Hover → #fff with 150ms transition. Active link gets a subtle bottom dot indicator.
4. Command palette trigger: Inline search-like button with rounded-md, bg #333, text #888, 12px. Shows "⌘K" or "Search..." placeholder. This is the centerpiece of the nav.
5. Logo: Simple wordmark in white, 15px, font-weight 600. A small triangle (▲) icon before the text.
6. Height: 48px. Vertically centered content with flex.
7. Separator: Between logo section and nav links, add a subtle slash "/" divider in #333.

The navigation should feel like a CLI wearing a GUI skin — powerful underneath, restrained on the surface.