Footer — Minimal Row

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface MinimalRowLink {
  label: string
  href: string
}

Files installed (2)

• src/app/components/blocks/footer-minimal-row/footer-minimal-row.component.ts2.8 kB

  Copy

  // Single-row footer carrying the wordmark, a short inline link list, social icons,
  // and the copyright line, for pages that should end quietly. Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { Github, Layers, Linkedin, LucideAngularModule } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  
  interface MinimalRowLink {
    label: string
    href: string
  }
  
  const links: MinimalRowLink[] = [
    { label: 'Product', href: '#product' },
    { label: 'Pricing', href: '#pricing' },
    { label: 'Docs', href: '#docs' },
    { label: 'Privacy', href: '#privacy' },
    { label: 'Terms', href: '#terms' },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-footer-minimal-row, [ui-footer-minimal-row]',
    standalone: true,
    // React renders the root <footer> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [LucideAngularModule, UiButtonComponent, UiSeparatorComponent],
    template: `
      <footer data-slot="footer-minimal-row" [class]="rootClass">
        <div class="mx-auto flex max-w-6xl flex-col gap-4 px-6 py-6 sm:flex-row sm:items-center">
          <a href="#top" class="flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight">
            <lucide-icon [img]="Layers" class="text-primary size-4" aria-hidden="true" />
            Northwind
          </a>
  
          <ui-separator orientation="vertical" class="hidden h-4 sm:block" />
  
          <nav class="flex flex-wrap items-center gap-x-5 gap-y-2" aria-label="Footer">
            @for (link of linkList; track link.href) {
              <a [href]="link.href" class="text-muted-foreground hover:text-foreground text-sm transition-colors">
                {{ link.label }}
              </a>
            }
          </nav>
  
          <div class="flex items-center gap-1 sm:ml-auto">
            <button ui-button variant="ghost" size="icon" class="size-8" aria-label="GitHub">
              <lucide-icon [img]="Github" class="size-4" aria-hidden="true" />
            </button>
            <button ui-button variant="ghost" size="icon" class="size-8" aria-label="LinkedIn">
              <lucide-icon [img]="Linkedin" class="size-4" aria-hidden="true" />
            </button>
            <span class="text-muted-foreground ml-2 text-xs">© 2026 Northwind</span>
          </div>
        </div>
      </footer>
    `,
  })
  export class UiFooterMinimalRowComponent {
    protected readonly Github = Github
    protected readonly Layers = Layers
    protected readonly Linkedin = Linkedin
  
    protected readonly linkList = links
  
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('border-border bg-background border-t', this.className)
    }
  }
  

• src/app/components/blocks/footer-minimal-row/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/footer-minimal-row.json