Command Center Navbar

Installation

pnpm dlx shadcn@latest add @cleverui/navbar-command-center

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { NavbarCommandCenter } from '@/components/blocks/navbar-command-center'

Exampletsx

import { NavbarCommandCenter } from '@/components/blocks/navbar-command-center'

export default function NavbarCommandCenterDemo() {
  return (
    <div className="min-h-[200vh]">
      <NavbarCommandCenter
        brand={
          <span className="inline-flex items-baseline gap-1.5">
            Atlas
            <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
              cloud
            </span>
          </span>
        }
        links={[
          { label: 'Product', href: '#product' },
          { label: 'Docs', href: '#docs' },
          { label: 'Pricing', href: '#pricing' },
          { label: 'Changelog', href: '#changelog' },
        ]}
        commands={[
          { group: 'Product', label: 'Overview', hint: 'Page', href: '#product' },
          { group: 'Product', label: 'Integrations', hint: 'Page', href: '#integrations' },
          { group: 'Product', label: 'Security whitepaper', hint: 'PDF', href: '#security' },
          { group: 'Docs', label: 'Quickstart', hint: 'Guide', href: '#quickstart' },
          { group: 'Docs', label: 'API reference', hint: 'Reference', href: '#api' },
          { group: 'Docs', label: 'Webhooks', hint: 'Guide', href: '#webhooks' },
          { group: 'Account', label: 'Billing', hint: 'Settings', href: '#billing' },
          { group: 'Account', label: 'Team members', hint: 'Settings', href: '#team' },
          { group: 'Account', label: 'Audit log', hint: 'Settings', href: '#audit' },
        ]}
        placeholder="Search pages"
        cta={{ label: 'Start free', href: '#signup' }}
      />
      <div className="mx-auto max-w-6xl px-4 pt-36 sm:px-6 sm:pt-40">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Keyboard-first chrome
        </p>
        <h1 className="mt-3 max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
          Press ⌘K to open the command sheet from anywhere on the page.
        </h1>
        <p className="mt-5 max-w-lg text-sm leading-relaxed text-muted-foreground sm:text-base">
          Atlas Cloud routes every docs page, settings surface, and product section through one
          field-shaped trigger in the navbar. Arrow keys move the keyline; Enter follows the link.
        </p>
        <div className="mt-16 grid gap-4 sm:grid-cols-2">
          {[
            { title: 'Deployments', body: '12 active regions · median deploy 48s' },
            { title: 'Incidents', body: 'Zero open P1s · last closed 6d ago' },
            { title: 'Spend', body: '$4.2k MTD · under $6k budget' },
            { title: 'Uptime', body: '99.98% rolling 30 days' },
          ].map((card) => (
            <div
              key={card.title}
              className="rounded-2xl border border-border/60 bg-card px-5 py-5"
            >
              <p className="text-sm font-medium text-foreground">{card.title}</p>
              <p className="mt-1 text-sm text-muted-foreground">{card.body}</p>
            </div>
          ))}
        </div>
        <div className="mt-8 space-y-4">
          {Array.from({ length: 6 }, (_, i) => (
            <div key={i} className="h-20 rounded-2xl border border-border/60 bg-card" />
          ))}
        </div>
      </div>
    </div>
  )
}

API reference

NavbarCommandCenter accepts the following props.

Prop	Type	Default	Description
`brand`	`React.ReactNode`	`'CleverUI'`	–
`brandHref`	`string`	`'/'`	–
`links`*	`{ label: string; href: string }[]`	–	quiet links flanking the command button
`commands`*	`NavbarCommandCenterCommand[]`	–	destinations inside the sheet; group renders mono section micro-labels
`placeholder`	`string`	`'Search pages'`	muted text inside the field-shaped trigger and the sheet's filter input
`cta`	`{ label: string; href: string }`	–	–

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface NavbarCommandCenterCommand {
  group?: string
  label: string
  hint?: string
  href: string
}

Related components

Mega Panel Navbar

Navbar whose product menu opens a three-zone mega panel, primary destinations with descriptions, a quiet secondary column, and a featured card. Real IA, not a link dump.

Pill Dock Navbar

A floating pill nav that hangs centered under the top edge, the active link carries a sliding thumb, and the whole dock condenses on scroll. App-like, not corporate.

Bottom Tabs Navbar

App-style React navigation, a thumb-reach bottom tab bar with a raised primary action on mobile that becomes a top Tailwind glass bar on desktop; one landmark, safe-area aware.

Breadcrumb Morph Navbar

An app navbar that morphs between top-level links and a breadcrumb trail as a depth prop changes, the active link travels into crumb position with layoutId continuity.

Flow Steps Navbar

Checkout-flow navbar for React, a numbered step trail with aria-current and honest revisit links, condensing to a mono counter and Tailwind hairline progress fill on mobile.

Glass Navbar

Header that starts as pure structure over the hero and condenses into glass on scroll, blur, hairline seam, tighter height. Accessible staggered mobile menu with Escape handling.

Frequently asked questions

How do I install the Command Center Navbar component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/navbar-command-center`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Command Center Navbar require?

Command Center Navbar uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Command Center Navbar to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code