2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T7ce8,"use client"; import { Command as CommandPrimitive } from "cmdk"; import { AnimatePresence, LayoutGroup, MotionConfig, motion } from "motion/react"; import { Bell, Check, ChevronsUpDown, CornerDownLeft, Megaphone, Search } from "lucide-react"; import { Dialog as DialogPrimitive, DropdownMenu as DropdownPrimitive, Popover as PopoverPrimitive } from "radix-ui"; import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode, type RefObject, } from "react"; import { cn } from "@/lib/utils"; const SPRINGS = { smooth: { type: "spring", bounce: 0, duration: 0.4 }, bouncy: { type: "spring", bounce: 0.3, duration: 0.55 }, } as const; const GLIDE = { type: "spring", bounce: 0.15, duration: 0.3 } as const; type Spring = keyof typeof SPRINGS; type Variant = "bar" | "floating" | "glass"; type NavState = { spring: Spring; variant: Variant; compact: boolean; menuOpen: boolean; setMenuOpen: (open: boolean) => void }; const NavContext = createContext({ spring: "smooth", variant: "bar", compact: false, menuOpen: false, setMenuOpen: () => {} }); export const useNavbar = () => useContext(NavContext); /** True once the element (or the window) has scrolled past the threshold. */ export function useScrolled(target?: RefObject, threshold = 8) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const el = target?.current ?? window; const read = () => setScrolled((target?.current ? target.current.scrollTop : window.scrollY) > threshold); read(); el.addEventListener("scroll", read, { passive: true }); return () => el.removeEventListener("scroll", read); }, [target, threshold]); return scrolled; } const FRAME: Record = { bar: "h-14 w-full border-b border-black/[0.06] bg-white px-3 dark:border-white/[0.07] dark:bg-neutral-950", glass: "h-14 w-full border-b border-black/[0.05] px-3 dark:border-white/[0.07]", floating: "mx-auto h-12 rounded-full pl-2 pr-1.5", }; export interface NavbarProps extends Omit, "children"> { children?: ReactNode; /** bar: full width with a hairline · glass: translucent over content · floating: a centred raised pill. */ variant?: Variant; /** smooth: no overshoot · bouncy: highlights, menus and the floating pill spring a little. */ spring?: Spring; /** A tighter bar, e.g. once the page has scrolled (see useScrolled). */ compact?: boolean; } /** Themed by the same CSS variables as Sidebar: --ui-accent, --ui-active-bg, --ui-active-fg, --ui-icon-stroke, --ui-radius, --ui-pill. */ export function Navbar({ variant = "bar", spring = "smooth", compact = false, className, children, ...props }: NavbarProps) { const [menuOpen, setMenuOpen] = useState(false); const layered = variant !== "bar"; return ( {layered && ( )} {children} ); } export interface NavbarBrandProps extends ComponentProps<"a"> { logo: ReactNode; } /** Logo and name; the name folds away while the bar is compact. */ export function NavbarBrand({ logo, className, children, ...props }: NavbarBrandProps) { const { compact, spring } = useNavbar(); return ( {logo} {!compact && children && ( {children} )} ); } type LinksState = { uid: string; hovered: string | null; setHovered: (id: string | null) => void; indicator: "pill" | "underline" }; const LinksContext = createContext(null); export interface NavbarLinksProps extends ComponentProps<"nav"> { /** pill: the active link sits in a soft pill · underline: a line under it, for tab rows. */ indicator?: "pill" | "underline"; } /** A row of links: a highlight glides to whichever one you point at. */ export function NavbarLinks({ indicator = "pill", className, children, ...props }: NavbarLinksProps) { const uid = useId(); const [hovered, setHovered] = useState(null); return ( ); } export interface NavbarLinkProps extends ComponentProps<"a"> { active?: boolean; icon?: ReactNode; badge?: ReactNode; } export function NavbarLink({ active, icon, badge, className, children, onPointerEnter, onClick, ...props }: NavbarLinkProps) { const links = useContext(LinksContext); const { spring, setMenuOpen } = useNavbar(); const id = useId(); if (!links) throw new Error("NavbarLink must be used inside ."); const underline = links.indicator === "underline"; return ( { if (props.href === undefined && (e.key === "Enter" || e.key === " ")) { e.preventDefault(); e.currentTarget.click(); } }} aria-current={active ? "page" : undefined} data-active={active || undefined} onPointerEnter={(e) => { links.setHovered(id); onPointerEnter?.(e); }} onClick={(e) => { onClick?.(e); setMenuOpen(false); }} className={cn( "relative flex shrink-0 cursor-pointer select-none items-center gap-1.5 whitespace-nowrap px-3 text-[13.5px] outline-none transition-colors duration-150 [&_svg]:size-4 [&_svg]:[stroke-width:var(--ui-icon-stroke,2)]", underline ? "h-full" : "h-8 rounded-[var(--ui-pill,999px)]", active ? underline ? "font-medium text-[var(--ui-accent,#0a0a0a)] dark:text-[var(--ui-accent,#fff)]" : "font-medium text-[var(--ui-active-fg,var(--ui-accent,#0a0a0a))] dark:text-[var(--ui-active-fg,var(--ui-accent,#fff))]" : "text-neutral-500 hover:text-neutral-950 dark:text-neutral-400 dark:hover:text-white", "focus-visible:text-neutral-950 dark:focus-visible:text-white", className, )} {...props} > {links.hovered === id && ( )} {active && (underline ? ( ) : ( ))} {icon && {icon}} {children} {badge !== undefined && {badge}} ); } /** A second row of tabs under the bar, with a line that slides to the active one. */ export function NavbarTabs({ className, ...props }: ComponentProps<"nav">) { return (

); } export function NavbarActions({ className, ...props }: ComponentProps<"div">) { return

; } export function NavbarIconButton({ className, ...props }: ComponentProps<"button">) { return ( )} {open && ( Search

Esc

No results. {groups.map((g) => ( {g.items.map((item) => ( { setOpen(false); item.onSelect?.(); }} className="group flex h-9 cursor-default select-none items-center gap-2.5 rounded-[10px] px-2.5 text-[13.5px] text-neutral-700 outline-none data-[selected=true]:bg-neutral-950/[0.05] data-[selected=true]:text-neutral-950 dark:text-neutral-300 dark:data-[selected=true]:bg-white/[0.08] dark:data-[selected=true]:text-white [&_svg]:size-4 [&_svg]:text-neutral-400" > {item.icon} {item.label} {item.shortcut ? ( {item.shortcut} ) : ( )} ))} ))} )} ); } export type Notification = { id: string; title: string; description?: string; time: string; unread?: boolean; icon?: ReactNode; announcement?: boolean }; export interface NavbarNotificationsProps { items: Notification[]; onItemsChange?: (items: Notification[]) => void; } /** A bell with an unread count that opens an inbox with All and Unread tabs. */ export function NavbarNotifications({ items, onItemsChange }: NavbarNotificationsProps) { const [open, setOpen] = useState(false); const [tab, setTab] = useState<"all" | "unread">("all"); const { spring } = useNavbar(); const unread = items.filter((i) => i.unread).length; const shown = tab === "all" ? items : items.filter((i) => i.unread); const tabs = useRef>({}); const [bar, setBar] = useState({ left: 0, width: 0 }); useLayoutEffect(() => { if (!open) return; const measure = () => { const el = tabs.current[tab]; if (el) setBar({ left: el.offsetLeft, width: el.offsetWidth }); }; measure(); const frame = requestAnimationFrame(measure); return () => cancelAnimationFrame(frame); }, [tab, open, unread]); const read = (id?: string) => onItemsChange?.(items.map((i) => (!id || i.id === id ? { ...i, unread: false } : i))); return ( {unread > 0 && ( {unread} )} {open && (

Notifications

{(["all", "unread"] as const).map((t) => ( ))}

{shown.map((n) => ( ))}

You’re all caught up.

)} ); } /** A menu button whose two lines turn into a cross. */ export function NavbarMenuToggle({ className, ...props }: ComponentProps<"button">) { const { menuOpen, setMenuOpen, spring } = useNavbar(); const t = SPRINGS[spring]; return ( setMenuOpen(!menuOpen)} className={className} {...props}> ); } /** The panel NavbarMenuToggle opens under the bar; its children slide in one after another. */ export function NavbarMenu({ className, children }: { className?: string; children: ReactNode }) { const { menuOpen, spring, variant } = useNavbar(); const items = Array.isArray(children) ? children : [children]; return ( {menuOpen && ( {items.map((child, i) => ( {child} ))} )} ); } export default Navbar; 2e:T43f67,

