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:T216a,"use client"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { Check, ChevronRight } from "lucide-react"; import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"; import { createContext, useContext, useState, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; type Variant = "solid" | "glass"; const MenuContext = createContext<{ open: boolean; variant: Variant }>({ open: false, variant: "solid" }); const SubContext = createContext(false); 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-9 cursor-default select-none items-center gap-2.5 rounded-[10px] px-2.5 text-[13.5px] 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.96 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.98, transition: { duration: 0.1 } }, transition: { type: "spring", bounce: 0.14, duration: 0.26 }, } as const; export interface DropdownMenuProps extends ComponentProps { /** solid: a white panel · glass: translucent with a background blur. */ variant?: Variant; } export function DropdownMenu({ variant = "solid", open: openProp, defaultOpen = false, onOpenChange, ...props }: DropdownMenuProps) { const [uncontrolled, setUncontrolled] = useState(defaultOpen); const open = openProp ?? uncontrolled; return ( { if (openProp === undefined) setUncontrolled(next); onOpenChange?.(next); }} {...props} /> ); } export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; export const DropdownMenuGroup = DropdownMenuPrimitive.Group; export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; export function DropdownMenuContent({ className, children, ...props }: ComponentProps) { const { open, variant } = useContext(MenuContext); return ( {open && ( {children} )} ); } export interface DropdownMenuItemProps extends ComponentProps { variant?: "default" | "destructive"; /** Indent the label to line up with checkbox and radio items. */ inset?: boolean; } export function DropdownMenuItem({ variant = "default", inset, className, ...props }: DropdownMenuItemProps) { return ( ); } export function DropdownMenuCheckboxItem({ className, children, ...props }: ComponentProps) { return ( {children} ); } export function DropdownMenuRadioItem({ className, children, ...props }: ComponentProps) { return ( {children} ); } export function DropdownMenuLabel({ inset, className, ...props }: ComponentProps & { inset?: boolean }) { return ( ); } export function DropdownMenuSeparator({ className, ...props }: ComponentProps) { return ; } export function DropdownMenuShortcut({ className, ...props }: ComponentProps<"span">) { return ; } export function DropdownMenuSub({ 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 DropdownMenuSubTrigger({ className, children, ...props }: ComponentProps) { return ( {children} ); } export function DropdownMenuSubContent({ className, children, ...props }: ComponentProps) { const open = useContext(SubContext); const { variant } = useContext(MenuContext); return ( {open && ( {children} )} ); } export default DropdownMenu; 2e:T11253,

"use client";

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

type Variant = "solid" | "glass";

const MenuContext = createContext<{ open: boolean; variant: Variant }>({ open: false, variant: "solid" });
const SubContext = createContext(false);

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-9 cursor-default select-none items-center gap-2.5 rounded-[10px] px-2.5 text-[13.5px] 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.96 },
  animate: { opacity: 1, scale: 1 },
  exit: { opacity: 0, scale: 0.98, transition: { duration: 0.1 } },
  transition: { type: "spring", bounce: 0.14, duration: 0.26 },
} as const;

export interface DropdownMenuProps extends ComponentProps<typeof DropdownMenuPrimitive.Root> {
  /** solid: a white panel · glass: translucent with a background blur. */
  variant?: Variant;
}

export function DropdownMenu({ variant = "solid", open: openProp, defaultOpen = false, onOpenChange, ...props }: DropdownMenuProps) {
  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
  const open = openProp ?? uncontrolled;
  return (
    <MenuContext.Provider value={{ open, variant }}>
      <DropdownMenuPrimitive.Root
        open={open}
        onOpenChange={(next) => {
          if (openProp === undefined) setUncontrolled(next);
          onOpenChange?.(next);
        }}
        {...props}
      />
    </MenuContext.Provider>
  );
}

export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;

