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:T294f,"use client"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { Check, ChevronRight } from "lucide-react"; import { Menubar as MenubarPrimitive } from "radix-ui"; import { createContext, useContext, useId, useRef, useState, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; type Variant = "raised" | "ghost"; const BarContext = createContext<{ value: string; glass: boolean }>({ value: "", glass: false }); const MenuContext = createContext(""); const SubContext = createContext(false); const ROOT = { raised: "h-10 rounded-[14px] bg-white p-1 shadow-[0_1px_2px_rgb(0_0_0/0.05),0_4px_12px_-4px_rgb(0_0_0/0.08)] ring-1 ring-black/[0.07] dark:bg-neutral-900 dark:shadow-[0_4px_12px_-4px_rgb(0_0_0/0.6)] dark:ring-white/[0.1]", ghost: "h-9", } as const; const SURFACE = { solid: "bg-white 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:shadow-[0_12px_32px_-8px_rgb(0_0_0/0.7)] dark:ring-white/[0.1]", glass: "bg-white/75 shadow-[0_12px_32px_-8px_rgb(0_0_0/0.2),inset_0_1px_0_rgb(255_255_255/0.6)] ring-1 ring-black/[0.08] backdrop-blur-xl backdrop-saturate-150 dark:bg-neutral-900/75 dark:shadow-[0_12px_32px_-8px_rgb(0_0_0/0.7),inset_0_1px_0_rgb(255_255_255/0.06)] dark:ring-white/[0.1]", } as const; const ITEM = cn( "relative flex h-8 cursor-default select-none items-center gap-2.5 rounded-[9px] px-2.5 text-[13px] text-neutral-700 outline-none transition-colors duration-75", "data-highlighted:bg-neutral-950/[0.05] data-highlighted:text-neutral-950 data-disabled:pointer-events-none data-disabled:opacity-40", "dark:text-neutral-300 dark:data-highlighted:bg-white/[0.08] dark:data-highlighted:text-white", "[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-neutral-400 data-highlighted:[&_svg]:text-neutral-700 dark:data-highlighted:[&_svg]:text-neutral-200", ); const MOTION = { initial: { opacity: 0, scale: 0.97, y: -4 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.98, transition: { duration: 0.08 } }, transition: { type: "spring", bounce: 0.12, duration: 0.24 }, } as const; export interface MenubarProps extends ComponentProps { /** raised: a white bar · ghost: no surface, e.g. inside a window's title bar. */ variant?: Variant; /** Translucent menus with a background blur. */ glass?: boolean; } /** A desktop-style menu bar. Once a menu is open, hovering or arrowing to the next trigger opens that one. */ export function Menubar({ variant = "raised", glass = false, value: valueProp, defaultValue = "", onValueChange, className, ...props }: MenubarProps) { const [uncontrolled, setUncontrolled] = useState(defaultValue); const value = valueProp ?? uncontrolled; return ( { if (valueProp === undefined) setUncontrolled(next); onValueChange?.(next); }} className={cn("flex w-fit items-center gap-0.5", ROOT[variant], className)} {...props} /> ); } export function MenubarMenu({ value, ...props }: ComponentProps) { const id = useId(); const key = value ?? id; return ( ); } export const MenubarGroup = MenubarPrimitive.Group; export const MenubarRadioGroup = MenubarPrimitive.RadioGroup; export function MenubarTrigger({ className, ...props }: ComponentProps) { return ( ); } export function MenubarContent({ className, children, onInteractOutside, ...props }: ComponentProps) { const bar = useContext(BarContext); const menu = useContext(MenuContext); const open = bar.value === menu; const live = useRef(open); live.current = open; return ( {open && ( { // A menu still fading out after another one opened mustn't close the bar. if (!live.current) e.preventDefault(); onInteractOutside?.(e); }} {...props} > {children} )} ); } export interface MenubarItemProps extends ComponentProps { variant?: "default" | "destructive"; /** Indent the label to line up with checkbox and radio items. */ inset?: boolean; } export function MenubarItem({ variant = "default", inset, className, ...props }: MenubarItemProps) { return ( ); } export function MenubarCheckboxItem({ className, children, ...props }: ComponentProps) { return ( {children} ); } export function MenubarRadioItem({ className, children, ...props }: ComponentProps) { return ( {children} ); } export function MenubarLabel({ inset, className, ...props }: ComponentProps & { inset?: boolean }) { return ( ); } export function MenubarSeparator({ className, ...props }: ComponentProps) { return ; } export function MenubarShortcut({ className, ...props }: ComponentProps<"span">) { return ; } export function MenubarSub({ open: openProp, defaultOpen = false, onOpenChange, ...props }: ComponentProps) { const [uncontrolled, setUncontrolled] = useState(defaultOpen); const open = openProp ?? uncontrolled; return ( { if (openProp === undefined) setUncontrolled(next); onOpenChange?.(next); }} {...props} /> ); } export function MenubarSubTrigger({ inset, className, children, ...props }: ComponentProps & { inset?: boolean }) { return ( {children} ); } export function MenubarSubContent({ className, children, ...props }: ComponentProps) { const open = useContext(SubContext); const { glass } = useContext(BarContext); return ( {open && ( {children} )} ); } export default Menubar; 2e:T15807,

"use client";

import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { Check, ChevronRight } from "lucide-react";
import { Menubar as MenubarPrimitive } from "radix-ui";
import { createContext, useContext, useId, useRef, useState, type ComponentProps } from "react";
import { cn } from "@/lib/utils";

type Variant = "raised" | "ghost";

const BarContext = createContext<{ value: string; glass: boolean }>({ value: "", glass: false });
const MenuContext = createContext("");
const SubContext = createContext(false);

const ROOT = {
  raised:
    "h-10 rounded-[14px] bg-white p-1 shadow-[0_1px_2px_rgb(0_0_0/0.05),0_4px_12px_-4px_rgb(0_0_0/0.08)] ring-1 ring-black/[0.07] dark:bg-neutral-900 dark:shadow-[0_4px_12px_-4px_rgb(0_0_0/0.6)] dark:ring-white/[0.1]",
  ghost: "h-9",
} as const;

const SURFACE = {
  solid:
    "bg-white 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:shadow-[0_12px_32px_-8px_rgb(0_0_0/0.7)] dark:ring-white/[0.1]",
  glass:
    "bg-white/75 shadow-[0_12px_32px_-8px_rgb(0_0_0/0.2),inset_0_1px_0_rgb(255_255_255/0.6)] ring-1 ring-black/[0.08] backdrop-blur-xl backdrop-saturate-150 dark:bg-neutral-900/75 dark:shadow-[0_12px_32px_-8px_rgb(0_0_0/0.7),inset_0_1px_0_rgb(255_255_255/0.06)] dark:ring-white/[0.1]",
} as const;

const ITEM = cn(
  "relative flex h-8 cursor-default select-none items-center gap-2.5 rounded-[9px] px-2.5 text-[13px] text-neutral-700 outline-none transition-colors duration-75",
  "data-highlighted:bg-neutral-950/[0.05] data-highlighted:text-neutral-950 data-disabled:pointer-events-none data-disabled:opacity-40",
  "dark:text-neutral-300 dark:data-highlighted:bg-white/[0.08] dark:data-highlighted:text-white",
  "[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-neutral-400 data-highlighted:[&_svg]:text-neutral-700 dark:data-highlighted:[&_svg]:text-neutral-200",
);

const MOTION = {
  initial: { opacity: 0, scale: 0.97, y: -4 },
  animate: { opacity: 1, scale: 1, y: 0 },
  exit: { opacity: 0, scale: 0.98, transition: { duration: 0.08 } },
  transition: { type: "spring", bounce: 0.12, duration: 0.24 },
} as const;

export interface MenubarProps extends ComponentProps<typeof MenubarPrimitive.Root> {
  /** raised: a white bar · ghost: no surface, e.g. inside a window's title bar. */
  variant?: Variant;
  /** Translucent menus with a background blur. */
  glass?: boolean;
}

/** A desktop-style menu bar. Once a menu is open, hovering or arrowing to the next trigger opens that one. */
export function Menubar({ variant = "raised", glass = false, value: valueProp, defaultValue = "", onValueChange, className, ...props }: MenubarProps) {
  const [uncontrolled, setUncontrolled] = useState(defaultValue);
  const value = valueProp ?? uncontrolled;
  return (
    <BarContext.Provider value={{ value, glass }}>
      <MenubarPrimitive.Root
        value={value}
        onValueChange={(next) => {
          if (valueProp === undefined) setUncontrolled(next);
          onValueChange?.(next);
        }}
        className={cn("flex w-fit items-center gap-0.5", ROOT[variant], className)}
        {...props}
      />
    </BarContext.Provider>
  );
}

export function MenubarMenu({ value, ...props }: ComponentProps<typeof MenubarPrimitive.Menu>) {
  const id = useId();
  const key = value ?? id;
  return (
    <MenuContext.Provider value={key}>
      <MenubarPrimitive.Menu value={key} {...props} />
    </MenuContext.Provider>
  );
}

export const MenubarGroup = MenubarPrimitive.Group;
export const MenubarRadioGroup = MenubarPrimitive.RadioGroup;

export function MenubarTrigger({ className, ...props }: ComponentProps<typeof MenubarPrimitive.Trigger>) {
  return (
    <MenubarPrimitive.Trigger
      className={cn(
        "flex h-8 select-none items-center gap-1.5 rounded-[10px] px-3 text-[13px] font-medium tracking-[-0.01em] text-neutral-700 outline-none transition-colors duration-100",
        "hover:bg-neutral-950/[0.04] data-highlighted:bg-neutral-950/[0.05] data-[state=open]:bg-neutral-950/[0.07] data-[state=open]:text-neutral-950",
        "dark:text-neutral-300 dark:hover:bg-white/[0.06] dark:data-highlighted:bg-white/[0.08] dark:data-[state=open]:bg-white/[0.1] dark:data-[state=open]:text-white",
        className,
      )}
      {...props}
    />
  );
}

export function MenubarContent({ className, children, onInteractOutside, ...props }: ComponentProps<typeof MenubarPrimitive.Content>) {
  const bar = useContext(BarContext);
  const menu = useContext(MenuContext);
  const open = bar.value === menu;
  const live = useRef(open);
  live.current = open;
  return (
    <AnimatePresence>
      {open && (
        <MenubarPrimitive.Portal forceMount>
          <MotionConfig reducedMotion="user">
            <MenubarPrimitive.Content
              forceMount
              asChild
              align="start"
              sideOffset={6}
              alignOffset={-4}
              collisionPadding={8}
              onInteractOutside={(e) => {
                // A menu still fading out after another one opened mustn't close the bar.
                if (!live.current) e.preventDefault();
                onInteractOutside?.(e);
              }}
              {...props}
            >
              <motion.div
                {...MOTION}
                className={cn(
                  "z-50 min-w-[220px] max-h-(--radix-menubar-content-available-height) origin-(--radix-menubar-content-transform-origin) overflow-y-auto rounded-[14px] p-1 text-neutral-950 outline-none dark:text-white",
                  SURFACE[bar.glass ? "glass" : "solid"],
                  className,
                )}
              >
                {children}
              </motion.div>
            </MenubarPrimitive.Content>
          </MotionConfig>
        </MenubarPrimitive.Portal>
      )}
    </AnimatePresence>
  );
}

export interface MenubarItemProps extends ComponentProps<typeof MenubarPrimitive.Item> {
  variant?: "default" | "destructive";
  /** Indent the label to line up with checkbox and radio items. */
  inset?: boolean;
}

export function MenubarItem({ variant = "default", inset, className, ...props }: MenubarItemProps) {
  return (
    <MenubarPrimitive.Item
      className={cn(
        ITEM,
        inset && "pl-8",
        variant === "destructive" &&
          "text-red-600 data-highlighted:bg-red-500/[0.08] data-highlighted:text-red-700 dark:text-red-400 dark:data-highlighted:bg-red-500/15 dark:data-highlighted:text-red-300 [&_svg]:text-red-500 data-highlighted:[&_svg]:text-red-600",
        className,
      )}
      {...props}
    />
  );
}

export function MenubarCheckboxItem({ className, children, ...props }: ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
  return (
    <MenubarPrimitive.CheckboxItem className={cn(ITEM, "pl-8", className)} {...props}>
      <MenubarPrimitive.ItemIndicator className="absolute left-2.5 flex">
        <Check className="size-3.5! text-neutral-950! dark:text-white!" strokeWidth={2.5} />
      </MenubarPrimitive.ItemIndicator>
      {children}
    </MenubarPrimitive.CheckboxItem>
  );
}

export function MenubarRadioItem({ className, children, ...props }: ComponentProps<typeof MenubarPrimitive.RadioItem>) {
  return (
    <MenubarPrimitive.RadioItem className={cn(ITEM, "pl-8", className)} {...props}>
      <MenubarPrimitive.ItemIndicator className="absolute left-3.5 flex">
        <span className="size-1.5 rounded-full bg-neutral-950 dark:bg-white" />
      </MenubarPrimitive.ItemIndicator>
      {children}
    </MenubarPrimitive.RadioItem>
  );
}

export function MenubarLabel({ inset, className, ...props }: ComponentProps<typeof MenubarPrimitive.Label> & { inset?: boolean }) {
  return (
    <MenubarPrimitive.Label
      className={cn("px-2.5 pb-1 pt-2 text-[11.5px] font-medium uppercase tracking-[0.06em] text-neutral-400", inset && "pl-8", className)}
      {...props}
    />
  );
}

export function MenubarSeparator({ className, ...props }: ComponentProps<typeof MenubarPrimitive.Separator>) {
  return <MenubarPrimitive.Separator className={cn("-mx-1 my-1 h-px bg-black/[0.06] dark:bg-white/[0.08]", className)} {...props} />;
}

export function MenubarShortcut({ className, ...props }: ComponentProps<"span">) {
  return <span className={cn("ml-auto pl-6 text-[12px] tracking-[0.08em] text-neutral-400", className)} {...props} />;
}

export function MenubarSub({ open: openProp, defaultOpen = false, onOpenChange, ...props }: ComponentProps<typeof MenubarPrimitive.Sub>) {
  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
  const open = openProp ?? uncontrolled;
  return (
    <SubContext.Provider value={open}>
      <MenubarPrimitive.Sub
        open={open}
        onOpenChange={(next) => {
          if (openProp === undefined) setUncontrolled(next);
          onOpenChange?.(next);
        }}
        {...props}
      />
    </SubContext.Provider>
  );
}

export function MenubarSubTrigger({ inset, className, children, ...props }: ComponentProps<typeof MenubarPrimitive.SubTrigger> & { inset?: boolean }) {
  return (
    <MenubarPrimitive.SubTrigger
      className={cn(ITEM, inset && "pl-8", "data-[state=open]:bg-neutral-950/[0.05] data-[state=open]:text-neutral-950 dark:data-[state=open]:bg-white/[0.08] dark:data-[state=open]:text-white", className)}
      {...props}
    >
      {children}
      <ChevronRight className="ml-auto size-3.5!" />
    </MenubarPrimitive.SubTrigger>
  );
}

export function MenubarSubContent({ className, children, ...props }: ComponentProps<typeof MenubarPrimitive.SubContent>) {
  const open = useContext(SubContext);
  const { glass } = useContext(BarContext);
  return (
    <AnimatePresence>
      {open && (
        <MenubarPrimitive.Portal forceMount>
          <MenubarPrimitive.SubContent forceMount asChild sideOffset={6} alignOffset={-4} collisionPadding={8} {...props}>
            <motion.div
              {...MOTION}
              initial={{ opacity: 0, scale: 0.97, x: -4 }}
              animate={{ opacity: 1, scale: 1, x: 0 }}
              className={cn(
                "z-50 min-w-[180px] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-[14px] p-1 text-neutral-950 outline-none dark:text-white",
                SURFACE[glass ? "glass" : "solid"],
                className,
              )}
            >
              {children}
            </motion.div>
          </MenubarPrimitive.SubContent>
        </MenubarPrimitive.Portal>
      )}
    </AnimatePresence>
  );
}

export default Menubar;

2f:Tc65,"use client"; import { Copy, FilePlus2, FolderOpen, Printer, Redo2, Save, Scissors, Search, Undo2, ClipboardPaste } from "lucide-react"; import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger, } from "@/components/scalar-ui/menubar"; export default function Demo() { return (

File New document ⌘N Open… ⌘O Save ⌘S Print… ⌘P Edit Undo ⌘Z Redo ⇧⌘Z Cut ⌘X Copy ⌘C Paste ⌘V Find… ⌘F View Show sidebar Show minimap Word wrap Zoom in ⌘+ Zoom out ⌘− Help Documentation Keyboard shortcuts What's new

); } 30:T680e,

"use client";

import { Copy, FilePlus2, FolderOpen, Printer, Redo2, Save, Scissors, Search, Undo2, ClipboardPaste } from "lucide-react";
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/scalar-ui/menubar";

export default function Demo() {
  return (
    <div className="flex h-[340px] w-full justify-center">
      <Menubar aria-label="Application">
        <MenubarMenu>
          <MenubarTrigger>File</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>
              <FilePlus2 /> New document <MenubarShortcut>⌘N</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <FolderOpen /> Open… <MenubarShortcut>⌘O</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <Save /> Save <MenubarShortcut>⌘S</MenubarShortcut>
            </MenubarItem>
            <MenubarSeparator />
            <MenubarItem>
              <Printer /> Print… <MenubarShortcut>⌘P</MenubarShortcut>
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Edit</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>
              <Undo2 /> Undo <MenubarShortcut>⌘Z</MenubarShortcut>
            </MenubarItem>
            <MenubarItem disabled>
              <Redo2 /> Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
            </MenubarItem>
            <MenubarSeparator />
            <MenubarItem>
              <Scissors /> Cut <MenubarShortcut>⌘X</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <Copy /> Copy <MenubarShortcut>⌘C</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <ClipboardPaste /> Paste <MenubarShortcut>⌘V</MenubarShortcut>
            </MenubarItem>
            <MenubarSeparator />
            <MenubarItem>
              <Search /> Find… <MenubarShortcut>⌘F</MenubarShortcut>
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>View</MenubarTrigger>
          <MenubarContent>
            <MenubarCheckboxItem defaultChecked>Show sidebar</MenubarCheckboxItem>
            <MenubarCheckboxItem>Show minimap</MenubarCheckboxItem>
            <MenubarCheckboxItem defaultChecked>Word wrap</MenubarCheckboxItem>
            <MenubarSeparator />
            <MenubarItem inset>
              Zoom in <MenubarShortcut>⌘+</MenubarShortcut>
            </MenubarItem>
            <MenubarItem inset>
              Zoom out <MenubarShortcut>⌘−</MenubarShortcut>
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Help</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>Documentation</MenubarItem>
            <MenubarItem>Keyboard shortcuts</MenubarItem>
            <MenubarSeparator />
            <MenubarItem>What's new</MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
    </div>
  );
}

31:T8bf,"use client"; import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger } from "@/components/scalar-ui/menubar"; const menus = { Aurora: [["About Aurora"], ["Settings…", "⌘,"], null, ["Quit Aurora", "⌘Q"]], File: [["New tab", "⌘T"], ["New window", "⌘N"], null, ["Close tab", "⌘W"]], Edit: [["Undo", "⌘Z"], ["Redo", "⇧⌘Z"], null, ["Select all", "⌘A"]], Go: [["Back", "⌘["], ["Forward", "⌘]"], ["Go to file…", "⌘P"]], } as const; export default function Example() { return (

{Object.entries(menus).map(([name, items], i) => ( {name} {items.map((item, j) => item ? ( {item[0]} {item[1] && {item[1]}} ) : ( ), )} ))} Mon 9:41

); } 32:T5015,

"use client";

import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger } from "@/components/scalar-ui/menubar";

const menus = {
  Aurora: [["About Aurora"], ["Settings…", "⌘,"], null, ["Quit Aurora", "⌘Q"]],
  File: [["New tab", "⌘T"], ["New window", "⌘N"], null, ["Close tab", "⌘W"]],
  Edit: [["Undo", "⌘Z"], ["Redo", "⇧⌘Z"], null, ["Select all", "⌘A"]],
  Go: [["Back", "⌘["], ["Forward", "⌘]"], ["Go to file…", "⌘P"]],
} as const;

export default function Example() {
  return (
    <div className="h-[340px] w-full max-w-[560px] overflow-hidden rounded-[18px] bg-[linear-gradient(160deg,rgb(229_231_235),rgb(212_212_216))] ring-1 ring-black/[0.08] dark:bg-[linear-gradient(160deg,rgb(38_38_38),rgb(23_23_23))] dark:ring-white/[0.08]">
      <div className="flex h-11 items-center gap-3 border-b border-black/[0.06] bg-white/70 px-3 backdrop-blur dark:border-white/[0.06] dark:bg-neutral-900/70">
        <div className="flex gap-1.5" aria-hidden>
          <span className="size-3 rounded-full bg-neutral-300 dark:bg-neutral-600" />
          <span className="size-3 rounded-full bg-neutral-300 dark:bg-neutral-600" />
          <span className="size-3 rounded-full bg-neutral-300 dark:bg-neutral-600" />
        </div>
        <Menubar variant="ghost" glass aria-label="Aurora">
          {Object.entries(menus).map(([name, items], i) => (
            <MenubarMenu key={name}>
              <MenubarTrigger className={i === 0 ? "font-semibold text-neutral-950 dark:text-white" : ""}>{name}</MenubarTrigger>
              <MenubarContent>
                {items.map((item, j) =>
                  item ? (
                    <MenubarItem key={item[0]}>
                      {item[0]}
                      {item[1] && <MenubarShortcut>{item[1]}</MenubarShortcut>}
                    </MenubarItem>
                  ) : (
                    <MenubarSeparator key={j} />
                  ),
                )}
              </MenubarContent>
            </MenubarMenu>
          ))}
        </Menubar>
        <span className="ml-auto text-[12px] tabular-nums text-neutral-500 dark:text-neutral-400">Mon 9:41</span>
      </div>
    </div>
  );
}

33:T8f5,"use client"; import { useState } from "react"; import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarTrigger, } from "@/components/scalar-ui/menubar"; export default function Example() { const [panels, setPanels] = useState({ sidebar: true, inspector: false, timeline: true }); const [theme, setTheme] = useState("system"); const [density, setDensity] = useState("comfortable"); return (

Panels {(Object.keys(panels) as (keyof typeof panels)[]).map((key) => ( setPanels((p) => ({ ...p, [key]: on === true }))} onSelect={(e) => e.preventDefault()} className="capitalize"> {key} ))} Appearance Theme Light Dark System Density Compact Comfortable

{Object.entries(panels) .filter(([, on]) => on) .map(([k]) => k) .join(", ") || "No panels"}{" "} · {theme} · {density}

); } 34:T612c,

