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:Te7a,"use client"; import { RadioGroup as RadioGroupPrimitive } from "radix-ui"; import type { ComponentProps, ReactNode } from "react"; import { cn } from "@/lib/utils"; export function RadioGroup({ orientation, className, ...props }: ComponentProps) { return ( ); } const DOT = "block size-1.5 scale-30 rounded-full bg-white opacity-0 transition-[scale,opacity] duration-200 ease-[cubic-bezier(0.34,1.56,0.64,1)] dark:bg-neutral-950"; const RING = cn( "group/radio relative inline-flex shrink-0 items-center justify-center rounded-full bg-white outline-none transition-[background-color,box-shadow] duration-150", "shadow-[inset_0_0_0_1.5px_rgb(0_0_0/0.18),0_1px_2px_rgb(0_0_0/0.04)] hover:shadow-[inset_0_0_0_1.5px_rgb(0_0_0/0.3)]", "focus-visible:shadow-[inset_0_0_0_1.5px_rgb(0_0_0/0.3),0_0_0_3px_rgb(0_0_0/0.08)]", "data-[state=checked]:bg-neutral-950 data-[state=checked]:shadow-[inset_0_1px_0_rgb(255_255_255/0.15)]", "dark:bg-white/[0.04] dark:shadow-[inset_0_0_0_1.5px_rgb(255_255_255/0.22)] dark:data-[state=checked]:bg-white", "disabled:cursor-not-allowed disabled:opacity-50", ); const SIZES = { sm: "size-4", md: "size-[18px]", lg: "size-5 [&>span]:size-2" } as const; export interface RadioGroupItemProps extends ComponentProps { size?: keyof typeof SIZES; } /** A round radio button; pair it with a label. */ export function RadioGroupItem({ size = "md", className, ...props }: RadioGroupItemProps) { return ( ); } export interface RadioGroupCardProps extends ComponentProps { /** Show the round indicator in the top-right corner. */ indicator?: boolean; children?: ReactNode; } /** A whole card that acts as one option, e.g. a plan or a shipping speed. */ export function RadioGroupCard({ indicator = true, className, children, ...props }: RadioGroupCardProps) { return ( {children} {indicator && ( )} ); } export default RadioGroup; 2e:T623b,

"use client";

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

