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:T18d8,"use client"; import { Check, ChevronDown, ChevronUp } from "lucide-react"; import { Select as SelectPrimitive } from "radix-ui"; import type { ComponentProps, ReactNode } from "react"; import { cn } from "@/lib/utils"; export const Select = SelectPrimitive.Root; export const SelectGroup = SelectPrimitive.Group; export const SelectValue = SelectPrimitive.Value; const TRIGGER = { outline: "bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-inset ring-black/[0.1] hover:ring-black/[0.16] data-[state=open]:ring-2 data-[state=open]:ring-neutral-950/20 focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:bg-white/[0.03] dark:shadow-none dark:ring-white/[0.12] dark:hover:ring-white/[0.2] dark:data-[state=open]:ring-white/25 dark:focus-visible:ring-white/25", soft: "bg-neutral-100 hover:bg-neutral-200/70 data-[state=open]:bg-neutral-200/70 focus-visible:bg-neutral-200/70 dark:bg-white/[0.06] dark:hover:bg-white/[0.09] dark:data-[state=open]:bg-white/[0.09]", ghost: "hover:bg-neutral-950/[0.05] data-[state=open]:bg-neutral-950/[0.05] focus-visible:bg-neutral-950/[0.05] dark:hover:bg-white/[0.08] dark:data-[state=open]:bg-white/[0.08]", } as const; const SIZES = { sm: "h-8 gap-1.5 rounded-[10px] px-2.5 text-[13px] [&_svg]:size-3.5", md: "h-10 gap-2 rounded-xl px-3 text-sm [&_svg]:size-4", } as const; export interface SelectTriggerProps extends ComponentProps { /** outline: a bordered field · soft: filled · ghost: no fill until hover, for toolbars. */ variant?: keyof typeof TRIGGER; size?: keyof typeof SIZES; invalid?: boolean; } export function SelectTrigger({ variant = "outline", size = "md", invalid, className, children, ...props }: SelectTriggerProps) { return ( span]:flex [&>span]:min-w-0 [&>span]:items-center [&>span]:gap-2 [&>span]:truncate", TRIGGER[variant], SIZES[size], variant === "ghost" && "w-fit", invalid && "ring-1 ring-red-500/50 dark:ring-red-400/50", className, )} {...props} > {children} ); } const SCROLL = "flex h-6 cursor-default items-center justify-center text-neutral-400 [&_svg]:size-3.5"; export function SelectContent({ className, children, position = "popper", sideOffset = 6, ...props }: ComponentProps) { return ( {children} ); } export interface SelectItemProps extends ComponentProps { /** Before the label, here and in the trigger. */ icon?: ReactNode; /** A second line under the label, shown in the list only. */ description?: ReactNode; } export function SelectItem({ icon, description, className, children, ...props }: SelectItemProps) { return ( {icon && {icon}} {children} {description && {description}} ); } export function SelectLabel({ className, ...props }: ComponentProps) { return ; } export function SelectSeparator({ className, ...props }: ComponentProps) { return ; } export default Select; 2e:Taaa1,

"use client";

import { Check, ChevronDown, ChevronUp } from "lucide-react";
import { Select as SelectPrimitive } from "radix-ui";
import type { ComponentProps, ReactNode } from "react";
import { cn } from "@/lib/utils";

export const Select = SelectPrimitive.Root;
export const SelectGroup = SelectPrimitive.Group;
export const SelectValue = SelectPrimitive.Value;

const TRIGGER = {
  outline:
    "bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-inset ring-black/[0.1] hover:ring-black/[0.16] data-[state=open]:ring-2 data-[state=open]:ring-neutral-950/20 focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:bg-white/[0.03] dark:shadow-none dark:ring-white/[0.12] dark:hover:ring-white/[0.2] dark:data-[state=open]:ring-white/25 dark:focus-visible:ring-white/25",
  soft: "bg-neutral-100 hover:bg-neutral-200/70 data-[state=open]:bg-neutral-200/70 focus-visible:bg-neutral-200/70 dark:bg-white/[0.06] dark:hover:bg-white/[0.09] dark:data-[state=open]:bg-white/[0.09]",
  ghost: "hover:bg-neutral-950/[0.05] data-[state=open]:bg-neutral-950/[0.05] focus-visible:bg-neutral-950/[0.05] dark:hover:bg-white/[0.08] dark:data-[state=open]:bg-white/[0.08]",
} as const;

const SIZES = {
  sm: "h-8 gap-1.5 rounded-[10px] px-2.5 text-[13px] [&_svg]:size-3.5",
  md: "h-10 gap-2 rounded-xl px-3 text-sm [&_svg]:size-4",
} as const;

export interface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger> {
  /** outline: a bordered field · soft: filled · ghost: no fill until hover, for toolbars. */
  variant?: keyof typeof TRIGGER;
  size?: keyof typeof SIZES;
  invalid?: boolean;
}

export function SelectTrigger({ variant = "outline", size = "md", invalid, className, children, ...props }: SelectTriggerProps) {
  return (
    <SelectPrimitive.Trigger
      aria-invalid={invalid || undefined}
      className={cn(
        "flex w-full items-center justify-between text-left text-neutral-950 outline-none transition-[box-shadow,background-color] duration-150 dark:text-white",
        "data-placeholder:text-neutral-400 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:flex [&>span]:min-w-0 [&>span]:items-center [&>span]:gap-2 [&>span]:truncate",
        TRIGGER[variant],
        SIZES[size],
        variant === "ghost" && "w-fit",
        invalid && "ring-1 ring-red-500/50 dark:ring-red-400/50",
        className,
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <ChevronDown className="shrink-0 text-neutral-400 transition-transform duration-200 in-data-[state=open]:rotate-180" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  );
}

const SCROLL = "flex h-6 cursor-default items-center justify-center text-neutral-400 [&_svg]:size-3.5";

export function SelectContent({ className, children, position = "popper", sideOffset = 6, ...props }: ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        position={position}
        sideOffset={sideOffset}
        className={cn(
          "relative z-50 max-h-(--radix-select-content-available-height) min-w-40 origin-(--radix-select-content-transform-origin) overflow-hidden rounded-2xl bg-white text-neutral-950",
          "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:shadow-[0_12px_32px_-8px_rgb(0_0_0/0.7)] dark:ring-white/[0.1]",
          "transition-[opacity,scale,translate] duration-200 ease-[cubic-bezier(0.2,0.8,0.2,1)] starting:-translate-y-1 starting:scale-[0.97] starting:opacity-0",
          position === "popper" && "w-(--radix-select-trigger-width)",
          className,
        )}
        {...props}
      >
        <SelectPrimitive.ScrollUpButton className={SCROLL}>
          <ChevronUp />
        </SelectPrimitive.ScrollUpButton>
        <SelectPrimitive.Viewport className="p-1.5">{children}</SelectPrimitive.Viewport>
        <SelectPrimitive.ScrollDownButton className={SCROLL}>
          <ChevronDown />
        </SelectPrimitive.ScrollDownButton>
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  );
}

export interface SelectItemProps extends ComponentProps<typeof SelectPrimitive.Item> {
  /** Before the label, here and in the trigger. */
  icon?: ReactNode;
  /** A second line under the label, shown in the list only. */
  description?: ReactNode;
}

export function SelectItem({ icon, description, className, children, ...props }: SelectItemProps) {
  return (
    <SelectPrimitive.Item
      className={cn(
        "relative flex min-h-9 cursor-default select-none items-center gap-2.5 rounded-[10px] py-1.5 pl-2.5 pr-8 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",
        className,
      )}
      {...props}
    >
      <span className="min-w-0 flex-1">
        <SelectPrimitive.ItemText>
          <span className="flex items-center gap-2.5">
            {icon && <span className="flex text-neutral-500 dark:text-neutral-400">{icon}</span>}
            <span className="truncate">{children}</span>
          </span>
        </SelectPrimitive.ItemText>
        {description && <span className={cn("block truncate text-[12px] text-neutral-500 dark:text-neutral-400", icon && "pl-[26px]")}>{description}</span>}
      </span>
      <SelectPrimitive.ItemIndicator className="absolute right-2.5 flex">
        <Check className="text-neutral-950 dark:text-white" />
      </SelectPrimitive.ItemIndicator>
    </SelectPrimitive.Item>
  );
}

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

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

export default Select;

2f:T27c1,

import { CircleCheck, CircleDashed, CircleDot, CircleX } from "lucide-react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/scalar-ui/select";

export default function Demo() {
  return (
    <div className="w-full max-w-[260px]">
      <p className="mb-1.5 text-[13px] font-medium text-neutral-800 dark:text-neutral-200">Status</p>
      <Select defaultValue="progress">
        <SelectTrigger aria-label="Status">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="backlog" icon={<CircleDashed />}>Backlog</SelectItem>
          <SelectItem value="progress" icon={<CircleDot className="text-amber-500" />}>In progress</SelectItem>
          <SelectItem value="done" icon={<CircleCheck className="text-emerald-500" />}>Done</SelectItem>
          <SelectItem value="canceled" icon={<CircleX />}>Canceled</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}

30:T1879,

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/scalar-ui/select";

export default function Example() {
  return (
    <Select>
      <SelectTrigger aria-label="Framework" className="max-w-[240px]">
        <SelectValue placeholder="Select a framework" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="next">Next.js</SelectItem>
        <SelectItem value="remix">Remix</SelectItem>
        <SelectItem value="astro">Astro</SelectItem>
        <SelectItem value="vite">Vite</SelectItem>
      </SelectContent>
    </Select>
  );
}

31:T254e,

import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "@/components/scalar-ui/select";

export default function Example() {
  return (
    <Select defaultValue="fra">
      <SelectTrigger aria-label="Region" className="max-w-[260px]">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Europe</SelectLabel>
          <SelectItem value="fra">Frankfurt</SelectItem>
          <SelectItem value="lhr">London</SelectItem>
          <SelectItem value="cdg">Paris</SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>Americas</SelectLabel>
          <SelectItem value="iad">Virginia</SelectItem>
          <SelectItem value="sfo">San Francisco</SelectItem>
          <SelectItem value="gru">São Paulo</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

32:T1d36,

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/scalar-ui/select";

export default function Example() {
  return (
    <Select defaultValue="editor">
      <SelectTrigger aria-label="Role" className="max-w-[260px]">
        <SelectValue />
      </SelectTrigger>
      <SelectContent className="w-72">
        <SelectItem value="admin" description="Full access, billing and members">Admin</SelectItem>
        <SelectItem value="editor" description="Create and edit projects">Editor</SelectItem>
        <SelectItem value="viewer" description="Read-only access">Viewer</SelectItem>
        <SelectItem value="billing" description="Invoices and payment methods" disabled>Billing (upgrade)</SelectItem>
      </SelectContent>
    </Select>
  );
}

33:T422,import { ArrowDownWideNarrow } from "lucide-react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/scalar-ui/select"; const sorts = [ ["recent", "Most recent"], ["name", "Name"], ["size", "Size"], ]; export default function Example() { return (

{(["outline", "soft", "ghost"] as const).map((variant) => ( ))}

); } 34:T30c4,

import { ArrowDownWideNarrow } from "lucide-react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/scalar-ui/select";

const sorts = [
  ["recent", "Most recent"],
  ["name", "Name"],
  ["size", "Size"],
];

export default function Example() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      {(["outline", "soft", "ghost"] as const).map((variant) => (
        <Select key={variant} defaultValue="recent">
          <SelectTrigger variant={variant} size="sm" aria-label={`Sort (${variant})`} className="w-40">
            <span className="flex items-center gap-2">
              <ArrowDownWideNarrow className="text-neutral-400" />
              <SelectValue />
            </span>
          </SelectTrigger>
          <SelectContent>
            {sorts.map(([value, label]) => (
              <SelectItem key={value} value={value}>
                {label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      ))}
    </div>
  );
}

35:T2684,

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/scalar-ui/select";

const countries = ["Argentina", "Australia", "Austria", "Belgium", "Brazil", "Canada", "Chile", "Denmark", "Finland", "France", "Germany", "India", "Ireland", "Italy", "Japan", "Mexico", "Netherlands", "Norway", "Portugal", "Spain", "Sweden", "Switzerland", "United Kingdom", "United States"];

export default function Example() {
  return (
    <Select defaultValue="Portugal">
      <SelectTrigger aria-label="Country" className="max-w-[240px]">
        <SelectValue />
      </SelectTrigger>
      <SelectContent className="max-h-64">
        {countries.map((c) => (
          <SelectItem key={c} value={c}>
            {c}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

36:T27e5,

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/scalar-ui/select";

export default function Example() {
  return (
    <div className="w-full max-w-[240px] space-y-3">
      <div>
        <Select>
          <SelectTrigger invalid aria-label="Plan" aria-describedby="plan-error">
            <SelectValue placeholder="Choose a plan" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="pro">Pro</SelectItem>
            <SelectItem value="team">Team</SelectItem>
          </SelectContent>
        </Select>
        <p id="plan-error" className="mt-1.5 text-[12.5px] text-red-600 dark:text-red-400">
          Choose a plan to continue.
        </p>
      </div>
      <Select disabled defaultValue="pro">
        <SelectTrigger aria-label="Plan (locked)">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="pro">Pro</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}

29:["$","section","select",{"id":"select","aria-labelledby":"select-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":"select-title","className":"sr-only","children":"Select"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"select","gated":{"unlocked":true,"files":[{"name":"select.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"import { CircleCheck, CircleDashed, CircleDot, CircleX } from \"lucide-react\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/scalar-ui/select\";\n\nexport default function Demo() {\n return (\n

Status

\n \n

\n );\n}\n","html":"$2f"}],"examples":{"default":{"name":"default.tsx","code":"import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/scalar-ui/select\";\n\nexport default function Example() {\n return (\n \n );\n}\n","html":"$30"},"grouped":{"name":"grouped.tsx","code":"import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from \"@/components/scalar-ui/select\";\n\nexport default function Example() {\n return (\n \n );\n}\n","html":"$31"},"with-descriptions":{"name":"with-descriptions.tsx","code":"import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/scalar-ui/select\";\n\nexport default function Example() {\n return (\n \n );\n}\n","html":"$32"},"variants":{"name":"variants.tsx","code":"$33","html":"$34"},"long-list":{"name":"long-list.tsx","code":"import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/scalar-ui/select\";\n\nconst countries = [\"Argentina\", \"Australia\", \"Austria\", \"Belgium\", \"Brazil\", \"Canada\", \"Chile\", \"Denmark\", \"Finland\", \"France\", \"Germany\", \"India\", \"Ireland\", \"Italy\", \"Japan\", \"Mexico\", \"Netherlands\", \"Norway\", \"Portugal\", \"Spain\", \"Sweden\", \"Switzerland\", \"United Kingdom\", \"United States\"];\n\nexport default function Example() {\n return (\n \n );\n}\n","html":"$35"},"invalid":{"name":"invalid.tsx","code":"import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/scalar-ui/select\";\n\nexport default function Example() {\n return (\n

\n \n

\n Choose a plan to continue.\n

\n \n

\n );\n}\n","html":"$36"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add select","shadcn":"npx shadcn@latest add https://scalarui.com/r/select.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 lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L37","toolbar":"$L38"}]}],["$L39","$L3a","$L3b","$L3c","$L3d","$L3e"]]}]

Selects

Selects

Default

Grouped

With Descriptions

Variants

Long List

Invalid and Disabled