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:T147c,"use client"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { ChevronDown, Plus } from "lucide-react"; import { Accordion as AccordionPrimitive } from "radix-ui"; import { createContext, useContext, useState, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; type Variant = "plain" | "bordered" | "separated"; type Value = string | string[]; const AccordionContext = createContext<{ variant: Variant; icon: "chevron" | "plus"; isOpen: (value: string) => boolean }>({ variant: "plain", icon: "chevron", isOpen: () => false, }); const ItemContext = createContext(""); const ROOT = { plain: "divide-y divide-black/[0.07] dark:divide-white/[0.08]", bordered: "divide-y divide-black/[0.07] overflow-hidden rounded-2xl bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.07] dark:divide-white/[0.08] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]", separated: "flex flex-col gap-2", } as const; const ITEM = { plain: "", bordered: "px-4", separated: "rounded-2xl bg-white px-4 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.07] transition-shadow data-[state=open]:shadow-[0_1px_2px_rgb(0_0_0/0.04),0_8px_24px_-12px_rgb(0_0_0/0.14)] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]", } as const; export type AccordionProps = ComponentProps & { /** plain: dividers only · bordered: one card with dividers · separated: a card per item. */ variant?: Variant; /** chevron rotates; plus turns into a cross. */ icon?: "chevron" | "plus"; }; export function Accordion({ variant = "plain", icon = "chevron", className, ...props }: AccordionProps) { const { type, value: valueProp, defaultValue, onValueChange, ...rest } = props as typeof props & { value?: Value; defaultValue?: Value; onValueChange?: (value: Value) => void; }; const single = type === "single"; const [uncontrolled, setUncontrolled] = useState(defaultValue ?? (single ? "" : [])); const value = valueProp ?? uncontrolled; const change = (next: Value) => { if (valueProp === undefined) setUncontrolled(next); onValueChange?.(next); }; const isOpen = (v: string) => (Array.isArray(value) ? value.includes(v) : value === v); const root = { ...rest, type, value, onValueChange: change } as ComponentProps; return ( ); } export function AccordionItem({ value, className, ...props }: ComponentProps) { const { variant } = useContext(AccordionContext); return ( ); } export function AccordionTrigger({ className, children, ...props }: ComponentProps) { const { icon } = useContext(AccordionContext); return ( svg]:shrink-0", className, )} {...props} > {children} {icon === "plus" ? ( ) : ( )} ); } export function AccordionContent({ className, children, ...props }: ComponentProps) { const { isOpen } = useContext(AccordionContext); const value = useContext(ItemContext); return ( {isOpen(value) && (

{children}

)} ); } export default Accordion; 2e:Tbb6c,

"use client";

import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { ChevronDown, Plus } from "lucide-react";
import { Accordion as AccordionPrimitive } from "radix-ui";
import { createContext, useContext, useState, type ComponentProps } from "react";
import { cn } from "@/lib/utils";

type Variant = "plain" | "bordered" | "separated";
type Value = string | string[];

const AccordionContext = createContext<{ variant: Variant; icon: "chevron" | "plus"; isOpen: (value: string) => boolean }>({
  variant: "plain",
  icon: "chevron",
  isOpen: () => false,
});
const ItemContext = createContext("");

const ROOT = {
  plain: "divide-y divide-black/[0.07] dark:divide-white/[0.08]",
  bordered:
    "divide-y divide-black/[0.07] overflow-hidden rounded-2xl bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.07] dark:divide-white/[0.08] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]",
  separated: "flex flex-col gap-2",
} as const;

const ITEM = {
  plain: "",
  bordered: "px-4",
  separated:
    "rounded-2xl bg-white px-4 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.07] transition-shadow data-[state=open]:shadow-[0_1px_2px_rgb(0_0_0/0.04),0_8px_24px_-12px_rgb(0_0_0/0.14)] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]",
} as const;

export type AccordionProps = ComponentProps<typeof AccordionPrimitive.Root> & {
  /** plain: dividers only · bordered: one card with dividers · separated: a card per item. */
  variant?: Variant;
  /** chevron rotates; plus turns into a cross. */
  icon?: "chevron" | "plus";
};

