registry:component

Header

v0.2.0beta

Top navigation with brand mark, app sections, and account menus.

Registry Endpoint

npx shadcn@latest add @aavya/aavya-header

One-time setup — add the @aavya registry to your components.json so branded dependencies resolve to Aavya (not stock shadcn):

"registries": { "@aavya": "https://registry-dev.aavya.com/r/{name}.json" }

Or install by full URL: npx shadcn@latest add https://registry-dev.aavya.com/r/aavya-header.json

Live Preview

Preview Route

Open /

Dependencies

Registry

@aavya/ui-button @aavya/ui-dropdown-menu @aavya/ui-avatar

Usage Snippet

import { Header } from '@/components/layout/header'

export default function Example() {
  return (
    <div className="p-6">
      <Header />
    </div>
  )
}

Source Preview

'use client'

import { usePathname } from 'next/navigation'
import { Separator } from '@/components/ui/separator'
import { SidebarTrigger } from '@/components/ui/sidebar'
import { ThemeToggle } from '@/components/layout/theme-toggle'
import { ProfileDropdown } from '@/components/blocks/profile-dropdown'
import { SearchTrigger } from '@/components/layout/command-menu'

export function Header() {
  const pathname = usePathname()

  return (
    <header className="sticky top-0 z-40 border-b border-border/80 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/80">
      <div className="flex h-14 items-center gap-3 px-4 sm:px-6">
        <SidebarTrigger className="[&_svg]:size-5" />
        <Separator orientation='vertical' className='hidden !h-4 sm:block' />

        {/* Search trigger */}
        <SearchTrigger />

        <div className="ml-auto flex items-center gap-0.5 sm:gap-1">
          <ThemeToggle />
          <ProfileDropdown loginRedirect={pathname} />
        </div>
      </div>
    </header>
  )
}