"use client";

import { Command as CommandPrimitive } from "cmdk";
import { AnimatePresence, LayoutGroup, MotionConfig, motion } from "motion/react";
import { Bell, Check, ChevronsUpDown, CornerDownLeft, Megaphone, Search } from "lucide-react";
import { Dialog as DialogPrimitive, DropdownMenu as DropdownPrimitive, Popover as PopoverPrimitive } from "radix-ui";
import {
  createContext,
  useContext,
  useEffect,
  useId,
  useLayoutEffect,
  useRef,
  useState,
  type ComponentProps,
  type ReactNode,
  type RefObject,
} from "react";
import { cn } from "@/lib/utils";

const SPRINGS = {
  smooth: { type: "spring", bounce: 0, duration: 0.4 },
  bouncy: { type: "spring", bounce: 0.3, duration: 0.55 },
} as const;
const GLIDE = { type: "spring", bounce: 0.15, duration: 0.3 } as const;

type Spring = keyof typeof SPRINGS;
type Variant = "bar" | "floating" | "glass";
type NavState = { spring: Spring; variant: Variant; compact: boolean; menuOpen: boolean; setMenuOpen: (open: boolean) => void };

const NavContext = createContext<NavState>({ spring: "smooth", variant: "bar", compact: false, menuOpen: false, setMenuOpen: () => {} });

export const useNavbar = () => useContext(NavContext);

/** True once the element (or the window) has scrolled past the threshold. */
export function useScrolled(target?: RefObject<HTMLElement | null>, threshold = 8) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const el = target?.current ?? window;
    const read = () => setScrolled((target?.current ? target.current.scrollTop : window.scrollY) > threshold);
    read();
    el.addEventListener("scroll", read, { passive: true });
    return () => el.removeEventListener("scroll", read);
  }, [target, threshold]);
  return scrolled;
}

const FRAME: Record<Variant, string> = {
  bar: "h-14 w-full border-b border-black/[0.06] bg-white px-3 dark:border-white/[0.07] dark:bg-neutral-950",
  glass: "h-14 w-full border-b border-black/[0.05] px-3 dark:border-white/[0.07]",
  floating: "mx-auto h-12 rounded-full pl-2 pr-1.5",
};

export interface NavbarProps extends Omit<ComponentProps<typeof motion.header>, "children"> {
  children?: ReactNode;
  /** bar: full width with a hairline · glass: translucent over content · floating: a centred raised pill. */
  variant?: Variant;
  /** smooth: no overshoot · bouncy: highlights, menus and the floating pill spring a little. */
  spring?: Spring;
  /** A tighter bar, e.g. once the page has scrolled (see useScrolled). */
  compact?: boolean;
}

/** Themed by the same CSS variables as Sidebar: --ui-accent, --ui-active-bg, --ui-active-fg, --ui-icon-stroke, --ui-radius, --ui-pill. */
export function Navbar({ variant = "bar", spring = "smooth", compact = false, className, children, ...props }: NavbarProps) {
  const [menuOpen, setMenuOpen] = useState(false);
  const layered = variant !== "bar";
  return (
    <NavContext.Provider value={{ spring, variant, compact, menuOpen, setMenuOpen }}>
      <MotionConfig reducedMotion="user">
        <motion.header
          layout={variant === "floating"}
          transition={SPRINGS[spring]}
          data-variant={variant}
          data-compact={compact || undefined}
          className={cn("relative z-30 flex shrink-0 items-center gap-2 text-neutral-950 dark:text-white", FRAME[variant], className)}
          style={variant === "floating" ? { borderRadius: 999 } : undefined}
          {...props}
        >
          {layered && (
            <motion.span
              aria-hidden
              layout={variant === "floating"}
              transition={SPRINGS[spring]}
              style={variant === "floating" ? { borderRadius: 999 } : undefined}
              className={cn(
                "pointer-events-none absolute inset-0 -z-10 backdrop-blur-xl backdrop-saturate-150",
                variant === "floating"
                  ? "bg-white/85 shadow-[0_1px_2px_rgb(0_0_0/0.05),0_10px_30px_-12px_rgb(0_0_0/0.2)] ring-1 ring-black/[0.07] dark:bg-neutral-900/85 dark:ring-white/[0.1]"
                  : "bg-white/70 dark:bg-neutral-950/70",
              )}
            />
          )}
          {children}
        </motion.header>
      </MotionConfig>
    </NavContext.Provider>
  );
}

export interface NavbarBrandProps extends ComponentProps<"a"> {
  logo: ReactNode;
}

/** Logo and name; the name folds away while the bar is compact. */
export function NavbarBrand({ logo, className, children, ...props }: NavbarBrandProps) {
  const { compact, spring } = useNavbar();
  return (
    <a className={cn("flex shrink-0 items-center gap-2 rounded-[10px] px-1 text-[14.5px] font-semibold tracking-[-0.01em] outline-none focus-visible:bg-neutral-950/[0.05]", className)} {...props}>
      {logo}
      <AnimatePresence initial={false}>
        {!compact && children && (
          <motion.span
            initial={{ opacity: 0, width: 0 }}
            animate={{ opacity: 1, width: "auto" }}
            exit={{ opacity: 0, width: 0 }}
            transition={SPRINGS[spring]}
            className="overflow-hidden whitespace-nowrap"
          >
            {children}
          </motion.span>
        )}
      </AnimatePresence>
    </a>
  );
}

type LinksState = { uid: string; hovered: string | null; setHovered: (id: string | null) => void; indicator: "pill" | "underline" };
const LinksContext = createContext<LinksState | null>(null);

export interface NavbarLinksProps extends ComponentProps<"nav"> {
  /** pill: the active link sits in a soft pill · underline: a line under it, for tab rows. */
  indicator?: "pill" | "underline";
}

/** A row of links: a highlight glides to whichever one you point at. */
export function NavbarLinks({ indicator = "pill", className, children, ...props }: NavbarLinksProps) {
  const uid = useId();
  const [hovered, setHovered] = useState<string | null>(null);
  return (
    <LinksContext.Provider value={{ uid, hovered, setHovered, indicator }}>
      <LayoutGroup id={uid}>
        <nav onPointerLeave={() => setHovered(null)} className={cn("flex items-center", indicator === "underline" ? "h-full gap-0.5" : "gap-0.5", className)} {...props}>
          {children}
        </nav>
      </LayoutGroup>
    </LinksContext.Provider>
  );
}

export interface NavbarLinkProps extends ComponentProps<"a"> {
  active?: boolean;
  icon?: ReactNode;
  badge?: ReactNode;
}

