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:Td8a,"use client"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { Collapsible as CollapsiblePrimitive } from "radix-ui"; import { createContext, useCallback, useContext, useState, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; const OpenContext = createContext(false); export function Collapsible({ open: openProp, defaultOpen = false, onOpenChange, ...props }: ComponentProps) { const [uncontrolled, setUncontrolled] = useState(defaultOpen); const open = openProp ?? uncontrolled; const setOpen = useCallback( (next: boolean) => { if (openProp === undefined) setUncontrolled(next); onOpenChange?.(next); }, [openProp, onOpenChange], ); return ( ); } export const CollapsibleTrigger = CollapsiblePrimitive.Trigger; /** Whether the surrounding Collapsible is open, for triggers that change their label or icon. */ export function useCollapsibleOpen() { return useContext(OpenContext); } export function CollapsibleContent({ className, children, ...props }: ComponentProps) { const open = useContext(OpenContext); return ( {open && (

{children}

)} ); } export interface CollapsibleTextProps extends ComponentProps<"div"> { /** Height shown while collapsed, in pixels. */ collapsedHeight?: number; defaultOpen?: boolean; moreLabel?: string; lessLabel?: string; } /** Long text clipped to a fixed height behind a fade, with a Show more / Show less toggle. */ export function CollapsibleText({ collapsedHeight = 72, defaultOpen = false, moreLabel = "Show more", lessLabel = "Show less", className, children, ...props }: CollapsibleTextProps) { const [open, setOpen] = useState(defaultOpen); return (

{children}

); } export default Collapsible; 2e:T88da,

"use client";

import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { Collapsible as CollapsiblePrimitive } from "radix-ui";
import { createContext, useCallback, useContext, useState, type ComponentProps } from "react";
import { cn } from "@/lib/utils";

const OpenContext = createContext(false);

export function Collapsible({ open: openProp, defaultOpen = false, onOpenChange, ...props }: ComponentProps<typeof CollapsiblePrimitive.Root>) {
  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
  const open = openProp ?? uncontrolled;
  const setOpen = useCallback(
    (next: boolean) => {
      if (openProp === undefined) setUncontrolled(next);
      onOpenChange?.(next);
    },
    [openProp, onOpenChange],
  );
  return (
    <OpenContext.Provider value={open}>
      <MotionConfig reducedMotion="user">
        <CollapsiblePrimitive.Root open={open} onOpenChange={setOpen} {...props} />
      </MotionConfig>
    </OpenContext.Provider>
  );
}

export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;

/** Whether the surrounding Collapsible is open, for triggers that change their label or icon. */
export function useCollapsibleOpen() {
  return useContext(OpenContext);
}

export function CollapsibleContent({ className, children, ...props }: ComponentProps<typeof CollapsiblePrimitive.Content>) {
  const open = useContext(OpenContext);
  return (
    <AnimatePresence initial={false}>
      {open && (
        <CollapsiblePrimitive.Content forceMount asChild {...props}>
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ height: { type: "spring", bounce: 0, duration: 0.32 }, opacity: { duration: 0.2 } }}
            className="overflow-hidden"
          >
            <div className={className}>{children}</div>
          </motion.div>
        </CollapsiblePrimitive.Content>
      )}
    </AnimatePresence>
  );
}

export interface CollapsibleTextProps extends ComponentProps<"div"> {
  /** Height shown while collapsed, in pixels. */
  collapsedHeight?: number;
  defaultOpen?: boolean;
  moreLabel?: string;
  lessLabel?: string;
}

/** Long text clipped to a fixed height behind a fade, with a Show more / Show less toggle. */
export function CollapsibleText({ collapsedHeight = 72, defaultOpen = false, moreLabel = "Show more", lessLabel = "Show less", className, children, ...props }: CollapsibleTextProps) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <MotionConfig reducedMotion="user">
      <div className={cn("relative", className)} {...props}>
        <motion.div
          initial={false}
          animate={{ height: open ? "auto" : collapsedHeight }}
          transition={{ type: "spring", bounce: 0, duration: 0.36 }}
          className="overflow-hidden"
          style={{ maskImage: open ? undefined : "linear-gradient(to bottom, black 45%, transparent)" }}
        >
          {children}
        </motion.div>
        <button
          type="button"
          aria-expanded={open}
          onClick={() => setOpen((o) => !o)}
          className="mt-2 text-[13px] font-medium text-neutral-950 underline-offset-4 outline-none hover:underline focus-visible:underline dark:text-white"
        >
          {open ? lessLabel : moreLabel}
        </button>
      </div>
    </MotionConfig>
  );
}