export function Accordion({ variant = "plain", icon = "chevron", className, ...props }: AccordionProps) {
  const { type, value: valueProp, defaultValue, onValueChange, ...rest } = props as typeof props & {
    value?: Value;
    defaultValue?: Value;
    onValueChange?: (value: Value) => void;
  };
  const single = type === "single";
  const [uncontrolled, setUncontrolled] = useState<Value>(defaultValue ?? (single ? "" : []));
  const value = valueProp ?? uncontrolled;
  const change = (next: Value) => {
    if (valueProp === undefined) setUncontrolled(next);
    onValueChange?.(next);
  };
  const isOpen = (v: string) => (Array.isArray(value) ? value.includes(v) : value === v);
  const root = { ...rest, type, value, onValueChange: change } as ComponentProps<typeof AccordionPrimitive.Root>;

  return (
    <AccordionContext.Provider value={{ variant, icon, isOpen }}>
      <MotionConfig reducedMotion="user">
        <AccordionPrimitive.Root {...root} className={cn("w-full", ROOT[variant], className)} />
      </MotionConfig>
    </AccordionContext.Provider>
  );
}

export function AccordionItem({ value, className, ...props }: ComponentProps<typeof AccordionPrimitive.Item>) {
  const { variant } = useContext(AccordionContext);
  return (
    <ItemContext.Provider value={value}>
      <AccordionPrimitive.Item value={value} className={cn(ITEM[variant], className)} {...props} />
    </ItemContext.Provider>
  );
}

export function AccordionTrigger({ className, children, ...props }: ComponentProps<typeof AccordionPrimitive.Trigger>) {
  const { icon } = useContext(AccordionContext);
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        className={cn(
          "group flex flex-1 items-center justify-between gap-4 py-4 text-left text-[14.5px] font-medium tracking-[-0.01em] text-neutral-950 outline-none transition-colors",
          "hover:text-neutral-700 focus-visible:text-neutral-600 disabled:pointer-events-none disabled:opacity-40 dark:text-white dark:hover:text-neutral-300 [&>svg]:shrink-0",
          className,
        )}
        {...props}
      >
        <span className="flex items-center gap-3 [&_svg]:size-4 [&_svg]:text-neutral-500">{children}</span>
        {icon === "plus" ? (
          <Plus className="size-4 text-neutral-400 transition-transform duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] group-data-[state=open]:rotate-45" />
        ) : (
          <ChevronDown className="size-4 text-neutral-400 transition-transform duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] group-data-[state=open]:rotate-180" />
        )}
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  );
}

export function AccordionContent({ className, children, ...props }: ComponentProps<typeof AccordionPrimitive.Content>) {
  const { isOpen } = useContext(AccordionContext);
  const value = useContext(ItemContext);
  return (
    <AnimatePresence initial={false}>
      {isOpen(value) && (
        <AccordionPrimitive.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={cn("pb-4 text-[14px] leading-relaxed text-neutral-600 dark:text-neutral-400", className)}>{children}</div>
          </motion.div>
        </AccordionPrimitive.Content>
      )}
    </AnimatePresence>
  );
}

export default Accordion;

2f:T42d,import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/scalar-ui/accordion"; const faq = [ { q: "Is Scalar UI free?", a: "App UI primitives are free: copy them or install them with the CLI, no account needed." }, { q: "Do I need shadcn?", a: "No. Components install into components/scalar-ui with their own dependencies, so they work in any React and Tailwind project." }, { q: "Can I change the styles?", a: "Yes. You own the code once it is installed, so edit the classes like any other file in your project." }, { q: "Does it support dark mode?", a: "Every component ships light and dark styles using the dark: variant." }, ]; export default function Demo() { return ( {faq.map((f, i) => ( {f.q} {f.a} ))} ); } 30:T2213,

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/scalar-ui/accordion";

const faq = [
  { q: "Is Scalar UI free?", a: "App UI primitives are free: copy them or install them with the CLI, no account needed." },
  { q: "Do I need shadcn?", a: "No. Components install into components/scalar-ui with their own dependencies, so they work in any React and Tailwind project." },
  { q: "Can I change the styles?", a: "Yes. You own the code once it is installed, so edit the classes like any other file in your project." },
  { q: "Does it support dark mode?", a: "Every component ships light and dark styles using the dark: variant." },
];