export function NavbarLink({ active, icon, badge, className, children, onPointerEnter, onClick, ...props }: NavbarLinkProps) {
  const links = useContext(LinksContext);
  const { spring, setMenuOpen } = useNavbar();
  const id = useId();
  if (!links) throw new Error("NavbarLink must be used inside <NavbarLinks>.");
  const underline = links.indicator === "underline";
  return (
    <a
      role={props.href === undefined ? "button" : undefined}
      tabIndex={props.href === undefined ? 0 : undefined}
      onKeyDown={(e) => {
        if (props.href === undefined && (e.key === "Enter" || e.key === " ")) {
          e.preventDefault();
          e.currentTarget.click();
        }
      }}
      aria-current={active ? "page" : undefined}
      data-active={active || undefined}
      onPointerEnter={(e) => {
        links.setHovered(id);
        onPointerEnter?.(e);
      }}
      onClick={(e) => {
        onClick?.(e);
        setMenuOpen(false);
      }}
      className={cn(
        "relative flex shrink-0 cursor-pointer select-none items-center gap-1.5 whitespace-nowrap px-3 text-[13.5px] outline-none transition-colors duration-150 [&_svg]:size-4 [&_svg]:[stroke-width:var(--ui-icon-stroke,2)]",
        underline ? "h-full" : "h-8 rounded-[var(--ui-pill,999px)]",
        active
          ? underline
            ? "font-medium text-[var(--ui-accent,#0a0a0a)] dark:text-[var(--ui-accent,#fff)]"
            : "font-medium text-[var(--ui-active-fg,var(--ui-accent,#0a0a0a))] dark:text-[var(--ui-active-fg,var(--ui-accent,#fff))]"
          : "text-neutral-500 hover:text-neutral-950 dark:text-neutral-400 dark:hover:text-white",
        "focus-visible:text-neutral-950 dark:focus-visible:text-white",
        className,
      )}
      {...props}
    >
      <AnimatePresence>
        {links.hovered === id && (
          <motion.span
            layoutId={`${links.uid}-hover`}
            className={cn("absolute bg-neutral-950/[0.045] dark:bg-white/[0.07]", underline ? "inset-x-0 inset-y-2 rounded-[8px]" : "inset-0 rounded-[var(--ui-pill,999px)]")}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0, transition: { duration: 0.15 } }}
            transition={GLIDE}
          />
        )}
      </AnimatePresence>
      {active &&
        (underline ? (
          <motion.span layoutId={`${links.uid}-active`} className="absolute inset-x-2 -bottom-px h-[2px] rounded-full bg-[var(--ui-accent,#0a0a0a)] dark:bg-[var(--ui-accent,#fff)]" transition={SPRINGS[spring]} />
        ) : (
          <motion.span layoutId={`${links.uid}-active`} className="absolute inset-0 rounded-[var(--ui-pill,999px)] bg-[var(--ui-active-bg,color-mix(in_oklab,var(--ui-accent,#0a0a0a)_7%,transparent))] dark:bg-[var(--ui-active-bg,color-mix(in_oklab,var(--ui-accent,#fff)_10%,transparent))]" transition={SPRINGS[spring]} />
        ))}
      {icon && <span className="relative flex">{icon}</span>}
      <span className="relative">{children}</span>
      {badge !== undefined && <span className="relative rounded-full bg-neutral-950/[0.06] px-1.5 text-[11px] tabular-nums text-neutral-600 dark:bg-white/[0.1] dark:text-neutral-300">{badge}</span>}
    </a>
  );
}

/** A second row of tabs under the bar, with a line that slides to the active one. */
export function NavbarTabs({ className, ...props }: ComponentProps<"nav">) {
  return (
    <div className={cn("flex h-11 shrink-0 items-stretch overflow-x-auto border-b border-black/[0.06] px-2 [scrollbar-width:none] dark:border-white/[0.07]", className)}>
      <NavbarLinks indicator="underline" {...props} />
    </div>
  );
}

export function NavbarActions({ className, ...props }: ComponentProps<"div">) {
  return <div className={cn("ml-auto flex shrink-0 items-center gap-1", className)} {...props} />;
}

export function NavbarIconButton({ className, ...props }: ComponentProps<"button">) {
  return (
    <button
      type="button"
      className={cn(
        "relative flex size-8 shrink-0 items-center justify-center rounded-[var(--ui-pill,999px)] text-neutral-500 outline-none transition-[color,background-color,transform] hover:bg-neutral-950/[0.05] hover:text-neutral-950 focus-visible:bg-neutral-950/[0.06] active:scale-95 dark:text-neutral-400 dark:hover:bg-white/[0.08] dark:hover:text-white [&_svg]:size-4 [&_svg]:[stroke-width:var(--ui-icon-stroke,2)]",
        className,
      )}
      {...props}
    />
  );
}

export function NavbarBreadcrumb({ className, children, ...props }: ComponentProps<"nav">) {
  const items = (Array.isArray(children) ? children : [children]).filter(Boolean);
  return (
    <nav aria-label="Breadcrumb" className={cn("flex min-w-0 items-center", className)} {...props}>
      {items.map((child, i) => (
        <span key={i} className="flex min-w-0 items-center">
          {i > 0 && (
            <svg viewBox="0 0 16 16" className="mx-0.5 size-4 shrink-0 text-neutral-300 dark:text-neutral-600" aria-hidden>
              <path d="M10.5 3 5.5 13" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
            </svg>
          )}
          {child}
        </span>
      ))}
    </nav>
  );
}

export type SwitcherItem = { value: string; label: string; icon?: ReactNode; description?: string };

export interface NavbarSwitcherProps {
  items: SwitcherItem[];
  value: string;
  onValueChange: (value: string) => void;
  /** Heading inside the menu, e.g. Teams or Projects. */
  label?: string;
  /** A last row such as "New project". */
  footer?: ReactNode;
}

/** One step of a breadcrumb that opens a menu to switch team, project or branch. */
export function NavbarSwitcher({ items, value, onValueChange, label, footer }: NavbarSwitcherProps) {
  const [open, setOpen] = useState(false);
  const { spring } = useNavbar();
  const current = items.find((i) => i.value === value) ?? items[0];
  return (
    <DropdownPrimitive.Root open={open} onOpenChange={setOpen}>
      <DropdownPrimitive.Trigger className="group flex h-8 min-w-0 items-center gap-1.5 rounded-[var(--ui-radius,9px)] px-1.5 text-[13.5px] font-medium outline-none transition-colors hover:bg-neutral-950/[0.045] focus-visible:bg-neutral-950/[0.06] data-[state=open]:bg-neutral-950/[0.06] dark:hover:bg-white/[0.07] dark:data-[state=open]:bg-white/[0.08]">
        {current?.icon}
        <AnimatePresence mode="popLayout" initial={false}>
          <motion.span key={current?.value} className="truncate" initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -6 }} transition={SPRINGS[spring]}>
            {current?.label}
          </motion.span>
        </AnimatePresence>
        <ChevronsUpDown className="size-3.5 shrink-0 text-neutral-400 transition-colors group-hover:text-neutral-600" />
      </DropdownPrimitive.Trigger>
      <AnimatePresence>
        {open && (
          <DropdownPrimitive.Portal forceMount>
            <DropdownPrimitive.Content forceMount asChild align="start" sideOffset={6} collisionPadding={8}>
              <motion.div
                initial={{ opacity: 0, scale: 0.96, y: -4 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.98, transition: { duration: 0.1 } }}
                transition={{ type: "spring", bounce: spring === "bouncy" ? 0.3 : 0.15, duration: 0.3 }}
                className={cn(MENU, "w-[240px]")}
              >
                {label && <DropdownPrimitive.Label className="px-2 pb-1 pt-1.5 text-[11.5px] font-medium text-neutral-400">{label}</DropdownPrimitive.Label>}
                {items.map((item) => (
                  <DropdownPrimitive.Item key={item.value} onSelect={() => onValueChange(item.value)} className={cn(ITEM, item.description && "h-11")}>
                    {item.icon}
                    <span className="flex min-w-0 flex-1 flex-col leading-tight">
                      <span className="truncate">{item.label}</span>
                      {item.description && <span className="truncate text-[11.5px] text-neutral-500">{item.description}</span>}
                    </span>
                    {item.value === value && <Check className="size-4 text-neutral-900 dark:text-white" />}
                  </DropdownPrimitive.Item>
                ))}
                {footer && (
                  <>
                    <DropdownPrimitive.Separator className="-mx-1.5 my-1.5 h-px bg-black/[0.06] dark:bg-white/[0.08]" />
                    <DropdownPrimitive.Item className={ITEM}>{footer}</DropdownPrimitive.Item>
                  </>
                )}
              </motion.div>
            </DropdownPrimitive.Content>
          </DropdownPrimitive.Portal>
        )}
      </AnimatePresence>
    </DropdownPrimitive.Root>
  );
}

const MENU =
  "z-50 origin-(--radix-dropdown-menu-content-transform-origin) rounded-[14px] bg-white p-1.5 text-neutral-950 outline-none shadow-[0_12px_32px_-8px_rgb(0_0_0/0.18),0_2px_6px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:text-white dark:ring-white/[0.1]";
const ITEM =
  "flex h-8 cursor-default select-none items-center gap-2.5 rounded-[var(--ui-radius,9px)] px-2 text-[13px] text-neutral-700 outline-none transition-colors duration-75 data-highlighted:bg-neutral-950/[0.05] data-highlighted:text-neutral-950 dark:text-neutral-300 dark:data-highlighted:bg-white/[0.08] dark:data-highlighted:text-white [&_svg]:shrink-0";

