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:T8fc,"use client"; import { Separator as SeparatorPrimitive } from "radix-ui"; import type { ComponentProps, ReactNode } from "react"; import { cn } from "@/lib/utils"; const LINE = { solid: "bg-black/[0.08] dark:bg-white/[0.1]", dashed: "bg-[repeating-linear-gradient(to_right,rgb(0_0_0/0.16)_0_4px,transparent_4px_8px)] dark:bg-[repeating-linear-gradient(to_right,rgb(255_255_255/0.18)_0_4px,transparent_4px_8px)]", fade: "bg-gradient-to-r from-transparent via-black/[0.12] to-transparent dark:via-white/[0.14]", } as const; const VERTICAL = { solid: "bg-black/[0.08] dark:bg-white/[0.1]", dashed: "bg-[repeating-linear-gradient(to_bottom,rgb(0_0_0/0.16)_0_4px,transparent_4px_8px)] dark:bg-[repeating-linear-gradient(to_bottom,rgb(255_255_255/0.18)_0_4px,transparent_4px_8px)]", fade: "bg-gradient-to-b from-transparent via-black/[0.12] to-transparent dark:via-white/[0.14]", } as const; export interface SeparatorProps extends ComponentProps { /** solid (default), dashed, or fade: a line that fades out at both ends. */ variant?: keyof typeof LINE; /** Text or an icon in the middle of a horizontal line, e.g. "or". */ label?: ReactNode; } export function Separator({ orientation = "horizontal", decorative = true, variant = "solid", label, className, ...props }: SeparatorProps) { if (label && orientation === "horizontal") { return (

{label}

); } return ( ); } export default Separator; 2e:T487b,

"use client";

import { Separator as SeparatorPrimitive } from "radix-ui";
import type { ComponentProps, ReactNode } from "react";
import { cn } from "@/lib/utils";

const LINE = {
  solid: "bg-black/[0.08] dark:bg-white/[0.1]",
  dashed: "bg-[repeating-linear-gradient(to_right,rgb(0_0_0/0.16)_0_4px,transparent_4px_8px)] dark:bg-[repeating-linear-gradient(to_right,rgb(255_255_255/0.18)_0_4px,transparent_4px_8px)]",
  fade: "bg-gradient-to-r from-transparent via-black/[0.12] to-transparent dark:via-white/[0.14]",
} as const;

const VERTICAL = {
  solid: "bg-black/[0.08] dark:bg-white/[0.1]",
  dashed: "bg-[repeating-linear-gradient(to_bottom,rgb(0_0_0/0.16)_0_4px,transparent_4px_8px)] dark:bg-[repeating-linear-gradient(to_bottom,rgb(255_255_255/0.18)_0_4px,transparent_4px_8px)]",
  fade: "bg-gradient-to-b from-transparent via-black/[0.12] to-transparent dark:via-white/[0.14]",
} as const;

export interface SeparatorProps extends ComponentProps<typeof SeparatorPrimitive.Root> {
  /** solid (default), dashed, or fade: a line that fades out at both ends. */
  variant?: keyof typeof LINE;
  /** Text or an icon in the middle of a horizontal line, e.g. "or". */
  label?: ReactNode;
}

export function Separator({ orientation = "horizontal", decorative = true, variant = "solid", label, className, ...props }: SeparatorProps) {
  if (label && orientation === "horizontal") {
    return (
      <div role={decorative ? "none" : "separator"} className={cn("flex w-full items-center gap-3", className)}>
        <span className={cn("h-px flex-1", variant === "fade" ? "bg-gradient-to-r from-transparent to-black/[0.1] dark:to-white/[0.12]" : LINE[variant])} />
        <span className="shrink-0 text-[12px] font-medium uppercase tracking-[0.06em] text-neutral-400 [&_svg]:size-3.5">{label}</span>
        <span className={cn("h-px flex-1", variant === "fade" ? "bg-gradient-to-l from-transparent to-black/[0.1] dark:to-white/[0.12]" : LINE[variant])} />
      </div>
    );
  }
  return (
    <SeparatorPrimitive.Root
      orientation={orientation}
      decorative={decorative}
      className={cn("shrink-0", orientation === "horizontal" ? cn("h-px w-full", LINE[variant]) : cn("w-px self-stretch", VERTICAL[variant]), className)}
      {...props}
    />
  );
}

export default Separator;

2f:T1a5f,

import { Separator } from "@/components/scalar-ui/separator";

export default function Demo() {
  return (
    <div className="w-full max-w-[360px]">
      <p className="text-[15px] font-semibold tracking-[-0.015em] text-neutral-950 dark:text-white">Scalar UI</p>
      <p className="mt-1 text-[13.5px] text-neutral-500 dark:text-neutral-400">App primitives built on Radix.</p>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-4 text-[13.5px] text-neutral-600 dark:text-neutral-300">
        <span>Docs</span>
        <Separator orientation="vertical" />
        <span>Components</span>
        <Separator orientation="vertical" />
        <span>Changelog</span>
      </div>
    </div>
  );
}

