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:T1010,"use client"; import { MotionConfig, motion } from "motion/react"; import { Tabs as TabsPrimitive } from "radix-ui"; import { createContext, useCallback, useContext, useId, useState, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; type Variant = "pill" | "underline"; const TabsContext = createContext<{ id: string; value: string | undefined }>({ id: "", value: undefined }); const ListContext = createContext("pill"); export function Tabs({ value: valueProp, defaultValue, onValueChange, className, ...props }: ComponentProps) { const id = useId(); const [uncontrolled, setUncontrolled] = useState(defaultValue); const value = valueProp ?? uncontrolled; const setValue = useCallback( (next: string) => { if (valueProp === undefined) setUncontrolled(next); onValueChange?.(next); }, [valueProp, onValueChange], ); return ( ); } export interface TabsListProps extends ComponentProps { variant?: Variant; } export function TabsList({ variant = "pill", className, ...props }: TabsListProps) { return ( ); } export function TabsTrigger({ value, className, children, ...props }: ComponentProps) { const tabs = useContext(TabsContext); const variant = useContext(ListContext); const active = tabs.value === value; return ( {active && ( )} {children} ); } export function TabsContent({ className, children, ...props }: ComponentProps) { return ( {children} ); } export default Tabs; 2e:T909f,

"use client";

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

type Variant = "pill" | "underline";

const TabsContext = createContext<{ id: string; value: string | undefined }>({ id: "", value: undefined });
const ListContext = createContext<Variant>("pill");

export function Tabs({ value: valueProp, defaultValue, onValueChange, className, ...props }: ComponentProps<typeof TabsPrimitive.Root>) {
  const id = useId();
  const [uncontrolled, setUncontrolled] = useState(defaultValue);
  const value = valueProp ?? uncontrolled;
  const setValue = useCallback(
    (next: string) => {
      if (valueProp === undefined) setUncontrolled(next);
      onValueChange?.(next);
    },
    [valueProp, onValueChange],
  );
  return (
    <TabsContext.Provider value={{ id, value }}>
      <MotionConfig reducedMotion="user">
        <TabsPrimitive.Root
          value={value}
          onValueChange={setValue}
          className={cn("flex flex-col gap-4 data-[orientation=vertical]:flex-row", className)}
          {...props}
        />
      </MotionConfig>
    </TabsContext.Provider>
  );
}

export interface TabsListProps extends ComponentProps<typeof TabsPrimitive.List> {
  variant?: Variant;
}

export function TabsList({ variant = "pill", className, ...props }: TabsListProps) {
  return (
    <ListContext.Provider value={variant}>
      <TabsPrimitive.List
        data-variant={variant}
        className={cn(
          "relative inline-flex w-fit items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
          variant === "pill"
            ? "gap-0.5 rounded-[13px] bg-neutral-100 p-1 dark:bg-white/[0.06]"
            : "gap-1 border-b border-neutral-200 dark:border-white/[0.1]",
          className,
        )}
        {...props}
      />
    </ListContext.Provider>
  );
}

export function TabsTrigger({ value, className, children, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>) {
  const tabs = useContext(TabsContext);
  const variant = useContext(ListContext);
  const active = tabs.value === value;
  return (
    <TabsPrimitive.Trigger
      value={value}
      className={cn(
        "relative inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap text-[13px] font-medium tracking-[-0.01em]",
        "text-neutral-500 transition-colors hover:text-neutral-900 data-[state=active]:text-neutral-950",
        "dark:text-neutral-400 dark:hover:text-white dark:data-[state=active]:text-white",
        "outline-none",
        "disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-3.5 [&_svg]:shrink-0",
        variant === "pill" ? "h-8 rounded-[9px] px-3" : "h-10 px-3",
        className,
      )}
      {...props}
    >
      {active && (
        <motion.span
          aria-hidden
          layoutId={`${tabs.id}-indicator`}
          className={
            variant === "pill"
              ? "absolute inset-0 rounded-[9px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.08),0_0_0_1px_rgb(0_0_0/0.04)] dark:bg-neutral-800 dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06)]"
              : "absolute inset-x-1.5 -bottom-px h-0.5 rounded-full bg-neutral-950 dark:bg-white"
          }
          transition={{ type: "spring", bounce: 0.18, duration: 0.42 }}
        />
      )}
      <span className="relative z-10 inline-flex items-center gap-1.5">{children}</span>
    </TabsPrimitive.Trigger>
  );
}

export function TabsContent({ className, children, ...props }: ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content asChild {...props}>
      <motion.div
        className={cn("outline-none", className)}
        initial={{ opacity: 0, y: 4, filter: "blur(2px)" }}
        animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
        transition={{ duration: 0.22, ease: "easeOut" }}
      >
        {children}
      </motion.div>
    </TabsPrimitive.Content>
  );
}

export default Tabs;

2f:Tdbf,import { Activity, LayoutGrid, Settings } from "lucide-react"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/scalar-ui/tabs"; const stats = [ { label: "Requests", value: "1.28M", delta: "+12%" }, { label: "Error rate", value: "0.04%", delta: "−0.01%" }, { label: "p95 latency", value: "182 ms", delta: "−9 ms" }, ]; const events = [ { who: "Maya", what: "promoted build #482 to production", when: "2m" }, { who: "Jon", what: "rotated the Stripe webhook secret", when: "1h" }, { who: "Ari", what: "opened a preview for feat/billing", when: "3h" }, ]; export default function Demo() { return (

Overview Activity Settings {stats.map((s) => (

{s.label}

{s.value}

{s.delta}

))} {events.map((e) => (

{e.who[0]}

{e.who} {e.what}

{e.when}

))} General Domains Members Project name, framework preset and build command. aurora.app and 2 preview domains. 4 members, 1 pending invite.

); } 30:T75e4,