export function RadioGroup({ orientation, className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Root>) {
  return (
    <RadioGroupPrimitive.Root
      orientation={orientation}
      className={cn(orientation === "horizontal" ? "flex flex-wrap gap-3" : "grid gap-3", className)}
      {...props}
    />
  );
}

const DOT =
  "block size-1.5 scale-30 rounded-full bg-white opacity-0 transition-[scale,opacity] duration-200 ease-[cubic-bezier(0.34,1.56,0.64,1)] dark:bg-neutral-950";

const RING = cn(
  "group/radio relative inline-flex shrink-0 items-center justify-center rounded-full bg-white outline-none transition-[background-color,box-shadow] duration-150",
  "shadow-[inset_0_0_0_1.5px_rgb(0_0_0/0.18),0_1px_2px_rgb(0_0_0/0.04)] hover:shadow-[inset_0_0_0_1.5px_rgb(0_0_0/0.3)]",
  "focus-visible:shadow-[inset_0_0_0_1.5px_rgb(0_0_0/0.3),0_0_0_3px_rgb(0_0_0/0.08)]",
  "data-[state=checked]:bg-neutral-950 data-[state=checked]:shadow-[inset_0_1px_0_rgb(255_255_255/0.15)]",
  "dark:bg-white/[0.04] dark:shadow-[inset_0_0_0_1.5px_rgb(255_255_255/0.22)] dark:data-[state=checked]:bg-white",
  "disabled:cursor-not-allowed disabled:opacity-50",
);

const SIZES = { sm: "size-4", md: "size-[18px]", lg: "size-5 [&>span]:size-2" } as const;

export interface RadioGroupItemProps extends ComponentProps<typeof RadioGroupPrimitive.Item> {
  size?: keyof typeof SIZES;
}

/** A round radio button; pair it with a label. */
export function RadioGroupItem({ size = "md", className, ...props }: RadioGroupItemProps) {
  return (
    <RadioGroupPrimitive.Item className={cn(RING, SIZES[size], className)} {...props}>
      <span aria-hidden className={cn(DOT, "group-data-[state=checked]/radio:scale-100 group-data-[state=checked]/radio:opacity-100")} />
    </RadioGroupPrimitive.Item>
  );
}

export interface RadioGroupCardProps extends ComponentProps<typeof RadioGroupPrimitive.Item> {
  /** Show the round indicator in the top-right corner. */
  indicator?: boolean;
  children?: ReactNode;
}

/** A whole card that acts as one option, e.g. a plan or a shipping speed. */
export function RadioGroupCard({ indicator = true, className, children, ...props }: RadioGroupCardProps) {
  return (
    <RadioGroupPrimitive.Item
      className={cn(
        "group/card relative flex w-full items-start gap-3 rounded-2xl bg-white p-4 text-left outline-none ring-1 ring-inset ring-black/[0.08] transition-[box-shadow,background-color] duration-150",
        "hover:ring-black/[0.16] focus-visible:ring-black/[0.3] data-[state=checked]:bg-neutral-50 data-[state=checked]:ring-2 data-[state=checked]:ring-neutral-950",
        "dark:bg-white/[0.02] dark:ring-white/[0.1] dark:hover:ring-white/[0.18] dark:data-[state=checked]:bg-white/[0.05] dark:data-[state=checked]:ring-white",
        "disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <span className={cn("min-w-0 flex-1", indicator && "pr-7")}>{children}</span>
      {indicator && (
        <span
          aria-hidden
          className={cn(
            RING,
            "absolute right-4 top-4 size-[18px] group-data-[state=checked]/card:bg-neutral-950 group-data-[state=checked]/card:shadow-[inset_0_1px_0_rgb(255_255_255/0.15)] dark:group-data-[state=checked]/card:bg-white",
          )}
        >
          <span className={cn(DOT, "group-data-[state=checked]/card:scale-100 group-data-[state=checked]/card:opacity-100")} />
        </span>
      )}
    </RadioGroupPrimitive.Item>
  );
}

export default RadioGroup;

2f:T44d,import { RadioGroup, RadioGroupCard } from "@/components/scalar-ui/radio-group"; const plans = [ { id: "hobby", name: "Hobby", price: "Free", body: "For personal projects and experiments." }, { id: "pro", name: "Pro", price: "$20/mo", body: "Unlimited projects, previews and analytics." }, { id: "team", name: "Team", price: "$48/mo", body: "Roles, audit log and SSO for your company." }, ]; export default function Demo() { return ( {plans.map((p) => ( {p.name} {p.price} {p.body} ))} ); } 30:T28fb,

import { RadioGroup, RadioGroupCard } from "@/components/scalar-ui/radio-group";

const plans = [
  { id: "hobby", name: "Hobby", price: "Free", body: "For personal projects and experiments." },
  { id: "pro", name: "Pro", price: "$20/mo", body: "Unlimited projects, previews and analytics." },
  { id: "team", name: "Team", price: "$48/mo", body: "Roles, audit log and SSO for your company." },
];

export default function Demo() {
  return (
    <RadioGroup defaultValue="pro" aria-label="Plan" className="w-full max-w-[400px] gap-2.5">
      {plans.map((p) => (
        <RadioGroupCard key={p.id} value={p.id}>
          <span className="flex items-baseline justify-between">
            <span className="text-[14px] font-semibold tracking-[-0.01em] text-neutral-950 dark:text-white">{p.name}</span>
            <span className="text-[13px] tabular-nums text-neutral-500 dark:text-neutral-400">{p.price}</span>
          </span>
          <span className="mt-0.5 block text-[13px] text-neutral-500 dark:text-neutral-400">{p.body}</span>
        </RadioGroupCard>
      ))}
    </RadioGroup>
  );
}

31:T21ee,

import { RadioGroup, RadioGroupItem } from "@/components/scalar-ui/radio-group";

const label = "text-[13.5px] font-medium leading-5 text-neutral-900 dark:text-neutral-100";

export default function Example() {
  return (
    <RadioGroup defaultValue="daily" aria-label="Digest frequency">
      {[
        ["realtime", "As it happens"],
        ["daily", "Daily digest"],
        ["weekly", "Weekly digest"],
        ["never", "Never"],
      ].map(([value, text]) => (
        <div key={value} className="flex items-center gap-2.5">
          <RadioGroupItem value={value} id={value} />
          <label htmlFor={value} className={label}>
            {text}
          </label>
        </div>
      ))}
    </RadioGroup>
  );
}

32:T2b5a,

import { RadioGroup, RadioGroupItem } from "@/components/scalar-ui/radio-group";

const label = "text-[13.5px] font-medium leading-5 text-neutral-900 dark:text-neutral-100";

const options = [
  { id: "public", title: "Public", body: "Anyone with the link can view." },
  { id: "team", title: "Team", body: "Only members of Aurora can view." },
  { id: "private", title: "Private", body: "Only you and people you invite." },
];

export default function Example() {
  return (
    <RadioGroup defaultValue="team" aria-label="Visibility" className="max-w-[320px] gap-4">
      {options.map((o) => (
        <div key={o.id} className="flex gap-3">
          <RadioGroupItem value={o.id} id={o.id} className="mt-px" />
          <label htmlFor={o.id} className="cursor-pointer">
            <span className={`block ${label}`}>{o.title}</span>
            <span className="block text-[13px] leading-5 text-neutral-500 dark:text-neutral-400">{o.body}</span>
          </label>
        </div>
      ))}
    </RadioGroup>
  );
}

33:T44b,import { Rabbit, Truck, Zap } from "lucide-react"; import { RadioGroup, RadioGroupCard } from "@/components/scalar-ui/radio-group"; const speeds = [ { id: "standard", icon: Truck, name: "Standard", eta: "4–6 days", price: "Free" }, { id: "express", icon: Rabbit, name: "Express", eta: "2 days", price: "$9" }, { id: "overnight", icon: Zap, name: "Overnight", eta: "Tomorrow", price: "$24" }, ]; export default function Example() { return ( {speeds.map(({ id, icon: Icon, name, eta, price }) => ( {name} {eta} · {price} ))} ); } 34:T2b84,

import { Rabbit, Truck, Zap } from "lucide-react";
import { RadioGroup, RadioGroupCard } from "@/components/scalar-ui/radio-group";

const speeds = [
  { id: "standard", icon: Truck, name: "Standard", eta: "4–6 days", price: "Free" },
  { id: "express", icon: Rabbit, name: "Express", eta: "2 days", price: "$9" },
  { id: "overnight", icon: Zap, name: "Overnight", eta: "Tomorrow", price: "$24" },
];

export default function Example() {
  return (
    <RadioGroup defaultValue="express" orientation="horizontal" aria-label="Shipping speed" className="w-full max-w-[520px] flex-nowrap gap-2.5">
      {speeds.map(({ id, icon: Icon, name, eta, price }) => (
        <RadioGroupCard key={id} value={id} className="flex-1 flex-col gap-3">
          <Icon className="size-5 text-neutral-500" />
          <span className="block text-[13.5px] font-semibold text-neutral-950 dark:text-white">{name}</span>
          <span className="block text-[12.5px] text-neutral-500 dark:text-neutral-400">
            {eta} · {price}
          </span>
        </RadioGroupCard>
      ))}
    </RadioGroup>
  );
}

35:T20cf,

import { RadioGroup, RadioGroupItem } from "@/components/scalar-ui/radio-group";

const label = "text-[13.5px] font-medium leading-5 text-neutral-900 dark:text-neutral-100";

export default function Example() {
  return (
    <RadioGroup defaultValue="m" orientation="horizontal" aria-label="Size" className="gap-5">
      {["XS", "S", "M", "L", "XL"].map((s) => (
        <div key={s} className="flex items-center gap-2">
          <RadioGroupItem value={s.toLowerCase()} id={`size-${s}`} />
          <label htmlFor={`size-${s}`} className={label}>
            {s}
          </label>
        </div>
      ))}
    </RadioGroup>
  );
}

36:T4b9,import { RadioGroup as RadioGroupPrimitive } from "radix-ui"; import { RadioGroup } from "@/components/scalar-ui/radio-group"; const colors = [ ["graphite", "#3f3f46"], ["sand", "#d6c7a9"], ["sage", "#9caf88"], ["clay", "#c2785c"], ["ink", "#1e293b"], ]; export default function Example() { return (

{colors.map(([name, hex]) => ( ))}

Build your own items on the same group.

); } 37:T2944,

import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
import { RadioGroup } from "@/components/scalar-ui/radio-group";

const colors = [
  ["graphite", "#3f3f46"],
  ["sand", "#d6c7a9"],
  ["sage", "#9caf88"],
  ["clay", "#c2785c"],
  ["ink", "#1e293b"],
];

export default function Example() {
  return (
    <div className="flex flex-col items-center gap-3">
      <RadioGroup defaultValue="sage" orientation="horizontal" aria-label="Color" className="gap-2.5">
        {colors.map(([name, hex]) => (
          <RadioGroupPrimitive.Item
            key={name}
            value={name}
            aria-label={name}
            title={name}
            style={{ background: hex }}
            className="size-8 rounded-full shadow-[inset_0_0_0_1px_rgb(0_0_0/0.12)] outline-none ring-offset-2 ring-offset-white transition-[box-shadow] data-[state=checked]:ring-2 data-[state=checked]:ring-neutral-950 focus-visible:ring-2 focus-visible:ring-neutral-400 dark:ring-offset-neutral-950 dark:data-[state=checked]:ring-white"
          />
        ))}
      </RadioGroup>
      <p className="text-[12.5px] text-neutral-500 dark:text-neutral-400">Build your own items on the same group.</p>
    </div>
  );
}

38:T2736,

import { RadioGroup, RadioGroupItem } from "@/components/scalar-ui/radio-group";

const label = "text-[13.5px] font-medium leading-5 text-neutral-900 dark:text-neutral-100";

export default function Example() {
  return (
    <RadioGroup defaultValue="eu" aria-label="Region">
      {[
        ["eu", "Europe (Frankfurt)", false],
        ["us", "United States (Virginia)", false],
        ["ap", "Asia Pacific (Tokyo) · coming soon", true],
      ].map(([value, text, off]) => (
        <div key={String(value)} className="flex items-center gap-2.5">
          <RadioGroupItem value={String(value)} id={String(value)} disabled={Boolean(off)} />
          <label htmlFor={String(value)} className={`${label} ${off ? "opacity-50" : ""}`}>
            {text}
          </label>
        </div>
      ))}
    </RadioGroup>
  );
}

29:["$","section","radio-group",{"id":"radio-group","aria-labelledby":"radio-group-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":"radio-group-title","className":"sr-only","children":"Radio Group"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"radio-group","gated":{"unlocked":true,"files":[{"name":"radio-group.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"default":{"name":"default.tsx","code":"import { RadioGroup, RadioGroupItem } from \"@/components/scalar-ui/radio-group\";\n\nconst label = \"text-[13.5px] font-medium leading-5 text-neutral-900 dark:text-neutral-100\";\n\nexport default function Example() {\n return (\n \n {[\n [\"realtime\", \"As it happens\"],\n [\"daily\", \"Daily digest\"],\n [\"weekly\", \"Weekly digest\"],\n [\"never\", \"Never\"],\n ].map(([value, text]) => (\n

\n \n \n {text}\n \n

\n ))}\n \n );\n}\n","html":"$31"},"with-description":{"name":"with-description.tsx","code":"import { RadioGroup, RadioGroupItem } from \"@/components/scalar-ui/radio-group\";\n\nconst label = \"text-[13.5px] font-medium leading-5 text-neutral-900 dark:text-neutral-100\";\n\nconst options = [\n { id: \"public\", title: \"Public\", body: \"Anyone with the link can view.\" },\n { id: \"team\", title: \"Team\", body: \"Only members of Aurora can view.\" },\n { id: \"private\", title: \"Private\", body: \"Only you and people you invite.\" },\n];\n\nexport default function Example() {\n return (\n \n {options.map((o) => (\n

\n \n \n {o.title}\n {o.body}\n \n

\n ))}\n \n );\n}\n","html":"$32"},"cards":{"name":"cards.tsx","code":"$33","html":"$34"},"horizontal":{"name":"horizontal.tsx","code":"import { RadioGroup, RadioGroupItem } from \"@/components/scalar-ui/radio-group\";\n\nconst label = \"text-[13.5px] font-medium leading-5 text-neutral-900 dark:text-neutral-100\";\n\nexport default function Example() {\n return (\n \n {[\"XS\", \"S\", \"M\", \"L\", \"XL\"].map((s) => (\n

\n \n \n {s}\n \n

\n ))}\n \n );\n}\n","html":"$35"},"swatches":{"name":"swatches.tsx","code":"$36","html":"$37"},"disabled":{"name":"disabled.tsx","code":"import { RadioGroup, RadioGroupItem } from \"@/components/scalar-ui/radio-group\";\n\nconst label = \"text-[13.5px] font-medium leading-5 text-neutral-900 dark:text-neutral-100\";\n\nexport default function Example() {\n return (\n \n {[\n [\"eu\", \"Europe (Frankfurt)\", false],\n [\"us\", \"United States (Virginia)\", false],\n [\"ap\", \"Asia Pacific (Tokyo) · coming soon\", true],\n ].map(([value, text, off]) => (\n

\n \n \n {text}\n \n

\n ))}\n \n );\n}\n","html":"$38"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add radio-group","shadcn":"npx shadcn@latest add https://scalarui.com/r/radio-group.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":"$L39","toolbar":"$L3a"}]}],["$L3b","$L3c","$L3d","$L3e","$L3f","$L40"]]}]

Radio Groups

Radio Groups

Default

With Description

Cards

Horizontal

Swatches

Disabled