export default Collapsible;

2f:T729,"use client"; import { ChevronDown, GitBranch } from "lucide-react"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/scalar-ui/collapsible"; const branches = ["feat/billing-portal", "fix/webhook-retries", "chore/upgrade-next", "feat/branch-previews"]; const row = "flex items-center gap-2.5 rounded-xl px-3 py-2.5 font-mono text-[12.5px] text-neutral-700 ring-1 ring-inset ring-black/[0.07] dark:text-neutral-300 dark:ring-white/[0.08]"; export default function Demo() { return ( 4 active branches Show all Show less

{branches[0]}

{branches.slice(1).map((b) => (

{b}

))} ); } 30:T3596,

"use client";

import { ChevronDown, GitBranch } from "lucide-react";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/scalar-ui/collapsible";

const branches = ["feat/billing-portal", "fix/webhook-retries", "chore/upgrade-next", "feat/branch-previews"];

const row =
  "flex items-center gap-2.5 rounded-xl px-3 py-2.5 font-mono text-[12.5px] text-neutral-700 ring-1 ring-inset ring-black/[0.07] dark:text-neutral-300 dark:ring-white/[0.08]";

export default function Demo() {
  return (
    <Collapsible className="w-full max-w-[340px] space-y-2">
      <CollapsibleTrigger className="group flex h-10 w-full items-center justify-between rounded-xl px-3 text-left outline-none transition-colors hover:bg-neutral-950/[0.04] focus-visible:bg-neutral-950/[0.04] dark:hover:bg-white/[0.05] dark:focus-visible:bg-white/[0.05]">
        <span className="text-[13.5px] font-medium leading-5 text-neutral-950 dark:text-white">4 active branches</span>
        <span className="flex items-center gap-1 text-[12.5px] leading-5 text-neutral-500 dark:text-neutral-400">
          <span className="group-data-[state=open]:hidden">Show all</span>
          <span className="hidden group-data-[state=open]:inline">Show less</span>
          <ChevronDown className="size-3.5 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180" />
        </span>
      </CollapsibleTrigger>
      <div className={row}>
        <GitBranch className="size-3.5 text-neutral-400" />
        {branches[0]}
      </div>
      <CollapsibleContent className="space-y-2">
        {branches.slice(1).map((b) => (
          <div key={b} className={row}>
            <GitBranch className="size-3.5 text-neutral-400" />
            {b}
          </div>
        ))}
      </CollapsibleContent>
    </Collapsible>
  );
}