"use client";

import { useState } from "react";
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarLabel,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarTrigger,
} from "@/components/scalar-ui/menubar";

export default function Example() {
  const [panels, setPanels] = useState({ sidebar: true, inspector: false, timeline: true });
  const [theme, setTheme] = useState("system");
  const [density, setDensity] = useState("comfortable");
  return (
    <div className="flex h-[320px] w-full flex-col items-center gap-4">
      <Menubar aria-label="View options">
        <MenubarMenu>
          <MenubarTrigger>Panels</MenubarTrigger>
          <MenubarContent>
            {(Object.keys(panels) as (keyof typeof panels)[]).map((key) => (
              <MenubarCheckboxItem key={key} checked={panels[key]} onCheckedChange={(on) => setPanels((p) => ({ ...p, [key]: on === true }))} onSelect={(e) => e.preventDefault()} className="capitalize">
                {key}
              </MenubarCheckboxItem>
            ))}
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Appearance</MenubarTrigger>
          <MenubarContent>
            <MenubarLabel inset>Theme</MenubarLabel>
            <MenubarRadioGroup value={theme} onValueChange={setTheme}>
              <MenubarRadioItem value="light">Light</MenubarRadioItem>
              <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
              <MenubarRadioItem value="system">System</MenubarRadioItem>
            </MenubarRadioGroup>
            <MenubarSeparator />
            <MenubarLabel inset>Density</MenubarLabel>
            <MenubarRadioGroup value={density} onValueChange={setDensity}>
              <MenubarRadioItem value="compact">Compact</MenubarRadioItem>
              <MenubarRadioItem value="comfortable">Comfortable</MenubarRadioItem>
            </MenubarRadioGroup>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
      <p className="text-[12.5px] text-neutral-500 dark:text-neutral-400">
        {Object.entries(panels)
          .filter(([, on]) => on)
          .map(([k]) => k)
          .join(", ") || "No panels"}{" "}
        · {theme} · {density}
      </p>
    </div>
  );
}