30:T4e0,import { Bold, Italic, Link2, List, ListOrdered, Underline } from "lucide-react"; import { Separator } from "@/components/scalar-ui/separator"; const tool = "flex size-8 items-center justify-center rounded-lg text-neutral-500 transition-colors hover:bg-neutral-950/[0.05] hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-white/[0.08] dark:hover:text-white"; export default function Example() { return (

{[Bold, Italic, Underline].map((Icon, i) => ( ))} {[List, ListOrdered].map((Icon, i) => ( ))}

); } 31:T2f61,

import { Bold, Italic, Link2, List, ListOrdered, Underline } from "lucide-react";
import { Separator } from "@/components/scalar-ui/separator";

const tool = "flex size-8 items-center justify-center rounded-lg text-neutral-500 transition-colors hover:bg-neutral-950/[0.05] hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-white/[0.08] dark:hover:text-white";

export default function Example() {
  return (
    <div className="flex h-11 items-center gap-1 rounded-2xl bg-white px-1.5 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]">
      {[Bold, Italic, Underline].map((Icon, i) => (
        <button key={i} type="button" aria-label="Format" className={tool}>
          <Icon className="size-4" />
        </button>
      ))}
      <Separator orientation="vertical" className="mx-1 my-2.5" />
      {[List, ListOrdered].map((Icon, i) => (
        <button key={i} type="button" aria-label="List" className={tool}>
          <Icon className="size-4" />
        </button>
      ))}
      <Separator orientation="vertical" className="mx-1 my-2.5" />
      <button type="button" aria-label="Link" className={tool}>
        <Link2 className="size-4" />
      </button>
    </div>
  );
}

32:T1621,

import { Separator } from "@/components/scalar-ui/separator";

const button =
  "flex h-10 w-full items-center justify-center rounded-xl bg-white text-[13.5px] font-medium text-neutral-800 ring-1 ring-inset ring-black/[0.1] transition-colors hover:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]";

export default function Example() {
  return (
    <div className="w-full max-w-[320px] space-y-4">
      <button type="button" className={button}>
        Continue with Google
      </button>
      <Separator label="or" />
      <input
        placeholder="you@company.com"
        aria-label="Email"
        className="h-10 w-full rounded-xl bg-white px-3 text-sm outline-none ring-1 ring-inset ring-black/[0.1] placeholder:text-neutral-400 focus:ring-2 focus:ring-neutral-950/20 dark:bg-white/[0.03] dark:text-white dark:ring-white/[0.12]"
      />
    </div>
  );
}

33:T177b,

import { Separator } from "@/components/scalar-ui/separator";

export default function Example() {
  return (
    <div className="w-full max-w-[360px] space-y-6 text-[12px] text-neutral-500 dark:text-neutral-400">
      {(["solid", "dashed", "fade"] as const).map((variant) => (
        <div key={variant} className="space-y-2">
          <p className="capitalize">{variant}</p>
          <Separator variant={variant} />
        </div>
      ))}
    </div>
  );
}

34:T2601,

import { Fragment } from "react";
import { Separator } from "@/components/scalar-ui/separator";

const rows = [
  ["Plan", "Pro"],
  ["Billing", "Yearly"],
  ["Next invoice", "Nov 1, 2026"],
  ["Amount", "$192.00"],
];

export default function Example() {
  return (
    <div className="w-full max-w-[340px] rounded-[22px] bg-white px-5 py-2 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]">
      {rows.map(([k, v], i) => (
        <Fragment key={k}>
          {i > 0 && <Separator variant="dashed" />}
          <div className="flex justify-between py-3 text-[13.5px]">
            <span className="text-neutral-500 dark:text-neutral-400">{k}</span>
            <span className="font-medium text-neutral-950 dark:text-white">{v}</span>
          </div>
        </Fragment>
      ))}
    </div>
  );
}

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

Scalar UI

App primitives built on Radix.

\n \n

\n Docs\n \n Components\n \n Changelog\n

\n );\n}\n","html":"$2f"}],"examples":{"vertical":{"name":"vertical.tsx","code":"$30","html":"$31"},"with-label":{"name":"with-label.tsx","code":"import { Separator } from \"@/components/scalar-ui/separator\";\n\nconst button =\n \"flex h-10 w-full items-center justify-center rounded-xl bg-white text-[13.5px] font-medium text-neutral-800 ring-1 ring-inset ring-black/[0.1] transition-colors hover:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]\";\n\nexport default function Example() {\n return (\n

\n \n \n \n

\n );\n}\n","html":"$32"},"variants":{"name":"variants.tsx","code":"import { Separator } from \"@/components/scalar-ui/separator\";\n\nexport default function Example() {\n return (\n

\n {([\"solid\", \"dashed\", \"fade\"] as const).map((variant) => (\n

{variant}

\n \n

\n ))}\n

\n );\n}\n","html":"$33"},"in-a-list":{"name":"in-a-list.tsx","code":"import { Fragment } from \"react\";\nimport { Separator } from \"@/components/scalar-ui/separator\";\n\nconst rows = [\n [\"Plan\", \"Pro\"],\n [\"Billing\", \"Yearly\"],\n [\"Next invoice\", \"Nov 1, 2026\"],\n [\"Amount\", \"$192.00\"],\n];\n\nexport default function Example() {\n return (\n

\n {rows.map(([k, v], i) => (\n \n {i > 0 && }\n

\n {k}\n {v}\n

\n \n ))}\n

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

Separators

Separators

Vertical

With Label

Variants

In a List