{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "header", "title": "Header", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/header/header-01.component.ts", "content": "// Sticky marketing top nav. Brand + 5 links + sign-in/CTA on desktop, hamburger +\n// right-side Sheet on mobile. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, signal } from '@angular/core'\nimport { Boxes, LucideAngularModule, Menu, X } from 'lucide-angular'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSheetCloseComponent, UiSheetComponent, UiSheetContentComponent } from '@/ui/sheet/sheet.component'\n\nconst links = [\n { label: 'Features', href: '#features' },\n { label: 'Pricing', href: '#pricing' },\n { label: 'Customers', href: '#customers' },\n { label: 'Docs', href: '#docs' },\n { label: 'Blog', href: '#blog' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-header-01, [ui-header-01]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiButtonComponent, UiSheetCloseComponent, UiSheetComponent, UiSheetContentComponent],\n template: `\n \n
\n \n
\n \n
\n Acme\n \n \n
\n \n \n
\n
\n \n \n \n
\n
\n
\n
\n
\n \n
\n Acme\n
\n \n \n \n
\n \n
\n \n \n
\n
\n
\n
\n
\n \n `,\n})\nexport class UiHeader01Component {\n protected readonly Boxes = Boxes\n protected readonly Menu = Menu\n protected readonly X = X\n protected readonly links = links\n readonly mobileOpen = signal(false)\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/header/header-01.component.ts" }, { "path": "packages/registry-angular/blocks/header/header-announcement-stack.component.ts", "content": "// Two-tier header. A dismissible announcement strip sits above a sticky navbar;\n// dismissing it collapses the strip and the navbar settles flush to the top without a jump.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, OnInit, signal } from '@angular/core'\nimport { ArrowRight, Layers, LucideAngularModule, Menu, X } from 'lucide-angular'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n} from '@/ui/sheet/sheet.component'\n\nconst STORAGE_KEY = 'uipkge:announcement-dismissed'\n\nconst links = [\n { label: 'Platform', href: '#platform' },\n { label: 'Pricing', href: '#pricing' },\n { label: 'Customers', href: '#customers' },\n { label: 'Docs', href: '#docs' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-header-announcement-stack, [ui-header-announcement-stack]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiSeparatorComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n ],\n template: `\n
\n @if (!dismissed()) {\n
\n
\n New\n

\n Row-level scoping now evaluates against SCIM groups.\n Read the changelog\n

\n
\n
\n }\n
\n
\n \n \n Northwind\n \n \n \n
\n \n \n \n
\n
\n

Menu

\n
\n \n \n
\n \n \n
\n
\n
\n
\n
\n
\n `,\n})\nexport class UiHeaderAnnouncementStackComponent implements OnInit {\n protected readonly ArrowRight = ArrowRight\n protected readonly Layers = Layers\n protected readonly Menu = Menu\n protected readonly X = X\n protected readonly links = links\n\n readonly dismissed = signal(false)\n readonly open = signal(false)\n\n ngOnInit(): void {\n try {\n this.dismissed.set(window.sessionStorage.getItem(STORAGE_KEY) === '1')\n } catch {\n this.dismissed.set(false)\n }\n }\n\n dismiss(): void {\n this.dismissed.set(true)\n try {\n window.sessionStorage.setItem(STORAGE_KEY, '1')\n } catch {\n // Blocked storage: the dismissal still holds for this page view.\n }\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/header/header-announcement-stack.component.ts" }, { "path": "packages/registry-angular/blocks/header/header-centered-logo.component.ts", "content": "// Symmetrical navbar: wordmark centred between two nav halves with a utility cluster on\n// the right. Below the breakpoint the split collapses into one sheet trigger.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, signal } from '@angular/core'\nimport { Compass, LucideAngularModule, Menu, ShoppingBag, User } from 'lucide-angular'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n} from '@/ui/sheet/sheet.component'\n\nconst leftLinks = [\n { label: 'Collections', href: '#collections' },\n { label: 'New in', href: '#new' },\n { label: 'Studio', href: '#studio' },\n]\nconst rightLinks = [\n { label: 'Journal', href: '#journal' },\n { label: 'Stockists', href: '#stockists' },\n { label: 'Contact', href: '#contact' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-header-centered-logo, [ui-header-centered-logo]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiButtonComponent,\n UiSeparatorComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n ],\n template: `\n
\n
\n \n
\n \n \n \n
\n
\n

Menu

\n
\n \n \n \n
\n
\n \n \n Halden\n \n \n
\n \n \n
\n
\n
\n `,\n})\nexport class UiHeaderCenteredLogoComponent {\n protected readonly Compass = Compass\n protected readonly Menu = Menu\n protected readonly ShoppingBag = ShoppingBag\n protected readonly User = User\n protected readonly leftLinks = leftLinks\n protected readonly rightLinks = rightLinks\n protected readonly allLinks = [...leftLinks, ...rightLinks]\n protected readonly linkClass =\n 'text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none'\n readonly open = signal(false)\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/header/header-centered-logo.component.ts" }, { "path": "packages/registry-angular/blocks/header/header-floating-pill.component.ts", "content": "// Detached pill navbar floating above the page. A sliding indicator tracks the active link\n// on hover and selection; the CTA stays pinned on the right. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core'\nimport { CircleDot, LucideAngularModule, Menu } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n} from '@/ui/sheet/sheet.component'\n\nconst links = [\n { label: 'Product', href: '#product' },\n { label: 'Pricing', href: '#pricing' },\n { label: 'Customers', href: '#customers' },\n { label: 'Docs', href: '#docs' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-header-floating-pill, [ui-header-floating-pill]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiButtonComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n ],\n template: `\n
\n \n \n \n Verity\n \n \n \n
\n \n \n \n
\n
\n

Menu

\n
\n \n
\n
\n \n
\n `,\n})\nexport class UiHeaderFloatingPillComponent {\n protected readonly CircleDot = CircleDot\n protected readonly Menu = Menu\n protected readonly links = links\n\n readonly active = signal(0)\n readonly hovered = signal(null)\n readonly open = signal(false)\n\n /** Indicator follows hover, falling back to the selected link (measured slots are even widths). */\n readonly indicatorLeft = computed(() => `${(this.hovered() ?? this.active()) * 88}px`)\n readonly indicatorWidth = computed(() => '76px')\n\n pillLinkClass(i: number): string {\n return cn(\n 'focus-visible:ring-ring relative rounded-full px-3.5 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n i === (this.hovered() ?? this.active()) || (this.hovered() === null && i === this.active())\n ? 'text-foreground'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/header/header-floating-pill.component.ts" }, { "path": "packages/registry-angular/blocks/header/header-mega-menu.component.ts", "content": "// Navbar with full-width mega panels. Product and Resources open grouped link lists with\n// descriptions and a highlighted card. Port of the React block 1:1 (desktop hover panels\n// driven by local state; mobile falls back to a sheet).\nimport { ChangeDetectionStrategy, Component, signal } from '@angular/core'\nimport {\n ArrowRight,\n BarChart3,\n BookOpen,\n Boxes,\n Layers,\n LifeBuoy,\n Lock,\n LucideAngularModule,\n Menu,\n Workflow,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n} from '@/ui/sheet/sheet.component'\n\ninterface MegaItem {\n icon: LucideIconData\n title: string\n body: string\n}\ninterface MegaGroup {\n heading: string\n items: MegaItem[]\n}\ninterface MegaMenu {\n label: string\n groups: MegaGroup[]\n highlight: { title: string; body: string; cta: string }\n}\n\nconst menus: MegaMenu[] = [\n {\n label: 'Product',\n groups: [\n {\n heading: 'Core',\n items: [\n { icon: Boxes, title: 'Metric layer', body: 'Versioned definitions your whole org shares.' },\n { icon: BarChart3, title: 'Dashboards', body: 'Composed from certified metrics, not raw SQL.' },\n { icon: Workflow, title: 'Pipelines', body: 'Scheduled materialisation with cost ceilings.' },\n ],\n },\n {\n heading: 'Governance',\n items: [\n { icon: Lock, title: 'Row-level access', body: 'Scope evaluated per query, per identity.' },\n { icon: BookOpen, title: 'Change history', body: 'Every definition edit reviewed and revertible.' },\n { icon: LifeBuoy, title: 'Audit exports', body: 'Generated from the same history, not by hand.' },\n ],\n },\n ],\n highlight: {\n title: 'Ship your first dashboard today',\n body: 'Connect a warehouse, publish one certified metric, and invite the team. No migration required.',\n cta: 'Start the walkthrough',\n },\n },\n {\n label: 'Resources',\n groups: [\n {\n heading: 'Learn',\n items: [\n { icon: BookOpen, title: 'Documentation', body: 'Setup, modelling, and the access model.' },\n { icon: Layers, title: 'Guides', body: 'Reconciliation and first-close checklists.' },\n { icon: BarChart3, title: 'Benchmarks', body: 'Close speed across 240 finance teams.' },\n ],\n },\n {\n heading: 'Support',\n items: [\n { icon: LifeBuoy, title: 'Help centre', body: 'Answers to the questions support gets most.' },\n { icon: Workflow, title: 'Status', body: 'Live uptime and incident history.' },\n { icon: Lock, title: 'Trust centre', body: 'SOC 2, subprocessors, and data residency.' },\n ],\n },\n ],\n highlight: {\n title: 'Read the rollout plan',\n body: 'The five-week implementation we run for every customer, written down so you can run it yourself.',\n cta: 'Open the plan',\n },\n },\n]\n\nconst plainLinks = [\n { label: 'Pricing', href: '#pricing' },\n { label: 'Customers', href: '#customers' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-header-mega-menu, [ui-header-mega-menu]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiButtonComponent,\n UiSeparatorComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n ],\n template: `\n
\n
\n \n \n Northwind\n \n
\n }\n \n }\n @for (link of plainLinks; track link.href) {\n
  • \n {{ link.label }}\n
    • \n }\n \n \n
    \n \n \n \n
    \n
    \n \n \n \n
    \n
    \n

    Menu

    \n
    \n \n
    \n
    \n \n
    \n `,\n})\nexport class UiHeaderMegaMenuComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Layers = Layers\n protected readonly Menu = Menu\n protected readonly menus = menus\n protected readonly plainLinks = plainLinks\n\n readonly open = signal(false)\n readonly openMenu = signal(null)\n\n toggleMenu(label: string): void {\n this.openMenu.set(this.openMenu() === label ? null : label)\n }\n\n triggerClass(label: string): string {\n return cn(\n 'hover:bg-muted hover:text-foreground focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n this.openMenu() === label && 'bg-muted text-foreground',\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/header/header-mega-menu.component.ts" }, { "path": "packages/registry-angular/blocks/header/header-search-command.component.ts", "content": "// Navbar with inline search. Click the field or press ⌘K to open a command palette of\n// grouped results; Escape closes and the shortcut hint stays visible in the trigger.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, HostListener, signal } from '@angular/core'\nimport {\n BarChart3,\n BookOpen,\n Compass,\n FileText,\n History,\n LucideAngularModule,\n Menu,\n Search,\n Users,\n type LucideIconData,\n} from 'lucide-angular'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCommandDialogComponent,\n UiCommandEmptyComponent,\n UiCommandGroupComponent,\n UiCommandInputComponent,\n UiCommandItemComponent,\n UiCommandListComponent,\n} from '@/ui/command/command.component'\nimport { UiKbdComponent } from '@/ui/kbd/kbd.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n} from '@/ui/sheet/sheet.component'\n\nconst links = [\n { label: 'Product', href: '#product' },\n { label: 'Pricing', href: '#pricing' },\n { label: 'Docs', href: '#docs' },\n]\n\ninterface SearchGroup {\n heading: string\n items: { icon: LucideIconData; label: string }[]\n}\n\nconst groups: SearchGroup[] = [\n {\n heading: 'Documentation',\n items: [\n { icon: BookOpen, label: 'Connect a warehouse' },\n { icon: FileText, label: 'Define your first metric' },\n { icon: BarChart3, label: 'Publish a dashboard' },\n ],\n },\n {\n heading: 'Company',\n items: [\n { icon: Users, label: 'Customer stories' },\n { icon: History, label: 'Changelog' },\n ],\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-header-search-command, [ui-header-search-command]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiButtonComponent,\n UiCommandDialogComponent,\n UiCommandEmptyComponent,\n UiCommandGroupComponent,\n UiCommandInputComponent,\n UiCommandItemComponent,\n UiCommandListComponent,\n UiKbdComponent,\n UiSeparatorComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n ],\n template: `\n
    \n
    \n \n \n Halden\n \n \n \n \n Search docs…\n \n \n \n \n
    \n \n \n \n
    \n
    \n

    Menu

    \n
    \n \n \n
    \n \n \n
    \n
    \n
    \n
    \n \n \n \n No results.\n @for (group of groups; track group.heading) {\n \n @for (item of group.items; track item.label) {\n \n \n {{ item.label }}\n \n }\n \n }\n \n \n
    \n `,\n})\nexport class UiHeaderSearchCommandComponent {\n protected readonly Compass = Compass\n protected readonly Menu = Menu\n protected readonly Search = Search\n protected readonly links = links\n protected readonly groups = groups\n\n readonly open = signal(false)\n readonly menuOpen = signal(false)\n\n @HostListener('window:keydown', ['$event'])\n onKeydown(event: KeyboardEvent): void {\n if (event.key.toLowerCase() !== 'k' || !(event.metaKey || event.ctrlKey)) return\n event.preventDefault()\n this.open.set(!this.open())\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/header/header-search-command.component.ts" }, { "path": "packages/registry-angular/blocks/header/header-transparent-scroll.component.ts", "content": "// Navbar that starts transparent over the hero and fades in a blurred, bordered surface\n// past the first scroll. Port of the React block 1:1 (starts unscrolled so server and first\n// client paint agree; the scroll listener is the only thing that swaps the surface).\nimport { ChangeDetectionStrategy, Component, HostListener, signal } from '@angular/core'\nimport { Layers, LucideAngularModule, Menu } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n} from '@/ui/sheet/sheet.component'\n\nconst links = [\n { label: 'Product', href: '#product' },\n { label: 'Solutions', href: '#solutions' },\n { label: 'Pricing', href: '#pricing' },\n { label: 'Docs', href: '#docs' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-header-transparent-scroll, [ui-header-transparent-scroll]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiButtonComponent,\n UiSeparatorComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n ],\n template: `\n
    \n
    \n \n \n Northwind\n \n \n \n
    \n \n \n \n
    \n
    \n

    Menu

    \n
    \n \n \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n `,\n})\nexport class UiHeaderTransparentScrollComponent {\n protected readonly Layers = Layers\n protected readonly Menu = Menu\n protected readonly links = links\n\n readonly scrolled = signal(false)\n readonly open = signal(false)\n\n @HostListener('window:scroll')\n onScroll(): void {\n this.scrolled.set(window.scrollY > 24)\n }\n\n get headerClass(): string {\n return cn(\n 'fixed inset-x-0 top-0 z-40 transition-colors duration-200',\n this.scrolled() ? 'border-border bg-background/85 border-b backdrop-blur' : 'border-b border-transparent',\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/header/header-transparent-scroll.component.ts" }, { "path": "packages/registry-angular/blocks/header/index.ts", "content": "export { UiHeader01Component } from './header-01.component'\nexport { UiHeaderAnnouncementStackComponent } from './header-announcement-stack.component'\nexport { UiHeaderCenteredLogoComponent } from './header-centered-logo.component'\nexport { UiHeaderFloatingPillComponent } from './header-floating-pill.component'\nexport { UiHeaderMegaMenuComponent } from './header-mega-menu.component'\nexport { UiHeaderSearchCommandComponent } from './header-search-command.component'\nexport { UiHeaderTransparentScrollComponent } from './header-transparent-scroll.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/header/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/command.json", "https://uipkge.dev/r/angular/kbd.json", "https://uipkge.dev/r/angular/navigation-menu.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/sheet.json" ], "description": "Site header collection: sticky top bar, dismissible announcement stack, centered-logo split, floating pill, full-width mega menu, inline search with command palette, and a transparent-over-hero scroll variant — each with a mobile sheet fallback.", "categories": [ "marketing" ] }