@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/navbar/Navbar01.svelte

@@ -0,0 +1,234 @@
+<!--
+  Navbar01.svelte
+  Full app navbar: logo left, nav links with badge + dropdown centre-left,
+  search + avatar + upgrade button right. Mobile: hamburger → slide-down menu
+  with collapsible Settings sub-items + user profile footer.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import type { Snippet } from 'svelte';
+
+  interface NavItem {
+    label: string;
+    href?: string;
+    badge?: number | string;
+    children?: NavItem[];
+  }
+
+  interface User {
+    name: string;
+    email: string;
+    avatar?: string;
+  }
+
+  let {
+    class: className = '',
+    logo,
+    navItems = defaultNavItems(),
+    user = { name: 'John Doe', email: 'hi@shadcndesign.com' },
+    upgradeLabel = 'Upgrade',
+    onupgrade = () => {},
+    children
+  }: {
+    class?: string;
+    logo?: Snippet;
+    navItems?: NavItem[];
+    user?: User;
+    upgradeLabel?: string;
+    onupgrade?: () => void;
+    children?: Snippet;
+  } = $props();
+
+  function defaultNavItems(): NavItem[] {
+    return [
+      { label: 'Dashboard', href: '#' },
+      { label: 'Orders', href: '#', badge: 2 },
+      { label: 'Products', href: '#' },
+      { label: 'Customers', href: '#' },
+      {
+        label: 'Settings',
+        children: [
+          { label: 'General', href: '#' },
+          { label: 'Security', href: '#' },
+          { label: 'API', href: '#' },
+          { label: 'Advanced', href: '#' }
+        ]
+      }
+    ];
+  }
+
+  let mobileOpen = $state(false);
+  let openDropdown = $state<string | null>(null);
+  let userMenuOpen = $state(false);
+
+  function initials(name: string) {
+    return name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
+  }
+</script>
+
+<nav class={cn('w-full border-b bg-background', className)}>
+  <!-- Desktop -->
+  <div class="hidden h-14 items-center gap-6 px-4 md:flex">
+    <!-- Logo -->
+    <div class="flex shrink-0 items-center">
+      {#if logo}
+        {@render logo()}
+      {:else}
+        <div class="flex h-8 w-8 items-center justify-center rounded-md bg-foreground text-background">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Nav links -->
+    <div class="flex items-center gap-1">
+      {#each navItems as item}
+        {#if item.children}
+          <div class="relative">
+            <button
+              type="button"
+              onclick={() => (openDropdown = openDropdown === item.label ? null : item.label)}
+              class="flex items-center gap-1 rounded-md px-3 py-1.5 text-sm hover:bg-muted"
+            >
+              {item.label}
+              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+            </button>
+            {#if openDropdown === item.label}
+              <div class="absolute left-0 top-full z-20 mt-1 min-w-[160px] rounded-md border bg-background p-1 shadow-md">
+                {#each item.children as child}
+                  <a href={child.href ?? '#'} class="block rounded-sm px-3 py-1.5 text-sm hover:bg-muted">{child.label}</a>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        {:else}
+          <a
+            href={item.href ?? '#'}
+            class="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm hover:bg-muted"
+          >
+            {item.label}
+            {#if item.badge}
+              <span class="flex h-4 min-w-4 items-center justify-center rounded-full bg-foreground px-1 text-[10px] font-bold text-background">{item.badge}</span>
+            {/if}
+          </a>
+        {/if}
+      {/each}
+    </div>
+
+    <div class="ml-auto flex items-center gap-2">
+      <!-- Search -->
+      <button type="button" class="flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      </button>
+      <!-- Avatar -->
+      <div class="relative">
+        <button type="button" onclick={() => (userMenuOpen = !userMenuOpen)} class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full border-2 border-border hover:opacity-80">
+          {#if user.avatar}
+            <img src={user.avatar} alt={user.name} class="h-full w-full object-cover" />
+          {:else}
+            <span class="text-xs font-semibold">{initials(user.name)}</span>
+          {/if}
+        </button>
+        {#if userMenuOpen}
+          <div class="absolute right-0 top-full z-20 mt-1 w-52 rounded-md border bg-background p-1 shadow-md">
+            <div class="px-3 py-2 text-sm font-medium">{user.name}</div>
+            <div class="px-3 pb-2 text-xs text-muted-foreground">{user.email}</div>
+            <hr class="my-1" />
+            <a href="#" class="block rounded-sm px-3 py-1.5 text-sm hover:bg-muted">My profile</a>
+            <a href="#" class="block rounded-sm px-3 py-1.5 text-sm hover:bg-muted">Account settings</a>
+            <a href="#" class="block rounded-sm px-3 py-1.5 text-sm hover:bg-muted">Billing</a>
+            <hr class="my-1" />
+            <button type="button" class="w-full rounded-sm px-3 py-1.5 text-left text-sm hover:bg-muted">Sign out</button>
+          </div>
+        {/if}
+      </div>
+      <!-- Upgrade -->
+      <button
+        type="button"
+        onclick={onupgrade}
+        class="flex items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-sm font-medium text-background hover:bg-foreground/90"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
+        {upgradeLabel}
+      </button>
+    </div>
+  </div>
+
+  <!-- Mobile closed -->
+  <div class="flex h-14 items-center justify-between px-4 md:hidden">
+    <button type="button" onclick={() => (mobileOpen = !mobileOpen)} class="flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted">
+      {#if mobileOpen}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      {:else}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
+      {/if}
+    </button>
+    <div class="flex h-8 w-8 items-center justify-center rounded-md bg-foreground text-background">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
+    </div>
+    <div class="flex items-center gap-2">
+      <button type="button" class="flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      </button>
+      <button type="button" onclick={onupgrade} class="flex items-center gap-1 rounded-md bg-foreground px-3 py-1.5 text-sm font-medium text-background">
+        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
+        {upgradeLabel}
+      </button>
+      <button type="button" onclick={() => (userMenuOpen = !userMenuOpen)} class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full border-2 border-border">
+        <span class="text-xs font-semibold">{initials(user.name)}</span>
+      </button>
+    </div>
+  </div>
+
+  <!-- Mobile drawer -->
+  {#if mobileOpen}
+    <div class="border-t px-4 pb-4 md:hidden">
+      {#each navItems as item}
+        {#if item.children}
+          <div>
+            <button
+              type="button"
+              onclick={() => (openDropdown = openDropdown === item.label ? null : item.label)}
+              class="flex w-full items-center justify-between rounded-md px-2 py-2 text-sm hover:bg-muted"
+            >
+              {item.label}
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cn('transition-transform', openDropdown === item.label && 'rotate-180')}><path d="m6 9 6 6 6-6"/></svg>
+            </button>
+            {#if openDropdown === item.label}
+              <div class="ml-4 flex flex-col">
+                {#each item.children as child}
+                  <a href={child.href ?? '#'} class="rounded-md px-2 py-2 text-sm text-muted-foreground hover:bg-muted">{child.label}</a>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        {:else}
+          <a href={item.href ?? '#'} class="flex items-center gap-2 rounded-md px-2 py-2 text-sm hover:bg-muted">
+            {item.label}
+            {#if item.badge}
+              <span class="flex h-4 min-w-4 items-center justify-center rounded-full bg-foreground px-1 text-[10px] font-bold text-background">{item.badge}</span>
+            {/if}
+          </a>
+        {/if}
+      {/each}
+      <hr class="my-3" />
+      <div class="flex items-center gap-3 px-2 py-2">
+        <div class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full border-2 border-border">
+          <span class="text-xs font-semibold">{initials(user.name)}</span>
+        </div>
+        <div>
+          <p class="text-sm font-medium">{user.name}</p>
+          <p class="text-xs text-muted-foreground">{user.email}</p>
+        </div>
+      </div>
+      <a href="#" class="block rounded-md px-2 py-2 text-sm hover:bg-muted">My profile</a>
+      <a href="#" class="block rounded-md px-2 py-2 text-sm hover:bg-muted">Account settings</a>
+      <a href="#" class="block rounded-md px-2 py-2 text-sm hover:bg-muted">Billing</a>
+      <button type="button" class="w-full rounded-md px-2 py-2 text-left text-sm hover:bg-muted">Sign out</button>
+    </div>
+  {/if}
+</nav>
+
+{#if children}
+  {@render children()}
+{/if}

package/src/registry/blocks/navbar/Navbar02.svelte

@@ -0,0 +1,111 @@
+<!--
+  Navbar02.svelte
+  Logo-only left, right-aligned nav links + Upgrade button + avatar.
+  Mobile: hamburger → full-screen menu.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface NavItem { label: string; href?: string; current?: boolean; }
+  interface User { name: string; email: string; avatar?: string; }
+
+  let {
+    class: className = '',
+    navItems = defaultNav(),
+    user = { name: 'John Doe', email: 'hi@shadcndesign.com' },
+    upgradeLabel = 'Upgrade',
+    onupgrade = () => {}
+  }: {
+    class?: string;
+    navItems?: NavItem[];
+    user?: User;
+    upgradeLabel?: string;
+    onupgrade?: () => void;
+  } = $props();
+
+  function defaultNav(): NavItem[] {
+    return [
+      { label: 'Dashboard', href: '#', current: true },
+      { label: 'Orders', href: '#' },
+      { label: 'Products', href: '#' },
+      { label: 'Customers', href: '#' },
+      { label: 'Settings', href: '#' }
+    ];
+  }
+
+  let mobileOpen = $state(false);
+  let userMenuOpen = $state(false);
+  function initials(n: string) { return n.split(' ').map(w => w[0]).join('').slice(0,2).toUpperCase(); }
+</script>
+
+<nav class={cn('w-full border-b bg-background', className)}>
+  <!-- Desktop -->
+  <div class="hidden h-14 items-center justify-between px-4 md:flex">
+    <div class="flex h-8 w-8 items-center justify-center rounded-md bg-foreground text-background">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
+    </div>
+    <div class="flex items-center gap-1">
+      {#each navItems as item}
+        <a
+          href={item.href ?? '#'}
+          class={cn('rounded-md px-3 py-1.5 text-sm hover:bg-muted', item.current && 'bg-muted font-medium')}
+        >{item.label}</a>
+      {/each}
+      <button type="button" onclick={onupgrade} class="ml-2 flex items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-sm font-medium text-background hover:bg-foreground/90">
+        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
+        {upgradeLabel}
+      </button>
+      <div class="relative ml-1">
+        <button type="button" onclick={() => (userMenuOpen = !userMenuOpen)} class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full border-2 border-border hover:opacity-80">
+          <span class="text-xs font-semibold">{initials(user.name)}</span>
+        </button>
+        {#if userMenuOpen}
+          <div class="absolute right-0 top-full z-20 mt-1 w-52 rounded-md border bg-background p-1 shadow-md">
+            <div class="px-3 py-2"><p class="text-sm font-medium">{user.name}</p><p class="text-xs text-muted-foreground">{user.email}</p></div>
+            <hr class="my-1" />
+            <a href="#" class="block rounded-sm px-3 py-1.5 text-sm hover:bg-muted">My profile</a>
+            <a href="#" class="block rounded-sm px-3 py-1.5 text-sm hover:bg-muted">Account settings</a>
+            <a href="#" class="block rounded-sm px-3 py-1.5 text-sm hover:bg-muted">Billing</a>
+            <hr class="my-1" />
+            <button type="button" class="w-full rounded-sm px-3 py-1.5 text-left text-sm hover:bg-muted">Sign out</button>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile -->
+  <div class="flex h-14 items-center justify-between px-4 md:hidden">
+    <button type="button" onclick={() => (mobileOpen = !mobileOpen)} class="flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted">
+      {#if mobileOpen}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      {:else}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
+      {/if}
+    </button>
+    <div class="flex h-8 w-8 items-center justify-center rounded-md bg-foreground text-background">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
+    </div>
+    <button type="button" onclick={onupgrade} class="flex items-center gap-1 rounded-md bg-foreground px-3 py-1.5 text-sm font-medium text-background">
+      <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
+      {upgradeLabel}
+    </button>
+  </div>
+
+  {#if mobileOpen}
+    <div class="border-t px-4 pb-4 md:hidden">
+      {#each navItems as item}
+        <a href={item.href ?? '#'} class={cn('block rounded-md px-2 py-2 text-sm hover:bg-muted', item.current && 'font-medium')}>{item.label}</a>
+      {/each}
+      <hr class="my-3" />
+      <div class="flex items-center gap-3 px-2 py-2">
+        <div class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-border"><span class="text-xs font-semibold">{initials(user.name)}</span></div>
+        <div><p class="text-sm font-medium">{user.name}</p><p class="text-xs text-muted-foreground">{user.email}</p></div>
+      </div>
+      <a href="#" class="block rounded-md px-2 py-2 text-sm hover:bg-muted">My profile</a>
+      <a href="#" class="block rounded-md px-2 py-2 text-sm hover:bg-muted">Account settings</a>
+      <a href="#" class="block rounded-md px-2 py-2 text-sm hover:bg-muted">Billing</a>
+      <button type="button" class="w-full rounded-md px-2 py-2 text-left text-sm hover:bg-muted">Sign out</button>
+    </div>
+  {/if}
+</nav>

package/src/registry/blocks/navbar/Navbar03.svelte

@@ -0,0 +1,88 @@
+<!--
+  Navbar03.svelte
+  Minimal: logo left, centred search bar, notification badge + avatar right.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface User { name: string; email: string; avatar?: string; }
+
+  let {
+    class: className = '',
+    searchPlaceholder = 'Search…',
+    notificationCount = 2,
+    user = { name: 'John Doe', email: 'hi@shadcndesign.com' }
+  }: {
+    class?: string;
+    searchPlaceholder?: string;
+    notificationCount?: number;
+    user?: User;
+  } = $props();
+
+  let userMenuOpen = $state(false);
+  function initials(n: string) { return n.split(' ').map(w => w[0]).join('').slice(0,2).toUpperCase(); }
+</script>
+
+<nav class={cn('w-full border-b bg-background', className)}>
+  <!-- Desktop -->
+  <div class="hidden h-14 items-center gap-4 px-4 md:flex">
+    <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-foreground text-background">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
+    </div>
+    <!-- Search -->
+    <div class="flex flex-1 items-center gap-2 rounded-md border px-3 py-1.5">
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      <input type="text" placeholder={searchPlaceholder} class="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground" />
+    </div>
+    <div class="flex items-center gap-2">
+      <!-- Notification bell -->
+      <div class="relative">
+        <button type="button" class="flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
+        </button>
+        {#if notificationCount > 0}
+          <span class="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-foreground px-1 text-[9px] font-bold text-background">{notificationCount}</span>
+        {/if}
+      </div>
+      <!-- Avatar -->
+      <div class="relative">
+        <button type="button" onclick={() => (userMenuOpen = !userMenuOpen)} class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full border-2 border-border hover:opacity-80">
+          <span class="text-xs font-semibold">{initials(user.name)}</span>
+        </button>
+        {#if userMenuOpen}
+          <div class="absolute right-0 top-full z-20 mt-1 w-52 rounded-md border bg-background p-1 shadow-md">
+            <div class="px-3 py-2"><p class="text-sm font-medium">{user.name}</p><p class="text-xs text-muted-foreground">{user.email}</p></div>
+            <hr class="my-1" />
+            <a href="#" class="block rounded-sm px-3 py-1.5 text-sm hover:bg-muted">My profile</a>
+            <a href="#" class="block rounded-sm px-3 py-1.5 text-sm hover:bg-muted">Account settings</a>
+            <hr class="my-1" />
+            <button type="button" class="w-full rounded-sm px-3 py-1.5 text-left text-sm hover:bg-muted">Sign out</button>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile -->
+  <div class="flex h-14 items-center justify-between px-4 md:hidden">
+    <div class="flex h-8 w-8 items-center justify-center rounded-md bg-foreground text-background">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
+    </div>
+    <div class="flex items-center gap-2">
+      <button type="button" class="flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      </button>
+      <div class="relative">
+        <button type="button" class="flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
+        </button>
+        {#if notificationCount > 0}
+          <span class="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-foreground px-1 text-[9px] font-bold text-background">{notificationCount}</span>
+        {/if}
+      </div>
+      <button type="button" class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full border-2 border-border">
+        <span class="text-xs font-semibold">{initials(user.name)}</span>
+      </button>
+    </div>
+  </div>
+</nav>

package/src/registry/blocks/navbar/index.ts

@@ -0,0 +1,3 @@
+export { default as Navbar01 } from './Navbar01.svelte';
+export { default as Navbar02 } from './Navbar02.svelte';
+export { default as Navbar03 } from './Navbar03.svelte';

package/src/registry/blocks/not-found/NotFound01.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		onHome?: () => void;
+		onContact?: () => void;
+	}
+
+	const { class: className, onHome, onContact }: Props = $props();
+</script>
+
+<section
+	class={cn(
+		'w-full bg-background min-h-[60vh] flex flex-col items-center justify-center px-4 text-center',
+		className
+	)}
+>
+	<p class="text-8xl font-black text-muted-foreground/20">404</p>
+	<h1 class="mt-4 text-3xl font-bold">Page not found</h1>
+	<p class="mt-2 text-muted-foreground max-w-sm">
+		Sorry, we couldn't find the page you're looking for.
+	</p>
+	<div class="mt-8 flex gap-3">
+		<Button onclick={onHome}>Go home</Button>
+		<Button variant="outline" onclick={onContact}>Contact support</Button>
+	</div>
+</section>

package/src/registry/blocks/not-found/NotFound02.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		onHome?: () => void;
+	}
+
+	const { class: className, onHome }: Props = $props();
+</script>
+
+<section
+	class={cn('w-full bg-background min-h-[60vh] flex items-center px-4', className)}
+>
+	<div class="mx-auto max-w-5xl grid grid-cols-1 gap-8 sm:grid-cols-2 sm:items-center w-full">
+		<div>
+			<p class="text-sm font-semibold text-muted-foreground uppercase tracking-wide">404</p>
+			<h1 class="mt-4 text-3xl font-bold">Oops! Page not found</h1>
+			<p class="mt-4 text-muted-foreground">
+				The page you're looking for doesn't exist or has been moved.
+			</p>
+			<Button onclick={onHome} class="mt-8">Back to home</Button>
+		</div>
+
+		<div class="aspect-square w-full rounded-2xl bg-muted" />
+	</div>
+</section>

package/src/registry/blocks/not-found/NotFound03.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		onHome?: () => void;
+	}
+
+	const { class: className, onHome }: Props = $props();
+</script>
+
+<section
+	class={cn(
+		'w-full bg-foreground text-background min-h-[60vh] flex flex-col items-center justify-center px-4 text-center',
+		className
+	)}
+>
+	<p class="text-9xl font-black opacity-10">404</p>
+	<h1 class="mt-4 text-3xl font-bold">Page not found</h1>
+	<p class="mt-2 opacity-60 max-w-sm">
+		The page you're looking for doesn't exist or has been moved to another location.
+	</p>
+	<Button onclick={onHome} variant="secondary" class="mt-8">Go back home</Button>
+</section>

package/src/registry/blocks/not-found/index.ts

@@ -0,0 +1,3 @@
+export { default as NotFound01 } from './NotFound01.svelte';
+export { default as NotFound02 } from './NotFound02.svelte';
+export { default as NotFound03 } from './NotFound03.svelte';