import { Activity, LayoutGrid, Settings } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/scalar-ui/tabs";

const stats = [
  { label: "Requests", value: "1.28M", delta: "+12%" },
  { label: "Error rate", value: "0.04%", delta: "−0.01%" },
  { label: "p95 latency", value: "182 ms", delta: "−9 ms" },
];

const events = [
  { who: "Maya", what: "promoted build #482 to production", when: "2m" },
  { who: "Jon", what: "rotated the Stripe webhook secret", when: "1h" },
  { who: "Ari", what: "opened a preview for feat/billing", when: "3h" },
];

export default function Demo() {
  return (
    <div className="w-full max-w-[460px] 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:shadow-none dark:ring-white/[0.08]">
      <Tabs defaultValue="overview">
        <TabsList>
          <TabsTrigger value="overview">
            <LayoutGrid />
            Overview
          </TabsTrigger>
          <TabsTrigger value="activity">
            <Activity />
            Activity
          </TabsTrigger>
          <TabsTrigger value="settings">
            <Settings />
            Settings
          </TabsTrigger>
        </TabsList>
        <TabsContent value="overview" className="grid grid-cols-3 gap-2">
          {stats.map((s) => (
            <div key={s.label} className="rounded-2xl bg-neutral-50 p-3 dark:bg-white/[0.04]">
              <p className="text-[11.5px] text-neutral-500 dark:text-neutral-400">{s.label}</p>
              <p className="mt-1 text-[17px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">{s.value}</p>
              <p className="mt-0.5 text-[11.5px] font-medium text-emerald-600 dark:text-emerald-400">{s.delta}</p>
            </div>
          ))}
        </TabsContent>
        <TabsContent value="activity" className="space-y-1">
          {events.map((e) => (
            <div key={e.what} className="flex items-center gap-3 rounded-xl px-2 py-2 text-[13px]">
              <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-[11px] font-semibold text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300">
                {e.who[0]}
              </span>
              <p className="min-w-0 flex-1 truncate text-neutral-600 dark:text-neutral-400">
                <span className="font-medium text-neutral-950 dark:text-white">{e.who}</span> {e.what}
              </p>
              <span className="text-[12px] text-neutral-400">{e.when}</span>
            </div>
          ))}
        </TabsContent>
        <TabsContent value="settings">
          <Tabs defaultValue="general" className="gap-3">
            <TabsList variant="underline">
              <TabsTrigger value="general">General</TabsTrigger>
              <TabsTrigger value="domains">Domains</TabsTrigger>
              <TabsTrigger value="members">Members</TabsTrigger>
            </TabsList>
            <TabsContent value="general" className="text-[13px] text-neutral-600 dark:text-neutral-400">Project name, framework preset and build command.</TabsContent>
            <TabsContent value="domains" className="text-[13px] text-neutral-600 dark:text-neutral-400">aurora.app and 2 preview domains.</TabsContent>
            <TabsContent value="members" className="text-[13px] text-neutral-600 dark:text-neutral-400">4 members, 1 pending invite.</TabsContent>
          </Tabs>
        </TabsContent>
      </Tabs>
    </div>
  );
}

31:T1f8a,

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/scalar-ui/tabs";

const panel = "text-[13.5px] text-neutral-600 dark:text-neutral-400";

export default function Example() {
  return (
    <Tabs defaultValue="account" className="w-full max-w-[340px]">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
      </TabsList>
      <TabsContent value="account" className={panel}>Update your name, avatar and email.</TabsContent>
      <TabsContent value="password" className={panel}>Change your password and sign out other sessions.</TabsContent>
      <TabsContent value="billing" className={panel}>Manage your plan, invoices and payment method.</TabsContent>
    </Tabs>
  );
}

32:T2047,

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/scalar-ui/tabs";

