VibeUI
ExploreStyle PacksFavorites
Get Started
VibeUI

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

Color PaletteTypographyShadowBorder RadiusGradientSpacingNavbarButtonCardHero SectionEasing CurveMicro InteractionBackgroundStyle Pack
Visual FoundationColor PaletteTypographyShadowBorder RadiusGradient
LayoutSpacing
ComponentsNavbarButtonCardHero Section
MotionEasing CurveMicro Interaction
DecorationBackground
PackagesStyle Pack

Navbar

6 of 6 materials

Brand
StoreMaciPhoneSupport
Get Started

Apple Frosted Glass

When navigation disappears, content breathes. A translucent frosted-glass bar with backdrop saturation and blur, hovering above the page like a whisper. Ultra-small typography, generous letter-spacing, and a single-pixel divider — nothing competes for attention.

View Source
Linear
FeaturesMethodPricingChangelog
Get Access

Linear Dark Precision

Engineered restraint — every element earns its place through purpose, not decoration. A dark navigation bar where muted links recede until needed, and a single violet accent line marks the current page. The kind of navigation that makes you trust the product behind it.

View Source
Stripe
ProductsSolutionsDevelopersPricing
Start now

Stripe Luminous

Professional doesn't have to mean cold. A white navigation bar with warm blue-gray typography, a signature gradient accent line beneath the active link, and generous whitespace that signals confidence. The kind of design that makes complex products feel approachable.

View Source
Vercel Command BarNavigation as infrastructure.
Preview

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.

View Source
Notion Breadcrumb NavContext over hierarchy.
Preview

Notion Breadcrumb Nav

Context over hierarchy. A top bar that reads like a file path — each segment is clickable, and the current page title is editable inline. The navigation IS the content structure. No dedicated 'nav links' section because the breadcrumb trail tells you where you are and where you can go.

View Source
GitHub Contextual NavTwo layers of navigation, one layer of trust.
Preview

GitHub Contextual Nav

Two layers of navigation, one layer of trust. A persistent global bar (dark, profile, search) sits above a contextual tab bar that shapeshifts per section — Code, Issues, Pull Requests. The genius isn't either bar alone, it's the separation: the top bar answers 'who am I and where am I,' the bottom bar answers 'what can I do here.' This dual-layer pattern scales to millions of repositories without ever needing a redesign.

View Source