export type SearchGroup = { heading: string; items: { label: string; icon?: ReactNode; shortcut?: string; onSelect?: () => void }[] };

export interface NavbarSearchProps {
  groups: SearchGroup[];
  placeholder?: string;
  /** ⌘/Ctrl + this key opens the palette; false turns it off. */
  shortcut?: string | false;
  /** Show only a search icon, e.g. on phones. */
  iconOnly?: boolean;
  className?: string;
}

/** A search field that opens a command palette. */
export function NavbarSearch({ groups, placeholder = "Search…", shortcut = "k", iconOnly, className }: NavbarSearchProps) {
  const [open, setOpen] = useState(false);
  const { spring } = useNavbar();
  useEffect(() => {
    if (!shortcut) return;
    const key = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcut) {
        e.preventDefault();
        setOpen((o) => !o);
      }
    };
    window.addEventListener("keydown", key);
    return () => window.removeEventListener("keydown", key);
  }, [shortcut]);
  return (
    <DialogPrimitive.Root open={open} onOpenChange={setOpen}>
      <DialogPrimitive.Trigger asChild>
        {iconOnly ? (
          <NavbarIconButton aria-label="Search">
            <Search />
          </NavbarIconButton>
        ) : (
          <button
            type="button"
            className={cn(
              "flex h-8 w-[240px] min-w-0 items-center gap-2 rounded-[var(--ui-pill,999px)] bg-neutral-950/[0.04] pl-3 pr-1.5 text-[13px] text-neutral-500 outline-none ring-1 ring-black/[0.04] transition-colors hover:bg-neutral-950/[0.06] hover:text-neutral-700 focus-visible:ring-neutral-950/20 dark:bg-white/[0.06] dark:text-neutral-400 dark:ring-white/[0.06] dark:hover:bg-white/[0.09]",
              className,
            )}
          >
            <Search className="size-3.5 shrink-0 [stroke-width:var(--ui-icon-stroke,2)]" />
            <span className="flex-1 truncate text-left">{placeholder}</span>
            {shortcut && <kbd className="rounded-full bg-white px-1.5 py-px font-sans text-[11px] text-neutral-500 shadow-[0_1px_1px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.06] dark:bg-white/[0.1] dark:ring-0">⌘{shortcut.toUpperCase()}</kbd>}
          </button>
        )}
      </DialogPrimitive.Trigger>
      <AnimatePresence>
        {open && (
          <DialogPrimitive.Portal forceMount>
            <DialogPrimitive.Overlay forceMount asChild>
              <motion.div className="fixed inset-0 z-50 bg-neutral-950/20 backdrop-blur-[2px] dark:bg-black/50" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.18 }} />
            </DialogPrimitive.Overlay>
            <DialogPrimitive.Content forceMount asChild aria-describedby={undefined}>
              <motion.div
                className="fixed left-1/2 top-[14%] z-50 w-[calc(100%-2rem)] max-w-[520px] -translate-x-1/2 outline-none"
                initial={{ opacity: 0, scale: 0.96, y: -8 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.98, transition: { duration: 0.12 } }}
                transition={{ type: "spring", bounce: spring === "bouncy" ? 0.3 : 0.12, duration: 0.35 }}
              >
                <DialogPrimitive.Title className="sr-only">Search</DialogPrimitive.Title>
                <CommandPrimitive className="overflow-hidden rounded-[20px] bg-white shadow-[0_24px_64px_-16px_rgb(0_0_0/0.35)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.1]">
                  <div className="flex items-center gap-2.5 border-b border-black/[0.06] px-4 dark:border-white/[0.08]">
                    <Search className="size-4 shrink-0 text-neutral-400" />
                    <CommandPrimitive.Input placeholder={placeholder} className="h-12 w-full bg-transparent text-[14px] outline-none placeholder:text-neutral-400" />
                    <kbd className="rounded-[6px] bg-neutral-950/[0.05] px-1.5 py-0.5 font-sans text-[11px] text-neutral-500 dark:bg-white/[0.08]">Esc</kbd>
                  </div>
                  <CommandPrimitive.List className="max-h-[320px] scroll-py-1.5 overflow-y-auto p-1.5">
                    <CommandPrimitive.Empty className="py-10 text-center text-[13px] text-neutral-500">No results.</CommandPrimitive.Empty>
                    {groups.map((g) => (
                      <CommandPrimitive.Group
                        key={g.heading}
                        heading={g.heading}
                        className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:text-[11.5px] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-400"
                      >
                        {g.items.map((item) => (
                          <CommandPrimitive.Item
                            key={item.label}
                            value={`${g.heading} ${item.label}`}
                            onSelect={() => {
                              setOpen(false);
                              item.onSelect?.();
                            }}
                            className="group flex h-9 cursor-default select-none items-center gap-2.5 rounded-[10px] px-2.5 text-[13.5px] text-neutral-700 outline-none data-[selected=true]:bg-neutral-950/[0.05] data-[selected=true]:text-neutral-950 dark:text-neutral-300 dark:data-[selected=true]:bg-white/[0.08] dark:data-[selected=true]:text-white [&_svg]:size-4 [&_svg]:text-neutral-400"
                          >
                            {item.icon}
                            <span className="flex-1 truncate">{item.label}</span>
                            {item.shortcut ? (
                              <span className="text-[11.5px] text-neutral-400">{item.shortcut}</span>
                            ) : (
                              <CornerDownLeft className="size-3.5! opacity-0 group-data-[selected=true]:opacity-100" />
                            )}
                          </CommandPrimitive.Item>
                        ))}
                      </CommandPrimitive.Group>
                    ))}
                  </CommandPrimitive.List>
                </CommandPrimitive>
              </motion.div>
            </DialogPrimitive.Content>
          </DialogPrimitive.Portal>
        )}
      </AnimatePresence>
    </DialogPrimitive.Root>
  );
}

export type Notification = { id: string; title: string; description?: string; time: string; unread?: boolean; icon?: ReactNode; announcement?: boolean };

export interface NavbarNotificationsProps {
  items: Notification[];
  onItemsChange?: (items: Notification[]) => void;
}

