Components

Notch

Pro

A MacBook notch that is the menu. Hover or tap and the notch itself swells into a shelf of links on a Swift-tuned spring, the camera holding its place at the top, then shrinks back. Concave flares, a lit lower lip, and a halo so black reads on black.

PlanesFileEditViewWindowHelp
Wed 9:41 AM

Hover the notch

Installation

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

Unlock with Planes Pro

$99 once · 80 Pro components · lifetime updates.

I have a licenseGet Pro
<Notch
  fixed
  items={[
    { href: "/#features", label: "Features", hint: "What it does" },
    { href: "/faq", label: "FAQ", hint: "Licence, trial" },
  ]}
  footer={<a href="/app.dmg" className="...">Download</a>}
/>

Use cases

  • Site navigation for a Mac app

    The nav is the product's own idea, so the site demonstrates it before saying it.

  • Landing page header

    Three links and a download button in one glance, with no header bar on a black hero.

  • Launch teaser

    Swap the footer for an email capture until the app ships.