Header

blockmarketing

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.

Installation

$pnpm dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/header.json

$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/header.json

$yarn dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/header.json

$bunx shadcn-svelte@latest add https://uipkge.dev/r/svelte/header.json

Manifest:https://uipkge.dev/r/svelte/header.jsonInstalls to:src/lib/components/blocks/header/

Variants

Loading interactive previews…

npm dependencies

@lucide/svelte

Includes

badge button command kbd navigation-menu separator sheet

Files installed (7)

src/lib/components/blocks/header/Header01.svelte3.9 kB

<script lang="ts">
  import { Boxes, Menu, X } from '@lucide/svelte'
  import { Button } from '$lib/components/ui/button'
  import { Sheet, SheetContent, SheetTrigger } from '$lib/components/ui/sheet'

  let mobileOpen = $state(false)
</script>

<header
  data-slot="header-01"
  class="bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-40 border-b backdrop-blur"
>
  <div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
    <a href="#" class="flex items-center gap-2">
      <div class="bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md">
        <Boxes class="size-4" />
      </div>
      <span class="text-base font-semibold">Acme</span>
    </a>

    <nav class="hidden items-center gap-6 md:flex" aria-label="Primary">
      <a href="#features" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Features</a>
      <a href="#pricing" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Pricing</a>
      <a href="#customers" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Customers</a>
      <a href="#docs" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Docs</a>
      <a href="#blog" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Blog</a>
    </nav>

    <div class="hidden items-center gap-2 md:flex">
      <Button variant="ghost" size="sm">Sign in</Button>
      <Button size="sm">Start free trial</Button>
    </div>

    <Sheet bind:open={mobileOpen}>
      <SheetTrigger>
        {#snippet child({ props })}
          <Button {...props} variant="ghost" size="icon" class="md:hidden" aria-label="Open menu">
            <Menu class="size-5" />
          </Button>
        {/snippet}
      </SheetTrigger>
      <SheetContent side="right" class="w-72">
        <div class="flex h-full flex-col">
          <div class="flex items-center justify-between border-b px-4 py-3">
            <div class="flex items-center gap-2">
              <div class="bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-md">
                <Boxes class="size-3.5" />
              </div>
              <span class="text-sm font-semibold">Acme</span>
            </div>
            <Button
              variant="ghost"
              size="icon"
              class="size-8"
              aria-label="Close menu"
              onclick={() => (mobileOpen = false)}
            >
              <X class="size-4" />
            </Button>
          </div>
          <nav class="flex flex-1 flex-col gap-1 p-4" aria-label="Mobile">
            <a
              href="#features"
              class="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
              onclick={() => (mobileOpen = false)}>Features</a
            >
            <a
              href="#pricing"
              class="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
              onclick={() => (mobileOpen = false)}>Pricing</a
            >
            <a
              href="#customers"
              class="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
              onclick={() => (mobileOpen = false)}>Customers</a
            >
            <a
              href="#docs"
              class="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
              onclick={() => (mobileOpen = false)}>Docs</a
            >
            <a
              href="#blog"
              class="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
              onclick={() => (mobileOpen = false)}>Blog</a
            >
          </nav>
          <div class="flex flex-col gap-2 border-t p-4">
            <Button variant="outline" class="w-full">Sign in</Button>
            <Button class="w-full">Start free trial</Button>
          </div>
        </div>
      </SheetContent>
    </Sheet>
  </div>
</header>

src/lib/components/blocks/header/HeaderAnnouncementStack.svelte4.1 kB

src/lib/components/blocks/header/HeaderCenteredLogo.svelte3 kB

src/lib/components/blocks/header/HeaderFloatingPill.svelte3.6 kB

src/lib/components/blocks/header/HeaderMegaMenu.svelte8.3 kB

src/lib/components/blocks/header/HeaderSearchCommand.svelte4.9 kB

src/lib/components/blocks/header/HeaderTransparentScroll.svelte3 kB

Raw manifest:https://uipkge.dev/r/svelte/header.json

Change language