/** A bell with an unread count that opens an inbox with All and Unread tabs. */
export function NavbarNotifications({ items, onItemsChange }: NavbarNotificationsProps) {
  const [open, setOpen] = useState(false);
  const [tab, setTab] = useState<"all" | "unread">("all");
  const { spring } = useNavbar();
  const unread = items.filter((i) => i.unread).length;
  const shown = tab === "all" ? items : items.filter((i) => i.unread);
  const tabs = useRef<Record<string, HTMLButtonElement | null>>({});
  const [bar, setBar] = useState({ left: 0, width: 0 });
  useLayoutEffect(() => {
    if (!open) return;
    const measure = () => {
      const el = tabs.current[tab];
      if (el) setBar({ left: el.offsetLeft, width: el.offsetWidth });
    };
    measure();
    const frame = requestAnimationFrame(measure);
    return () => cancelAnimationFrame(frame);
  }, [tab, open, unread]);
  const read = (id?: string) => onItemsChange?.(items.map((i) => (!id || i.id === id ? { ...i, unread: false } : i)));
  return (
    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
      <PopoverPrimitive.Trigger asChild>
        <NavbarIconButton aria-label={unread ? `Notifications, ${unread} unread` : "Notifications"} className="data-[state=open]:bg-neutral-950/[0.06] dark:data-[state=open]:bg-white/[0.1]">
          <Bell />
          <AnimatePresence>
            {unread > 0 && (
              <motion.span
                key={unread}
                initial={{ scale: 0.4, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                exit={{ scale: 0.4, opacity: 0 }}
                transition={{ type: "spring", bounce: 0.5, duration: 0.4 }}
                className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--ui-accent,#0a0a0a)] px-1 text-[10px] font-semibold tabular-nums text-white ring-2 ring-white dark:bg-[var(--ui-accent,#fff)] dark:text-neutral-950 dark:ring-neutral-950"
              >
                {unread}
              </motion.span>
            )}
          </AnimatePresence>
        </NavbarIconButton>
      </PopoverPrimitive.Trigger>
      <AnimatePresence>
        {open && (
          <PopoverPrimitive.Portal forceMount>
            <PopoverPrimitive.Content forceMount asChild align="end" sideOffset={8} collisionPadding={8}>
              <motion.div
                initial={{ opacity: 0, scale: 0.96, y: -6 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.98, transition: { duration: 0.1 } }}
                transition={{ type: "spring", bounce: spring === "bouncy" ? 0.3 : 0.15, duration: 0.32 }}
                className="z-50 w-[340px] origin-(--radix-popover-content-transform-origin) overflow-hidden rounded-[18px] bg-white text-neutral-950 shadow-[0_16px_40px_-12px_rgb(0_0_0/0.25),0_2px_6px_rgb(0_0_0/0.05)] outline-none ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:text-white dark:ring-white/[0.1]"
              >
                <div className="flex items-center justify-between px-4 pb-1 pt-3.5">
                  <p className="text-[14px] font-semibold">Notifications</p>
                  <button onClick={() => read()} disabled={!unread} className="rounded-[7px] px-1.5 py-0.5 text-[12px] font-medium text-neutral-500 outline-none hover:text-neutral-900 focus-visible:bg-neutral-950/[0.05] disabled:opacity-40 dark:hover:text-white">
                    Mark all as read
                  </button>
                </div>
                <div role="tablist" className="relative flex gap-1 border-b border-black/[0.06] px-3 dark:border-white/[0.08]">
                  {(["all", "unread"] as const).map((t) => (
                    <button
                      key={t}
                      ref={(el) => {
                        tabs.current[t] = el;
                      }}
                      role="tab"
                      aria-selected={tab === t}
                      onClick={() => setTab(t)}
                      className={cn("relative h-9 px-1.5 text-[12.5px] font-medium capitalize outline-none transition-colors", tab === t ? "text-neutral-950 dark:text-white" : "text-neutral-500 hover:text-neutral-800")}
                    >
                      {t}
                      {t === "unread" && unread > 0 && <span className="ml-1 rounded-full bg-neutral-950/[0.06] px-1.5 text-[11px] tabular-nums dark:bg-white/[0.1]">{unread}</span>}
                    </button>
                  ))}
                  <motion.span className="absolute -bottom-px h-[2px] rounded-full bg-[var(--ui-accent,#0a0a0a)] dark:bg-[var(--ui-accent,#fff)]" initial={false} animate={bar} transition={SPRINGS[spring]} />
                </div>
                <ul className="max-h-[300px] overflow-y-auto p-1.5">
                  <AnimatePresence initial={false} mode="popLayout">
                    {shown.map((n) => (
                      <motion.li key={n.id} layout initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0, transition: { duration: 0.12 } }} transition={GLIDE}>
                        <button
                          onClick={() => read(n.id)}
                          className={cn(
                            "flex w-full gap-3 rounded-[12px] p-2.5 text-left outline-none transition-colors hover:bg-neutral-950/[0.035] focus-visible:bg-neutral-950/[0.05] dark:hover:bg-white/[0.05]",
                            n.announcement && "bg-neutral-50 ring-1 ring-black/[0.04] dark:bg-white/[0.04] dark:ring-white/[0.06]",
                          )}
                        >
                          <span className="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-white shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.07] dark:bg-neutral-800 dark:ring-white/[0.1] [&_svg]:size-4 [&_svg]:text-neutral-600 dark:[&_svg]:text-neutral-300">
                            {n.icon ?? (n.announcement ? <Megaphone /> : <Bell />)}
                          </span>
                          <span className="min-w-0 flex-1">
                            <span className="flex items-center gap-2">
                              <span className={cn("flex-1 truncate text-[13px]", n.unread ? "font-medium text-neutral-950 dark:text-white" : "text-neutral-700 dark:text-neutral-300")}>{n.title}</span>
                              <span className="shrink-0 text-[11.5px] text-neutral-400">{n.time}</span>
                            </span>
                            {n.description && <span className="mt-0.5 line-clamp-2 block text-[12.5px] leading-snug text-neutral-500">{n.description}</span>}
                          </span>
                          <span className={cn("mt-1.5 size-1.5 shrink-0 rounded-full transition-colors", n.unread ? "bg-[var(--ui-accent,#0a0a0a)] dark:bg-[var(--ui-accent,#fff)]" : "bg-transparent")} />
                        </button>
                      </motion.li>
                    ))}
                  </AnimatePresence>
                  {shown.length === 0 && <li className="py-10 text-center text-[13px] text-neutral-500">You’re all caught up.</li>}
                </ul>
              </motion.div>
            </PopoverPrimitive.Content>
          </PopoverPrimitive.Portal>
        )}
      </AnimatePresence>
    </PopoverPrimitive.Root>
  );
}

/** A menu button whose two lines turn into a cross. */
export function NavbarMenuToggle({ className, ...props }: ComponentProps<"button">) {
  const { menuOpen, setMenuOpen, spring } = useNavbar();
  const t = SPRINGS[spring];
  return (
    <NavbarIconButton aria-label={menuOpen ? "Close menu" : "Open menu"} aria-expanded={menuOpen} onClick={() => setMenuOpen(!menuOpen)} className={className} {...props}>
      <span className="relative block h-3 w-4">
        <motion.span className="absolute left-0 top-[3px] h-[1.5px] w-4 rounded-full bg-current" animate={menuOpen ? { y: 2.25, rotate: 45 } : { y: 0, rotate: 0 }} transition={t} />
        <motion.span className="absolute left-0 top-[7.5px] h-[1.5px] w-4 rounded-full bg-current" animate={menuOpen ? { y: -2.25, rotate: -45 } : { y: 0, rotate: 0 }} transition={t} />
      </span>
    </NavbarIconButton>
  );
}

/** The panel NavbarMenuToggle opens under the bar; its children slide in one after another. */
export function NavbarMenu({ className, children }: { className?: string; children: ReactNode }) {
  const { menuOpen, spring, variant } = useNavbar();
  const items = Array.isArray(children) ? children : [children];
  return (
    <AnimatePresence>
      {menuOpen && (
        <motion.div
          initial={{ opacity: 0, y: -8, scale: 0.98 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: -6, scale: 0.98, transition: { duration: 0.15 } }}
          transition={SPRINGS[spring]}
          className={cn(
            "absolute top-full z-40 origin-top bg-white p-2 shadow-[0_16px_40px_-16px_rgb(0_0_0/0.25)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.1]",
            variant === "floating" ? "inset-x-0 mt-2 rounded-[22px]" : "inset-x-2 mt-1.5 rounded-[18px]",
            className,
          )}
        >
          {items.map((child, i) => (
            <motion.div key={i} initial={{ opacity: 0, y: -6 }} animate={{ opacity: 1, y: 0 }} transition={{ ...SPRINGS[spring], delay: 0.03 * i }}>
              {child}
            </motion.div>
          ))}
        </motion.div>
      )}
    </AnimatePresence>
  );
}

export default Navbar;

2f:T14df,"use client"; import { BookOpen, CreditCard, FolderPlus, GitBranch, LayoutDashboard, LifeBuoy, Plus, Rocket, Settings, Users } from "lucide-react"; import { useState } from "react"; import { Navbar, NavbarActions, NavbarBreadcrumb, NavbarLink, NavbarNotifications, NavbarSearch, NavbarSwitcher, NavbarTabs, type Notification, } from "@/components/scalar-ui/navbar"; function OrbitMark({ className }: { className?: string }) { return ( ); } const tile = (bg: string, letter: string) => {letter}; const teams = [ { value: "acme", label: "Orbit Studio", icon: tile("bg-neutral-900", "O"), description: "Pro" }, { value: "north", label: "Northwind", icon: tile("bg-emerald-600", "N"), description: "Team" }, { value: "me", label: "Personal", icon: tile("bg-orange-500", "P"), description: "Hobby" }, ]; const projects = [ { value: "web", label: "marketing-site" }, { value: "app", label: "dashboard" }, { value: "api", label: "public-api" }, ]; const tabs = ["Overview", "Deployments", "Analytics", "Logs", "Storage", "Settings"]; const groups = [ { heading: "Projects", items: [ { label: "marketing-site", icon: }, { label: "dashboard", icon: }, { label: "New project", icon: , shortcut: "N" }, ], }, { heading: "Navigation", items: [ { label: "Deployments", icon: , shortcut: "G D" }, { label: "Team members", icon: }, { label: "Billing", icon: }, { label: "Settings", icon: , shortcut: "G S" }, ], }, { heading: "Help", items: [{ label: "Documentation", icon: }, { label: "Contact support", icon: }] }, ]; export default function Demo() { const [team, setTeam] = useState("acme"); const [project, setProject] = useState("web"); const [tab, setTab] = useState("Deployments"); const [inbox, setInbox] = useState([ { id: "1", title: "Agents v2 is here", description: "Run long tasks in the background and get a summary when they finish.", time: "Now", unread: true, announcement: true }, { id: "2", title: "Deploy failed on main", description: "Build step “typecheck” exited with code 2.", time: "4m", unread: true, icon: }, { id: "3", title: "Noor invited you to Northwind", time: "1h", unread: true, icon: }, { id: "4", title: "New branch: feat/onboarding", time: "3h", icon: }, ]); return (

Create team} /> Jon Park

{tabs.map((t) => ( setTab(t)}> {t} ))}