export function DropdownMenuContent({ className, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Content>) {
  const { open, variant } = useContext(MenuContext);
  return (
    <AnimatePresence>
      {open && (
        <DropdownMenuPrimitive.Portal forceMount>
          <MotionConfig reducedMotion="user">
            <DropdownMenuPrimitive.Content forceMount asChild sideOffset={6} align="start" collisionPadding={8} {...props}>
              <motion.div
                {...MOTION}
                className={cn(
                  "z-50 min-w-[220px] max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-y-auto rounded-2xl p-1.5 text-neutral-950 outline-none dark:text-white",
                  SURFACE[variant],
                  className,
                )}
              >
                {children}
              </motion.div>
            </DropdownMenuPrimitive.Content>
          </MotionConfig>
        </DropdownMenuPrimitive.Portal>
      )}
    </AnimatePresence>
  );
}

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

export function DropdownMenuItem({ variant = "default", inset, className, ...props }: DropdownMenuItemProps) {
  return (
    <DropdownMenuPrimitive.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 DropdownMenuCheckboxItem({ className, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
  return (
    <DropdownMenuPrimitive.CheckboxItem className={cn(ITEM, "pl-8", className)} {...props}>
      <DropdownMenuPrimitive.ItemIndicator className="absolute left-2.5 flex">
        <Check className="text-neutral-950! dark:text-white!" />
      </DropdownMenuPrimitive.ItemIndicator>
      {children}
    </DropdownMenuPrimitive.CheckboxItem>
  );
}

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

export function DropdownMenuLabel({ inset, className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }) {
  return (
    <DropdownMenuPrimitive.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 DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
  return <DropdownMenuPrimitive.Separator className={cn("-mx-1.5 my-1.5 h-px bg-black/[0.06] dark:bg-white/[0.08]", className)} {...props} />;
}

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

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

export function DropdownMenuSubTrigger({ className, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>) {
  return (
    <DropdownMenuPrimitive.SubTrigger
      className={cn(ITEM, "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!" />
    </DropdownMenuPrimitive.SubTrigger>
  );
}

export function DropdownMenuSubContent({ className, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
  const open = useContext(SubContext);
  const { variant } = useContext(MenuContext);
  return (
    <AnimatePresence>
      {open && (
        <DropdownMenuPrimitive.Portal forceMount>
          <DropdownMenuPrimitive.SubContent forceMount asChild sideOffset={6} alignOffset={-6} collisionPadding={8} {...props}>
            <motion.div
              {...MOTION}
              className={cn(
                "z-50 min-w-[180px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-2xl p-1.5 text-neutral-950 outline-none dark:text-white",
                SURFACE[variant],
                className,
              )}
            >
              {children}
            </motion.div>
          </DropdownMenuPrimitive.SubContent>
        </DropdownMenuPrimitive.Portal>
      )}
    </AnimatePresence>
  );
}

export default DropdownMenu;

2f:T921,import { ChevronDown, Copy, FolderInput, Folder, Pencil, Share, Star, Trash2 } from "lucide-react"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "@/components/scalar-ui/dropdown-menu"; const trigger = "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4"; export default function Demo() { return ( Actions Rename ⌘R Duplicate ⌘D Add to favourites Move to {["Design", "Engineering", "Archive"].map((f) => ( {f} ))} Share… Delete ⌫ ); } 30:T4139,

import { ChevronDown, Copy, FolderInput, Folder, Pencil, Share, Star, Trash2 } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/scalar-ui/dropdown-menu";

const trigger =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4";

export default function Demo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger className={trigger}>
        Actions
        <ChevronDown className="text-neutral-400 transition-transform duration-200 in-data-[state=open]:rotate-180" />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>
          <Pencil />
          Rename
          <DropdownMenuShortcut>⌘R</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Copy />
          Duplicate
          <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Star />
          Add to favourites
        </DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>
            <FolderInput />
            Move to
          </DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            {["Design", "Engineering", "Archive"].map((f) => (
              <DropdownMenuItem key={f}>
                <Folder />
                {f}
              </DropdownMenuItem>
            ))}
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuItem>
          <Share />
          Share…
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          <Trash2 />
          Delete
          <DropdownMenuShortcut>⌫</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

31:T741,import { CreditCard, LogOut, Settings, User, Users } from "lucide-react"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from "@/components/scalar-ui/dropdown-menu"; export default function Example() { return (

Maya Chen

maya@aurora.app

Profile Team Billing Settings ⌘, Sign out ); } 32:T352c,

import { CreditCard, LogOut, Settings, User, Users } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/scalar-ui/dropdown-menu";

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        aria-label="Account"
        className="rounded-full outline-none ring-offset-2 ring-offset-white transition-shadow focus-visible:ring-2 focus-visible:ring-neutral-400 data-[state=open]:ring-2 data-[state=open]:ring-neutral-300 dark:ring-offset-neutral-950 dark:data-[state=open]:ring-neutral-600"
      >
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&fit=crop&crop=faces&auto=format&q=75"
          alt=""
          className="size-10 rounded-full object-cover"
        />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-60">
        <div className="px-2.5 pb-2 pt-1.5">
          <p className="text-[13.5px] font-semibold">Maya Chen</p>
          <p className="text-[12.5px] text-neutral-500 dark:text-neutral-400">maya@aurora.app</p>
        </div>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <User />
          Profile
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Users />
          Team
        </DropdownMenuItem>
        <DropdownMenuItem>
          <CreditCard />
          Billing
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Settings />
          Settings
          <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <LogOut />
          Sign out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

33:T61c,"use client"; import { Columns3 } from "lucide-react"; import { useState } from "react"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuTrigger, } from "@/components/scalar-ui/dropdown-menu"; const trigger = "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4"; export default function Example() { const [cols, setCols] = useState({ status: true, owner: true, updated: false, size: false }); const set = (key: keyof typeof cols) => (checked: boolean) => setCols((c) => ({ ...c, [key]: checked })); return ( Columns Show columns {(Object.keys(cols) as (keyof typeof cols)[]).map((key) => ( e.preventDefault()} className="capitalize"> {key} ))} ); } 34:T3582,

"use client";

import { Columns3 } from "lucide-react";
import { useState } from "react";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/scalar-ui/dropdown-menu";

const trigger =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4";

export default function Example() {
  const [cols, setCols] = useState({ status: true, owner: true, updated: false, size: false });
  const set = (key: keyof typeof cols) => (checked: boolean) => setCols((c) => ({ ...c, [key]: checked }));
  return (
    <DropdownMenu>
      <DropdownMenuTrigger className={trigger}>
        <Columns3 />
        Columns
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-52">
        <DropdownMenuLabel inset>Show columns</DropdownMenuLabel>
        {(Object.keys(cols) as (keyof typeof cols)[]).map((key) => (
          <DropdownMenuCheckboxItem key={key} checked={cols[key]} onCheckedChange={set(key)} onSelect={(e) => e.preventDefault()} className="capitalize">
            {key}
          </DropdownMenuCheckboxItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

35:T623,"use client"; import { ArrowDownWideNarrow } from "lucide-react"; import { useState } from "react"; import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "@/components/scalar-ui/dropdown-menu"; const trigger = "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4"; const sorts = [ ["updated", "Last updated"], ["created", "Date created"], ["name", "Name"], ]; export default function Example() { const [sort, setSort] = useState("updated"); return ( {sorts.find(([v]) => v === sort)?.[1]} Sort by {sorts.map(([value, label]) => ( {label} ))} ); } 36:T34e3,

"use client";

import { ArrowDownWideNarrow } from "lucide-react";
import { useState } from "react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/scalar-ui/dropdown-menu";

const trigger =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4";

const sorts = [
  ["updated", "Last updated"],
  ["created", "Date created"],
  ["name", "Name"],
];

export default function Example() {
  const [sort, setSort] = useState("updated");
  return (
    <DropdownMenu>
      <DropdownMenuTrigger className={trigger}>
        <ArrowDownWideNarrow />
        {sorts.find(([v]) => v === sort)?.[1]}
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-52">
        <DropdownMenuLabel inset>Sort by</DropdownMenuLabel>
        <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>
          {sorts.map(([value, label]) => (
            <DropdownMenuRadioItem key={value} value={value}>
              {label}
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

37:T748,import { Archive, Copy, MoreHorizontal, Pencil, Trash2 } from "lucide-react"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/scalar-ui/dropdown-menu"; export default function Example() { return (

aurora-web

Updated 2 minutes ago

Edit Duplicate Archive Delete

); } 38:T301c,

import { Archive, Copy, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/scalar-ui/dropdown-menu";

export default function Example() {
  return (
    <div className="flex w-full max-w-[360px] items-center justify-between rounded-2xl bg-white px-4 py-3 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
      <div>
        <p className="text-[13.5px] font-medium text-neutral-950 dark:text-white">aurora-web</p>
        <p className="text-[12.5px] text-neutral-500 dark:text-neutral-400">Updated 2 minutes ago</p>
      </div>
      <DropdownMenu>
        <DropdownMenuTrigger
          aria-label="Project actions"
          className="flex size-8 items-center justify-center rounded-lg text-neutral-400 outline-none transition-colors hover:bg-neutral-950/[0.05] hover:text-neutral-900 data-[state=open]:bg-neutral-950/[0.05] data-[state=open]:text-neutral-900 dark:hover:bg-white/[0.08] dark:hover:text-white dark:data-[state=open]:bg-white/[0.08] dark:data-[state=open]:text-white"
        >
          <MoreHorizontal className="size-4" />
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-48">
          <DropdownMenuItem>
            <Pencil />
            Edit
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Copy />
            Duplicate
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Archive />
            Archive
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem variant="destructive">
            <Trash2 />
            Delete
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

39:T61a,import { Download, Link2, Mail, MessageSquare } from "lucide-react"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/scalar-ui/dropdown-menu"; const trigger = "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4"; export default function Example() { return (

Export Download PDF Copy link Email Send to chat

); } 3a:T267b,

import { Download, Link2, Mail, MessageSquare } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/scalar-ui/dropdown-menu";

const trigger =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-white px-4 text-sm font-medium tracking-[-0.01em] text-neutral-800 ring-1 ring-inset ring-black/[0.1] outline-none transition-[background-color,transform] hover:bg-neutral-50 active:scale-[0.97] data-[state=open]:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[state=open]:bg-white/[0.06] [&_svg]:size-4";

export default function Example() {
  return (
    <div className="flex h-56 w-full max-w-[420px] items-start justify-center rounded-[22px] bg-[url(/media/rolling-hills.webp)] bg-cover bg-center pt-8">
      <DropdownMenu variant="glass">
        <DropdownMenuTrigger className={`${trigger} bg-white/80 backdrop-blur`}>Export</DropdownMenuTrigger>
        <DropdownMenuContent className="w-52">
          <DropdownMenuItem>
            <Download />
            Download PDF
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Link2 />
            Copy link
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Mail />
            Email
          </DropdownMenuItem>
          <DropdownMenuItem>
            <MessageSquare />
            Send to chat
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

29:["$","section","dropdown-menu",{"id":"dropdown-menu","aria-labelledby":"dropdown-menu-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":"dropdown-menu-title","className":"sr-only","children":"Dropdown Menu"}],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":"dropdown-menu","gated":{"unlocked":true,"files":[{"name":"dropdown-menu.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"user-menu":{"name":"user-menu.tsx","code":"$31","html":"$32"},"checkbox-items":{"name":"checkbox-items.tsx","code":"$33","html":"$34"},"radio-items":{"name":"radio-items.tsx","code":"$35","html":"$36"},"icon-trigger":{"name":"icon-trigger.tsx","code":"$37","html":"$38"},"glass":{"name":"glass.tsx","code":"$39","html":"$3a"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add dropdown-menu","shadcn":"npx shadcn@latest add https://scalarui.com/r/dropdown-menu.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":"$L3b","toolbar":"$L3c"}]}],["$L3d","$L3e","$L3f","$L40","$L41"]]}]

Dropdown Menus

Dropdown Menus

User Menu

Checkbox Items

Radio Items

Icon Trigger

Glass