35:T98d,import { FileText, Link2, Mail, MessageSquare, Share2, Trash2 } from "lucide-react"; import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, } from "@/components/scalar-ui/menubar"; export default function Example() { return (

File New page ⌘N Open recent Q4 roadmap Hiring plan Launch checklist Clear recent Share Copy link Email Slack Move to trash Insert Image Table Chart Bar Line Donut

); } 36:T4fef,

import { FileText, Link2, Mail, MessageSquare, Share2, Trash2 } from "lucide-react";
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/components/scalar-ui/menubar";

export default function Example() {
  return (
    <div className="flex h-[340px] w-full justify-center">
      <Menubar aria-label="Document">
        <MenubarMenu>
          <MenubarTrigger>File</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>
              <FileText /> New page <MenubarShortcut>⌘N</MenubarShortcut>
            </MenubarItem>
            <MenubarSub>
              <MenubarSubTrigger inset>Open recent</MenubarSubTrigger>
              <MenubarSubContent>
                <MenubarItem>Q4 roadmap</MenubarItem>
                <MenubarItem>Hiring plan</MenubarItem>
                <MenubarItem>Launch checklist</MenubarItem>
                <MenubarSeparator />
                <MenubarItem>Clear recent</MenubarItem>
              </MenubarSubContent>
            </MenubarSub>
            <MenubarSub>
              <MenubarSubTrigger>
                <Share2 /> Share
              </MenubarSubTrigger>
              <MenubarSubContent>
                <MenubarItem>
                  <Link2 /> Copy link
                </MenubarItem>
                <MenubarItem>
                  <Mail /> Email
                </MenubarItem>
                <MenubarItem>
                  <MessageSquare /> Slack
                </MenubarItem>
              </MenubarSubContent>
            </MenubarSub>
            <MenubarSeparator />
            <MenubarItem variant="destructive">
              <Trash2 /> Move to trash
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Insert</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>Image</MenubarItem>
            <MenubarItem>Table</MenubarItem>
            <MenubarSub>
              <MenubarSubTrigger>Chart</MenubarSubTrigger>
              <MenubarSubContent>
                <MenubarItem>Bar</MenubarItem>
                <MenubarItem>Line</MenubarItem>
                <MenubarItem>Donut</MenubarItem>
              </MenubarSubContent>
            </MenubarSub>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
    </div>
  );
}

29:["$","section","menubar",{"id":"menubar","aria-labelledby":"menubar-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":"menubar-title","className":"sr-only","children":"Menubar"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · motion · lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"menubar","gated":{"unlocked":true,"files":[{"name":"menubar.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"app-window":{"name":"app-window.tsx","code":"$31","html":"$32"},"checkbox-radio":{"name":"checkbox-radio.tsx","code":"$33","html":"$34"},"submenus":{"name":"submenus.tsx","code":"$35","html":"$36"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add menubar","shadcn":"npx shadcn@latest add https://scalarui.com/r/menubar.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 motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L37","toolbar":"$L38"}]}],["$L39","$L3a","$L3b"]]}]

Menubars

Menubars

App Window

Checkbox and Radio

Submenus