{tab}

{["Production · main · 2m ago", "Preview · feat/onboarding · 1h ago", "Preview · fix/auth · 3h ago"].map((row, i) => (

{row}

))}

); } 30:Tc417,

"use client";

import { BookOpen, CreditCard, FolderPlus, GitBranch, LayoutDashboard, LifeBuoy, Plus, Rocket, Settings, Users } from "lucide-react";
import { useState } from "react";
import {
  Navbar,
  NavbarActions,
  NavbarBreadcrumb,
  NavbarLink,
  NavbarNotifications,
  NavbarSearch,
  NavbarSwitcher,
  NavbarTabs,
  type Notification,
} from "@/components/scalar-ui/navbar";

function OrbitMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden>
      <circle cx="11" cy="13" r="6.5" stroke="currentColor" strokeWidth="2.4" />
      <circle cx="18.5" cy="5.5" r="2.5" fill="currentColor" />
    </svg>
  );
}

const tile = (bg: string, letter: string) => <span className={`flex size-5 items-center justify-center rounded-full text-[10px] font-semibold text-white ${bg}`}>{letter}</span>;

const teams = [
  { value: "acme", label: "Orbit Studio", icon: tile("bg-neutral-900", "O"), description: "Pro" },
  { value: "north", label: "Northwind", icon: tile("bg-emerald-600", "N"), description: "Team" },
  { value: "me", label: "Personal", icon: tile("bg-orange-500", "P"), description: "Hobby" },
];

const projects = [
  { value: "web", label: "marketing-site" },
  { value: "app", label: "dashboard" },
  { value: "api", label: "public-api" },
];

const tabs = ["Overview", "Deployments", "Analytics", "Logs", "Storage", "Settings"];

const groups = [
  {
    heading: "Projects",
    items: [
      { label: "marketing-site", icon: <LayoutDashboard /> },
      { label: "dashboard", icon: <LayoutDashboard /> },
      { label: "New project", icon: <FolderPlus />, shortcut: "N" },
    ],
  },
  {
    heading: "Navigation",
    items: [
      { label: "Deployments", icon: <Rocket />, shortcut: "G D" },
      { label: "Team members", icon: <Users /> },
      { label: "Billing", icon: <CreditCard /> },
      { label: "Settings", icon: <Settings />, shortcut: "G S" },
    ],
  },
  { heading: "Help", items: [{ label: "Documentation", icon: <BookOpen /> }, { label: "Contact support", icon: <LifeBuoy /> }] },
];

export default function Demo() {
  const [team, setTeam] = useState("acme");
  const [project, setProject] = useState("web");
  const [tab, setTab] = useState("Deployments");
  const [inbox, setInbox] = useState<Notification[]>([
    { id: "1", title: "Agents v2 is here", description: "Run long tasks in the background and get a summary when they finish.", time: "Now", unread: true, announcement: true },
    { id: "2", title: "Deploy failed on main", description: "Build step “typecheck” exited with code 2.", time: "4m", unread: true, icon: <Rocket /> },
    { id: "3", title: "Noor invited you to Northwind", time: "1h", unread: true, icon: <Users /> },
    { id: "4", title: "New branch: feat/onboarding", time: "3h", icon: <GitBranch /> },
  ]);
  return (
    <div className="@container h-[420px] w-full overflow-hidden rounded-[18px] bg-neutral-50 shadow-[0_1px_2px_rgb(0_0_0/0.04),0_16px_40px_-16px_rgb(0_0_0/0.16)] ring-1 ring-black/[0.08] dark:bg-neutral-950 dark:shadow-none dark:ring-white/[0.1]">
      <div className="bg-white dark:bg-neutral-950">
        <Navbar className="border-b-0">
          <span className="flex size-8 shrink-0 items-center justify-center rounded-[10px] bg-neutral-950 text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.2)] dark:bg-white dark:text-neutral-950">
            <OrbitMark className="size-[18px]" />
          </span>
          <NavbarBreadcrumb className="ml-1">
            <NavbarSwitcher label="Teams" items={teams} value={team} onValueChange={setTeam} footer={<><Plus className="size-4 text-neutral-400" />Create team</>} />
            <NavbarSwitcher label="Projects" items={projects} value={project} onValueChange={setProject} />
          </NavbarBreadcrumb>
          <NavbarActions>
            <NavbarSearch groups={groups} placeholder="Find…" className="hidden w-[180px] @[600px]:flex" />
            <NavbarNotifications items={inbox} onItemsChange={setInbox} />
            <img
              src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=96&h=96&fit=crop&crop=faces&auto=format&q=75"
              alt="Jon Park"
              className="ml-1 size-7 rounded-full object-cover ring-1 ring-black/[0.06]"
            />
          </NavbarActions>
        </Navbar>
        <NavbarTabs>
          {tabs.map((t) => (
            <NavbarLink key={t} active={tab === t} onClick={() => setTab(t)}>
              {t}
            </NavbarLink>
          ))}
        </NavbarTabs>
      </div>
      <div className="space-y-2 p-5">
        <p className="pb-1 text-[18px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">{tab}</p>
        {["Production · main · 2m ago", "Preview · feat/onboarding · 1h ago", "Preview · fix/auth · 3h ago"].map((row, i) => (
          <div key={row} className="flex items-center gap-3 rounded-[12px] bg-white px-3.5 py-2.5 ring-1 ring-black/[0.05] dark:bg-neutral-900 dark:ring-white/[0.07]">
            <span className={i === 0 ? "size-2 rounded-full bg-emerald-500" : "size-2 rounded-full bg-neutral-300 dark:bg-neutral-600"} />
            <span className="truncate text-[13px] text-neutral-700 dark:text-neutral-300">{row}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

31:T7dc,"use client"; import { useState } from "react"; import { Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks } from "@/components/scalar-ui/navbar"; function MeridianMark({ className }: { className?: string }) { return ( ); } const links = ["Product", "Customers", "Pricing", "Changelog", "Docs"]; export default function Example() { const [active, setActive] = useState("Product"); return (

}> Meridian {links.map((l) => ( setActive(l)}> {l} ))} Sign in Get started

); } 32:T4928,

"use client";

import { useState } from "react";
import { Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks } from "@/components/scalar-ui/navbar";

function MeridianMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden>
      <circle cx="12" cy="12" r="8.5" stroke="currentColor" strokeWidth="2.2" />
      <path d="M12 3.5c-2.8 2.4-4 5.2-4 8.5s1.2 6.1 4 8.5c2.8-2.4 4-5.2 4-8.5s-1.2-6.1-4-8.5Z" fill="currentColor" />
    </svg>
  );
}

const links = ["Product", "Customers", "Pricing", "Changelog", "Docs"];

export default function Example() {
  const [active, setActive] = useState("Product");
  return (
    <div className="w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <Navbar>
        <NavbarBrand href="#" logo={<span className="flex size-7 items-center justify-center rounded-full bg-neutral-950 text-white dark:bg-white dark:text-neutral-950"><MeridianMark className="size-4" /></span>}>
          Meridian
        </NavbarBrand>
        <NavbarLinks className="ml-4 hidden md:flex">
          {links.map((l) => (
            <NavbarLink key={l} active={active === l} onClick={() => setActive(l)}>
              {l}
            </NavbarLink>
          ))}
        </NavbarLinks>
        <NavbarActions className="gap-2">
          <a href="#" className="hidden h-8 items-center rounded-full px-3 text-[13.5px] font-medium text-neutral-600 hover:text-neutral-950 sm:flex dark:text-neutral-400 dark:hover:text-white">
            Sign in
          </a>
          <a href="#" className="flex h-8 items-center rounded-full bg-neutral-950 px-3.5 text-[13.5px] font-medium text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.15)] transition-transform active:scale-95 dark:bg-white dark:text-neutral-950">
            Get started
          </a>
        </NavbarActions>
      </Navbar>
      <div className="h-[140px] bg-neutral-50 dark:bg-neutral-900" />
    </div>
  );
}

33:T852,"use client"; import { Activity, BarChart3, Boxes, Cog, Database, KeyRound } from "lucide-react"; import { useState } from "react"; import { Navbar, NavbarActions, NavbarBrand, NavbarIconButton, NavbarLink, NavbarTabs } from "@/components/scalar-ui/navbar"; function HexMark({ className }: { className?: string }) { return ( ); } const tabs = [ { name: "Overview", icon: }, { name: "Tables", icon: }, { name: "Functions", icon: }, { name: "Usage", icon: }, { name: "API keys", icon: }, ]; export default function Example() { const [tab, setTab] = useState("Tables"); return (

}> Basin production {tabs.map((t) => ( setTab(t.name)}> {t.name} ))}

spring="bouncy": the underline overshoots a little as it lands.

); } 34:T4e8d,