const panel = "text-[13.5px] text-neutral-600 dark:text-neutral-400";

export default function Example() {
  return (
    <Tabs defaultValue="general" className="w-full max-w-[340px]">
      <TabsList variant="underline">
        <TabsTrigger value="general">General</TabsTrigger>
        <TabsTrigger value="domains">Domains</TabsTrigger>
        <TabsTrigger value="members">Members</TabsTrigger>
      </TabsList>
      <TabsContent value="general" className={panel}>Project name, framework preset and build command.</TabsContent>
      <TabsContent value="domains" className={panel}>aurora.app and 2 preview domains.</TabsContent>
      <TabsContent value="members" className={panel}>4 members, 1 pending invite.</TabsContent>
    </Tabs>
  );
}

33:T260f,

import { Code2, Eye, Terminal } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/scalar-ui/tabs";

const panel = "text-[13.5px] text-neutral-600 dark:text-neutral-400";

export default function Example() {
  return (
    <Tabs defaultValue="preview" className="w-full max-w-[340px]">
      <TabsList>
        <TabsTrigger value="preview">
          <Eye />
          Preview
        </TabsTrigger>
        <TabsTrigger value="code">
          <Code2 />
          Code
        </TabsTrigger>
        <TabsTrigger value="install">
          <Terminal />
          Install
        </TabsTrigger>
      </TabsList>
      <TabsContent value="preview" className={panel}>A live render of the component.</TabsContent>
      <TabsContent value="code" className={panel}>The source, ready to copy.</TabsContent>
      <TabsContent value="install" className={panel}>One command with the CLI.</TabsContent>
    </Tabs>
  );
}

34:T22e1,

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/scalar-ui/tabs";

const panel = "pt-1.5 text-[13.5px] text-neutral-600 dark:text-neutral-400";

export default function Example() {
  return (
    <Tabs defaultValue="profile" orientation="vertical" className="w-full max-w-[400px]">
      <TabsList>
        <TabsTrigger value="profile" className="justify-start">Profile</TabsTrigger>
        <TabsTrigger value="notifications" className="justify-start">Notifications</TabsTrigger>
        <TabsTrigger value="security" className="justify-start">Security</TabsTrigger>
      </TabsList>
      <TabsContent value="profile" className={panel}>Your name, photo and bio.</TabsContent>
      <TabsContent value="notifications" className={panel}>Email and push preferences.</TabsContent>
      <TabsContent value="security" className={panel}>Two-factor authentication and sessions.</TabsContent>
    </Tabs>
  );
}

29:["$","section","tabs",{"id":"tabs","aria-labelledby":"tabs-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":"tabs-title","className":"sr-only","children":"Tabs"}],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":"tabs","gated":{"unlocked":true,"files":[{"name":"tabs.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"pill":{"name":"pill.tsx","code":"import { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/scalar-ui/tabs\";\n\nconst panel = \"text-[13.5px] text-neutral-600 dark:text-neutral-400\";\n\nexport default function Example() {\n return (\n \n \n Account\n Password\n Billing\n \n Update your name, avatar and email.\n Change your password and sign out other sessions.\n Manage your plan, invoices and payment method.\n \n );\n}\n","html":"$31"},"underline":{"name":"underline.tsx","code":"import { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/scalar-ui/tabs\";\n\nconst panel = \"text-[13.5px] text-neutral-600 dark:text-neutral-400\";\n\nexport default function Example() {\n return (\n \n \n General\n Domains\n Members\n \n Project name, framework preset and build command.\n aurora.app and 2 preview domains.\n 4 members, 1 pending invite.\n \n );\n}\n","html":"$32"},"with-icons":{"name":"with-icons.tsx","code":"import { Code2, Eye, Terminal } from \"lucide-react\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/scalar-ui/tabs\";\n\nconst panel = \"text-[13.5px] text-neutral-600 dark:text-neutral-400\";\n\nexport default function Example() {\n return (\n \n \n \n \n Preview\n \n \n \n Code\n \n \n \n Install\n \n \n A live render of the component.\n The source, ready to copy.\n One command with the CLI.\n \n );\n}\n","html":"$33"},"vertical":{"name":"vertical.tsx","code":"import { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/scalar-ui/tabs\";\n\nconst panel = \"pt-1.5 text-[13.5px] text-neutral-600 dark:text-neutral-400\";\n\nexport default function Example() {\n return (\n \n \n Profile\n Notifications\n Security\n \n Your name, photo and bio.\n Email and push preferences.\n Two-factor authentication and sessions.\n \n );\n}\n","html":"$34"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add tabs","shadcn":"npx shadcn@latest add https://scalarui.com/r/tabs.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":"$L35","toolbar":"$L36"}]}],["$L37","$L38","$L39","$L3a"]]}]

Tabs

Tabs

Pill

Underline

With Icons

Vertical