31:T61b,"use client"; import { ChevronRight, FileText, Folder, ImageIcon, Music } from "lucide-react"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/scalar-ui/collapsible"; const link = "flex h-8 items-center gap-2.5 rounded-[10px] px-2.5 text-[13.5px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-950 dark:text-neutral-400 dark:hover:bg-white/[0.06] dark:hover:text-white"; export default function Example() { return ( ); } 32:T2e24,

"use client";

import { ChevronRight, FileText, Folder, ImageIcon, Music } from "lucide-react";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/scalar-ui/collapsible";

const link =
  "flex h-8 items-center gap-2.5 rounded-[10px] px-2.5 text-[13.5px] text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-950 dark:text-neutral-400 dark:hover:bg-white/[0.06] dark:hover:text-white";

export default function Example() {
  return (
    <nav className="w-56 rounded-2xl bg-white p-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]">
      <Collapsible defaultOpen>
        <CollapsibleTrigger className={`${link} group w-full font-medium text-neutral-950 outline-none dark:text-white`}>
          <ChevronRight className="size-3.5 text-neutral-400 transition-transform duration-200 group-data-[state=open]:rotate-90" />
          <Folder className="size-4" />
          Library
        </CollapsibleTrigger>
        <CollapsibleContent className="ml-[18px] border-l border-black/[0.07] pl-2 dark:border-white/[0.08]">
          <a href="#docs" className={link}>
            <FileText className="size-4" />
            Documents
          </a>
          <a href="#images" className={link}>
            <ImageIcon className="size-4" />
            Images
          </a>
          <a href="#music" className={link}>
            <Music className="size-4" />
            Music
          </a>
        </CollapsibleContent>
      </Collapsible>
    </nav>
  );
}

33:T1035,

import { CollapsibleText } from "@/components/scalar-ui/collapsible";

export default function Example() {
  return (
    <CollapsibleText className="max-w-[420px] text-[14px] leading-relaxed text-neutral-600 dark:text-neutral-400">
      <p>
        Aurora deploys every push to its own preview URL and promotes a build to production with one click. Logs stream live
        while the build runs, and failed steps link straight to the line that broke.
      </p>
      <p className="mt-3">
        Environment variables are scoped per branch, so preview builds never touch production secrets. Rollbacks are instant:
        the previous build stays warm for an hour after every promotion.
      </p>
    </CollapsibleText>
  );
}

34:T766,"use client"; import { ChevronDown } from "lucide-react"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, useCollapsibleOpen } from "@/components/scalar-ui/collapsible"; const input = "mt-1.5 block h-9 w-full rounded-[10px] bg-neutral-50 px-3 font-mono text-[12.5px] text-neutral-900 outline-none ring-1 ring-inset ring-black/[0.08] focus:ring-neutral-400 dark:bg-white/[0.04] dark:text-white dark:ring-white/[0.1]"; function Toggle() { const open = useCollapsibleOpen(); return ( {open ? "Hide" : "Show"} advanced options ); } export default function Example() { return (

Repository Build command Output directory

); } 35:T354b,

"use client";

import { ChevronDown } from "lucide-react";
import { Collapsible, CollapsibleContent, CollapsibleTrigger, useCollapsibleOpen } from "@/components/scalar-ui/collapsible";

const input =
  "mt-1.5 block h-9 w-full rounded-[10px] bg-neutral-50 px-3 font-mono text-[12.5px] text-neutral-900 outline-none ring-1 ring-inset ring-black/[0.08] focus:ring-neutral-400 dark:bg-white/[0.04] dark:text-white dark:ring-white/[0.1]";

function Toggle() {
  const open = useCollapsibleOpen();
  return (
    <CollapsibleTrigger className="flex items-center gap-1.5 text-[13px] font-medium text-neutral-600 outline-none hover:text-neutral-950 dark:text-neutral-400 dark:hover:text-white">
      {open ? "Hide" : "Show"} advanced options
      <ChevronDown className={`size-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""}`} />
    </CollapsibleTrigger>
  );
}

export default function Example() {
  return (
    <div className="w-full max-w-[360px] rounded-[22px] bg-white p-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]">
      <label className="block text-[12.5px] font-medium text-neutral-600 dark:text-neutral-300">
        Repository
        <input className={input} defaultValue="aurora/web" />
      </label>
      <Collapsible className="mt-4">
        <Toggle />
        <CollapsibleContent className="space-y-3 pt-3">
          <label className="block text-[12.5px] font-medium text-neutral-600 dark:text-neutral-300">
            Build command
            <input className={input} defaultValue="pnpm build" />
          </label>
          <label className="block text-[12.5px] font-medium text-neutral-600 dark:text-neutral-300">
            Output directory
            <input className={input} defaultValue=".next" />
          </label>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}

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

\n Aurora deploys every push to its own preview URL and promotes a build to production with one click. Logs stream live\n while the build runs, and failed steps link straight to the line that broke.\n

\n Environment variables are scoped per branch, so preview builds never touch production secrets. Rollbacks are instant:\n the previous build stays warm for an hour after every promotion.\n

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

Collapsibles

Collapsibles

Sidebar Section

Show More

Advanced Options