"use client";

import { Activity, BarChart3, Boxes, Cog, Database, KeyRound } from "lucide-react";
import { useState } from "react";
import { Navbar, NavbarActions, NavbarBrand, NavbarIconButton, NavbarLink, NavbarTabs } from "@/components/scalar-ui/navbar";

function HexMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} aria-hidden>
      <path d="M12 2.5 20.5 7.4v9.2L12 21.5l-8.5-4.9V7.4z" fill="currentColor" opacity="0.35" />
      <path d="M12 7 16.3 9.5v5L12 17l-4.3-2.5v-5z" fill="currentColor" />
    </svg>
  );
}

const tabs = [
  { name: "Overview", icon: <Activity /> },
  { name: "Tables", icon: <Database /> },
  { name: "Functions", icon: <Boxes /> },
  { name: "Usage", icon: <BarChart3 /> },
  { name: "API keys", icon: <KeyRound /> },
];

export default function Example() {
  const [tab, setTab] = useState("Tables");
  return (
    <div className="w-full overflow-hidden rounded-[18px] bg-white ring-1 ring-black/[0.08] dark:bg-neutral-950 dark:ring-white/[0.1]">
      <Navbar spring="bouncy" className="border-b-0">
        <NavbarBrand href="#" logo={<span className="flex size-7 items-center justify-center rounded-[8px] bg-emerald-600 text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.25)]"><HexMark className="size-4" /></span>}>
          Basin
        </NavbarBrand>
        <span className="ml-1 rounded-full bg-neutral-950/[0.05] px-2 py-0.5 text-[11.5px] font-medium text-neutral-500 dark:bg-white/[0.08]">production</span>
        <NavbarActions>
          <NavbarIconButton aria-label="Settings">
            <Cog />
          </NavbarIconButton>
        </NavbarActions>
      </Navbar>
      <NavbarTabs>
        {tabs.map((t) => (
          <NavbarLink key={t.name} icon={t.icon} active={tab === t.name} onClick={() => setTab(t.name)}>
            {t.name}
          </NavbarLink>
        ))}
      </NavbarTabs>
      <div className="grid h-[150px] place-items-center bg-neutral-50 text-[12.5px] text-neutral-500 dark:bg-neutral-900">spring=&quot;bouncy&quot;: the underline overshoots a little as it lands.</div>
    </div>
  );
}

35:Taa4,"use client"; import { useRef, useState } from "react"; import { Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, useScrolled } from "@/components/scalar-ui/navbar"; function SwirlMark({ className }: { className?: string }) { return ( ); } const photo = (id: string) => `https://images.unsplash.com/${id}?w=640&h=360&fit=crop&auto=format&q=70`; const photos = ["photo-1501785888041-af3ef285b470", "photo-1470071459604-3b5ec3a7fe05", "photo-1469474968028-56623f02e42e", "photo-1441974231531-c6227db76b6e"]; export default function Example() { const page = useRef(null); const scrolled = useScrolled(page, 24); const [active, setActive] = useState("Stories"); return (

}> Driftwood {["Stories", "Maps", "Guides"].map((l) => ( setActive(l)}> {l} ))} Join

Field notes from the coast

Scroll: the pill tightens and springs back at the top.

{photos.map((id) => (

))}

); } 36:T6616,

"use client";

import { useRef, useState } from "react";
import { Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, useScrolled } from "@/components/scalar-ui/navbar";

function SwirlMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden>
      <path d="M12 4a8 8 0 1 1-8 8 5 5 0 0 1 5-5 3 3 0 0 1 3 3" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
    </svg>
  );
}

const photo = (id: string) => `https://images.unsplash.com/${id}?w=640&h=360&fit=crop&auto=format&q=70`;
const photos = ["photo-1501785888041-af3ef285b470", "photo-1470071459604-3b5ec3a7fe05", "photo-1469474968028-56623f02e42e", "photo-1441974231531-c6227db76b6e"];

export default function Example() {
  const page = useRef<HTMLDivElement>(null);
  const scrolled = useScrolled(page, 24);
  const [active, setActive] = useState("Stories");
  return (
    <div ref={page} className="relative h-[460px] w-full overflow-y-auto rounded-[18px] bg-neutral-50 ring-1 ring-black/[0.08] [scrollbar-width:none] dark:bg-neutral-950 dark:ring-white/[0.1]">
      <div className="sticky top-0 z-30 flex justify-center px-3 pt-3">
        <Navbar variant="floating" spring="bouncy" compact={scrolled} className={scrolled ? "w-[340px]" : "w-full max-w-[560px]"}>
          <NavbarBrand href="#" logo={<span className="flex size-8 items-center justify-center rounded-full bg-gradient-to-br from-amber-300 to-rose-500 text-white"><SwirlMark className="size-4" /></span>}>
            Driftwood
          </NavbarBrand>
          <NavbarLinks className="mx-auto">
            {["Stories", "Maps", "Guides"].map((l) => (
              <NavbarLink key={l} active={active === l} onClick={() => setActive(l)}>
                {l}
              </NavbarLink>
            ))}
          </NavbarLinks>
          <NavbarActions className="ml-0">
            <a href="#" className="flex h-9 items-center rounded-full bg-neutral-950 px-3.5 text-[13px] font-medium text-white dark:bg-white dark:text-neutral-950">
              Join
            </a>
          </NavbarActions>
        </Navbar>
      </div>
      <div className="px-5 pb-6 pt-8">
        <p className="text-center text-[24px] font-semibold tracking-[-0.03em] text-neutral-950 dark:text-white">Field notes from the coast</p>
        <p className="mt-1 text-center text-[13px] text-neutral-500">Scroll: the pill tightens and springs back at the top.</p>
        <div className="mt-6 grid grid-cols-2 gap-3">
          {photos.map((id) => (
            <img key={id} src={photo(id)} alt="" className="aspect-[4/3] w-full rounded-[16px] object-cover" />
          ))}
        </div>
      </div>
    </div>
  );
}

37:T8e5,"use client"; import { Calendar, FileText, Inbox, Plus, Settings, UserPlus, Users } from "lucide-react"; import { Navbar, NavbarActions, NavbarBrand, NavbarIconButton, NavbarSearch } from "@/components/scalar-ui/navbar"; function SlateMark({ className }: { className?: string }) { return ( ); } const groups = [ { heading: "Suggestions", items: [{ label: "Inbox", icon: , shortcut: "G I" }, { label: "Calendar", icon: , shortcut: "G C" }, { label: "Documents", icon: }] }, { heading: "Actions", items: [{ label: "New document", icon: , shortcut: "C" }, { label: "Invite teammate", icon: }, { label: "Settings", icon: , shortcut: "," }] }, { heading: "People", items: [{ label: "Maya Chen", icon: }, { label: "Daniel Ortiz", icon: }] }, ]; export default function Example() { return (

}> Slate

Click the field or press ⌘K.

); } 38:T584b,