export default function Demo() {
  return (
    <Accordion type="single" collapsible defaultValue="q-0" variant="bordered" className="max-w-[460px]">
      {faq.map((f, i) => (
        <AccordionItem key={f.q} value={`q-${i}`}>
          <AccordionTrigger>{f.q}</AccordionTrigger>
          <AccordionContent>{f.a}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

31:T41a,import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/scalar-ui/accordion"; const faq = [ { q: "Is Scalar UI free?", a: "App UI primitives are free: copy them or install them with the CLI, no account needed." }, { q: "Do I need shadcn?", a: "No. Components install into components/scalar-ui with their own dependencies, so they work in any React and Tailwind project." }, { q: "Can I change the styles?", a: "Yes. You own the code once it is installed, so edit the classes like any other file in your project." }, { q: "Does it support dark mode?", a: "Every component ships light and dark styles using the dark: variant." }, ]; export default function Example() { return ( {faq.map((f, i) => ( {f.q} {f.a} ))} ); } 32:T2140,

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/scalar-ui/accordion";

const faq = [
  { q: "Is Scalar UI free?", a: "App UI primitives are free: copy them or install them with the CLI, no account needed." },
  { q: "Do I need shadcn?", a: "No. Components install into components/scalar-ui with their own dependencies, so they work in any React and Tailwind project." },
  { q: "Can I change the styles?", a: "Yes. You own the code once it is installed, so edit the classes like any other file in your project." },
  { q: "Does it support dark mode?", a: "Every component ships light and dark styles using the dark: variant." },
];

export default function Example() {
  return (
    <Accordion type="single" collapsible variant="plain" className="max-w-[460px]">
      {faq.map((f, i) => (
        <AccordionItem key={f.q} value={`q-${i}`}>
          <AccordionTrigger>{f.q}</AccordionTrigger>
          <AccordionContent>{f.a}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

33:T41e,import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/scalar-ui/accordion"; const faq = [ { q: "Is Scalar UI free?", a: "App UI primitives are free: copy them or install them with the CLI, no account needed." }, { q: "Do I need shadcn?", a: "No. Components install into components/scalar-ui with their own dependencies, so they work in any React and Tailwind project." }, { q: "Can I change the styles?", a: "Yes. You own the code once it is installed, so edit the classes like any other file in your project." }, { q: "Does it support dark mode?", a: "Every component ships light and dark styles using the dark: variant." }, ]; export default function Example() { return ( {faq.map((f, i) => ( {f.q} {f.a} ))} ); } 34:T2144,

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/scalar-ui/accordion";

const faq = [
  { q: "Is Scalar UI free?", a: "App UI primitives are free: copy them or install them with the CLI, no account needed." },
  { q: "Do I need shadcn?", a: "No. Components install into components/scalar-ui with their own dependencies, so they work in any React and Tailwind project." },
  { q: "Can I change the styles?", a: "Yes. You own the code once it is installed, so edit the classes like any other file in your project." },
  { q: "Does it support dark mode?", a: "Every component ships light and dark styles using the dark: variant." },
];

export default function Example() {
  return (
    <Accordion type="single" collapsible variant="separated" className="max-w-[460px]">
      {faq.map((f, i) => (
        <AccordionItem key={f.q} value={`q-${i}`}>
          <AccordionTrigger>{f.q}</AccordionTrigger>
          <AccordionContent>{f.a}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

35:T21e5,

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/scalar-ui/accordion";

const sections = [
  { id: "shipping", title: "Shipping", body: "Orders ship within 2 business days. Express delivery is available at checkout." },
  { id: "returns", title: "Returns", body: "Return anything within 30 days for a full refund. We cover return shipping." },
  { id: "warranty", title: "Warranty", body: "Every product has a two-year warranty against manufacturing defects." },
];

export default function Example() {
  return (
    <Accordion type="multiple" defaultValue={["shipping", "returns"]} variant="bordered" className="max-w-[460px]">
      {sections.map((s) => (
        <AccordionItem key={s.id} value={s.id}>
          <AccordionTrigger>{s.title}</AccordionTrigger>
          <AccordionContent>{s.body}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

36:T42a,import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/scalar-ui/accordion"; const faq = [ { q: "Is Scalar UI free?", a: "App UI primitives are free: copy them or install them with the CLI, no account needed." }, { q: "Do I need shadcn?", a: "No. Components install into components/scalar-ui with their own dependencies, so they work in any React and Tailwind project." }, { q: "Can I change the styles?", a: "Yes. You own the code once it is installed, so edit the classes like any other file in your project." }, { q: "Does it support dark mode?", a: "Every component ships light and dark styles using the dark: variant." }, ]; export default function Example() { return ( {faq.map((f, i) => ( {f.q} {f.a} ))} ); } 37:T2210,

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/scalar-ui/accordion";

const faq = [
  { q: "Is Scalar UI free?", a: "App UI primitives are free: copy them or install them with the CLI, no account needed." },
  { q: "Do I need shadcn?", a: "No. Components install into components/scalar-ui with their own dependencies, so they work in any React and Tailwind project." },
  { q: "Can I change the styles?", a: "Yes. You own the code once it is installed, so edit the classes like any other file in your project." },
  { q: "Does it support dark mode?", a: "Every component ships light and dark styles using the dark: variant." },
];

export default function Example() {
  return (
    <Accordion type="single" collapsible icon="plus" variant="separated" className="max-w-[460px]">
      {faq.map((f, i) => (
        <AccordionItem key={f.q} value={`q-${i}`}>
          <AccordionTrigger>{f.q}</AccordionTrigger>
          <AccordionContent>{f.a}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

38:T403,import { CreditCard, KeyRound, Users } from "lucide-react"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/scalar-ui/accordion"; const items = [ { id: "billing", icon: CreditCard, title: "Billing", body: "Update your card, download invoices and change your plan." }, { id: "team", icon: Users, title: "Team", body: "Invite members, change roles and manage pending invites." }, { id: "keys", icon: KeyRound, title: "API keys", body: "Create, rotate and revoke keys for the CLI and CI." }, ]; export default function Example() { return ( {items.map(({ id, icon: Icon, title, body }) => ( {title} {body} ))} ); } 39:T263c,

import { CreditCard, KeyRound, Users } from "lucide-react";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/scalar-ui/accordion";

const items = [
  { id: "billing", icon: CreditCard, title: "Billing", body: "Update your card, download invoices and change your plan." },
  { id: "team", icon: Users, title: "Team", body: "Invite members, change roles and manage pending invites." },
  { id: "keys", icon: KeyRound, title: "API keys", body: "Create, rotate and revoke keys for the CLI and CI." },
];

export default function Example() {
  return (
    <Accordion type="single" collapsible defaultValue="team" variant="bordered" className="max-w-[460px]">
      {items.map(({ id, icon: Icon, title, body }) => (
        <AccordionItem key={id} value={id}>
          <AccordionTrigger>
            <Icon />
            {title}
          </AccordionTrigger>
          <AccordionContent className="pl-7">{body}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

29:["$","section","accordion",{"id":"accordion","aria-labelledby":"accordion-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":"accordion-title","className":"sr-only","children":"Accordion"}],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":"accordion","gated":{"unlocked":true,"files":[{"name":"accordion.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"plain":{"name":"plain.tsx","code":"$31","html":"$32"},"separated":{"name":"separated.tsx","code":"$33","html":"$34"},"multiple":{"name":"multiple.tsx","code":"import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/scalar-ui/accordion\";\n\nconst sections = [\n { id: \"shipping\", title: \"Shipping\", body: \"Orders ship within 2 business days. Express delivery is available at checkout.\" },\n { id: \"returns\", title: \"Returns\", body: \"Return anything within 30 days for a full refund. We cover return shipping.\" },\n { id: \"warranty\", title: \"Warranty\", body: \"Every product has a two-year warranty against manufacturing defects.\" },\n];\n\nexport default function Example() {\n return (\n \n {sections.map((s) => (\n \n {s.title}\n {s.body}\n \n ))}\n \n );\n}\n","html":"$35"},"plus-icon":{"name":"plus-icon.tsx","code":"$36","html":"$37"},"with-icons":{"name":"with-icons.tsx","code":"$38","html":"$39"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add accordion","shadcn":"npx shadcn@latest add https://scalarui.com/r/accordion.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":"$L3a","toolbar":"$L3b"}]}],["$L3c","$L3d","$L3e","$L3f","$L40"]]}]

Accordions

Accordions

Plain

Separated

Multiple

Plus Icon

With Icons