$129 intro price

Components

Navbar

Pro

A calendar that guards your mornings

Meetings go where they hurt least, and the first three hours of your day stay yours. Set it once and stop defending it.

Try it freeSee how it works

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/navbar

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$129 once · 159 Pro components · lifetime updates.

I have a licenseGet Pro
import { Navbar } from "@/components/ui/Navbar";

<Navbar
  variant="floating"
  logo={<Wordmark />}
  items={[
    { label: "Product", content: <ProductMenu /> },
    { label: "Pricing", href: "/pricing", active: true },
    { label: "Docs", href: "/docs" },
  ]}
  actions={
    <>
      <a href="/login">Log in</a>
      <a href="/signup">Get started</a>
    </>
  }
/>

Use cases

  • SaaS landing pages

    The header every template starts with, pairing with the announcement bar, hero and pricing section.

  • Docs and changelog sites

    A bar variant with an active link and a product dropdown over long, scrolling pages.

  • Marketing sites with a hero image

    The floating variant stays transparent over the hero and only becomes a surface once the page moves.