"use client";

import { Calendar, FileText, Inbox, Plus, Settings, UserPlus, Users } from "lucide-react";
import { Navbar, NavbarActions, NavbarBrand, NavbarIconButton, NavbarSearch } from "@/components/scalar-ui/navbar";

function SlateMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} aria-hidden>
      <rect x="3" y="3" width="8" height="8" rx="2.5" fill="currentColor" />
      <rect x="13" y="13" width="8" height="8" rx="2.5" fill="currentColor" />
      <rect x="13" y="3" width="8" height="8" rx="2.5" fill="currentColor" opacity="0.4" />
      <rect x="3" y="13" width="8" height="8" rx="2.5" fill="currentColor" opacity="0.4" />
    </svg>
  );
}

const groups = [
  { heading: "Suggestions", items: [{ label: "Inbox", icon: <Inbox />, shortcut: "G I" }, { label: "Calendar", icon: <Calendar />, shortcut: "G C" }, { label: "Documents", icon: <FileText /> }] },
  { heading: "Actions", items: [{ label: "New document", icon: <Plus />, shortcut: "C" }, { label: "Invite teammate", icon: <UserPlus /> }, { label: "Settings", icon: <Settings />, shortcut: "," }] },
  { heading: "People", items: [{ label: "Maya Chen", icon: <Users /> }, { label: "Daniel Ortiz", icon: <Users /> }] },
];

export default function Example() {
  return (
    <div className="w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <Navbar className="justify-between">
        <NavbarBrand href="#" logo={<span className="flex size-7 items-center justify-center rounded-[8px] bg-neutral-950 text-white dark:bg-white dark:text-neutral-950"><SlateMark className="size-4" /></span>}>
          Slate
        </NavbarBrand>
        <NavbarSearch groups={groups} placeholder="Search or jump to…" className="absolute left-1/2 hidden w-[min(300px,40%)] -translate-x-1/2 sm:flex" />
        <NavbarActions>
          <NavbarSearch groups={groups} iconOnly shortcut={false} />
          <NavbarIconButton aria-label="New document">
            <Plus />
          </NavbarIconButton>
        </NavbarActions>
      </Navbar>
      <div className="grid h-[160px] place-items-center bg-neutral-50 text-[12.5px] text-neutral-500 dark:bg-neutral-900">Click the field or press ⌘K.</div>
    </div>
  );
}

39:T7a5,"use client"; import { AtSign, GitPullRequest, MessageSquare } from "lucide-react"; import { useState } from "react"; import { Navbar, NavbarActions, NavbarBrand, NavbarNotifications, type Notification } from "@/components/scalar-ui/navbar"; function PulseMark({ className }: { className?: string }) { return ( ); } export default function Example() { const [items, setItems] = useState([ { id: "a", title: "Workflows can now run on a schedule", description: "Pick a cron or a plain-English time like “every weekday at 9”.", time: "Today", unread: true, announcement: true }, { id: "b", title: "Maya mentioned you", description: "“Can you check the retry logic before we ship?”", time: "12m", unread: true, icon: }, { id: "c", title: "Review requested on #482", description: "Prorate upgrades mid-cycle", time: "1h", unread: true, icon: }, { id: "d", title: "Daniel replied in #launch", time: "Yesterday", icon: }, ]); return (

}> Pulse

Open the bell: switch tabs, read one, or mark all as read.

); } 3a:T40b8,

"use client";

import { AtSign, GitPullRequest, MessageSquare } from "lucide-react";
import { useState } from "react";
import { Navbar, NavbarActions, NavbarBrand, NavbarNotifications, type Notification } from "@/components/scalar-ui/navbar";

function PulseMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden>
      <path d="M3 12h4l2.5-6 5 12L17 12h4" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export default function Example() {
  const [items, setItems] = useState<Notification[]>([
    { id: "a", title: "Workflows can now run on a schedule", description: "Pick a cron or a plain-English time like “every weekday at 9”.", time: "Today", unread: true, announcement: true },
    { id: "b", title: "Maya mentioned you", description: "“Can you check the retry logic before we ship?”", time: "12m", unread: true, icon: <AtSign /> },
    { id: "c", title: "Review requested on #482", description: "Prorate upgrades mid-cycle", time: "1h", unread: true, icon: <GitPullRequest /> },
    { id: "d", title: "Daniel replied in #launch", time: "Yesterday", icon: <MessageSquare /> },
  ]);
  return (
    <div className="h-[460px] w-full overflow-hidden rounded-[18px] bg-neutral-50 ring-1 ring-black/[0.08] dark:bg-neutral-900 dark:ring-white/[0.1]">
      <Navbar>
        <NavbarBrand href="#" logo={<span className="flex size-7 items-center justify-center rounded-[8px] bg-rose-500 text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.25)]"><PulseMark className="size-4" /></span>}>
          Pulse
        </NavbarBrand>
        <NavbarActions>
          <NavbarNotifications items={items} onItemsChange={setItems} />
        </NavbarActions>
      </Navbar>
      <p className="p-5 text-center text-[12.5px] text-neutral-500">Open the bell: switch tabs, read one, or mark all as read.</p>
    </div>
  );
}

3b:T69a,"use client"; import { useState } from "react"; import { Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks } from "@/components/scalar-ui/navbar"; function PeakMark({ className }: { className?: string }) { return ( ); } export default function Example() { const [active, setActive] = useState("Trips"); return (

}> Summit {["Trips", "Guides", "Gear", "Journal"].map((l) => ( setActive(l)}> {l} ))} Book a trip

); } 3c:T404f,

"use client";

import { useState } from "react";
import { Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks } from "@/components/scalar-ui/navbar";

function PeakMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} aria-hidden>
      <path d="m2.5 19 7-12 4 6.5 2.5-3.5 5.5 9z" fill="currentColor" />
    </svg>
  );
}

export default function Example() {
  const [active, setActive] = useState("Trips");
  return (
    <div className="relative h-[380px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1200&h=760&fit=crop&auto=format&q=70" alt="" className="absolute inset-0 size-full object-cover" />
      <Navbar variant="glass" className="absolute inset-x-0 top-0">
        <NavbarBrand href="#" logo={<span className="flex size-7 items-center justify-center rounded-[8px] bg-white text-neutral-900 shadow-[0_1px_2px_rgb(0_0_0/0.1)]"><PeakMark className="size-4" /></span>}>
          Summit
        </NavbarBrand>
        <NavbarLinks className="mx-auto hidden sm:flex">
          {["Trips", "Guides", "Gear", "Journal"].map((l) => (
            <NavbarLink key={l} active={active === l} onClick={() => setActive(l)}>
              {l}
            </NavbarLink>
          ))}
        </NavbarLinks>
        <NavbarActions className="ml-0">
          <a href="#" className="flex h-8 items-center rounded-full bg-neutral-950 px-3.5 text-[13px] font-medium text-white dark:bg-white dark:text-neutral-950">
            Book a trip
          </a>
        </NavbarActions>
      </Navbar>
    </div>
  );
}

29:["$","section","navbar",{"id":"navbar","aria-labelledby":"navbar-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"navbar-title","className":"sr-only","children":"Navbar"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · cmdk · motion · lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"navbar","gated":{"unlocked":true,"files":[{"name":"navbar.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"simple":{"name":"simple.tsx","code":"$31","html":"$32"},"bouncy-tabs":{"name":"bouncy-tabs.tsx","code":"$33","html":"$34"},"floating":{"name":"floating.tsx","code":"$35","html":"$36"},"command-search":{"name":"command-search.tsx","code":"$37","html":"$38"},"notifications":{"name":"notifications.tsx","code":"$39","html":"$3a"},"glass":{"name":"glass.tsx","code":"$3b","html":"$3c"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add navbar","shadcn":"npx shadcn@latest add https://scalarui.com/r/navbar.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui cmdk motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L3d","toolbar":"$L3e"}]}],["$L3f","$L40","$L41","$L42","$L43","$L44"]]}]

Navbars

Navbars

Simple

Bouncy Tabs

Floating

Command Search

Notifications

Glass