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:T1a04,"use client"; import { LayoutGroup, MotionConfig, motion } from "motion/react"; import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"; import { Slot } from "radix-ui"; import { createContext, useContext, useId, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; type Variant = "ghost" | "outline"; type Size = "sm" | "md"; const PaginationContext = createContext<{ id: string; variant: Variant; size: Size }>({ id: "", variant: "ghost", size: "md" }); /** Pages to show around the current one: [1, "ellipsis", 4, 5, 6, "ellipsis", 20]. */ export function paginationRange(page: number, total: number, siblings = 1): (number | "ellipsis")[] { const range = (from: number, to: number) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i); if (total <= siblings * 2 + 5) return range(1, total); const left = Math.max(page - siblings, 2); const right = Math.min(page + siblings, total - 1); const edge = siblings * 2 + 3; if (left <= 3) return [...range(1, edge), "ellipsis", total]; if (right >= total - 2) return [1, "ellipsis", ...range(total - edge + 1, total)]; return [1, "ellipsis", ...range(left, right), "ellipsis", total]; } export interface PaginationProps extends ComponentProps<"nav"> { /** ghost: plain numbers with a sliding highlight · outline: bordered squares with a filled current page. */ variant?: Variant; size?: Size; } export function Pagination({ variant = "ghost", size = "md", className, ...props }: PaginationProps) { const id = useId(); return (

); } export function PaginationContent({ className, ...props }: ComponentProps<"ul">) { return

; } const SIZES = { sm: "h-8 min-w-8 rounded-[10px] px-2 text-[13px]", md: "h-9 min-w-9 rounded-[11px] px-2.5 text-[13.5px]" } as const; const ITEM = { ghost: "text-neutral-600 hover:bg-neutral-100 hover:text-neutral-950 data-[active=true]:text-neutral-950 data-[active=true]:hover:bg-transparent dark:text-neutral-400 dark:hover:bg-white/[0.06] dark:hover:text-white dark:data-[active=true]:text-white", outline: "bg-white text-neutral-700 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-inset ring-black/[0.1] hover:bg-neutral-50 data-[active=true]:text-white data-[active=true]:ring-transparent dark:bg-transparent dark:text-neutral-300 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[active=true]:text-neutral-950", } as const; const ACTIVE = { ghost: "bg-neutral-100 dark:bg-white/[0.1]", outline: "bg-neutral-950 dark:bg-white", } as const; export interface PaginationLinkProps extends ComponentProps<"button"> { isActive?: boolean; /** Render your own link (an or a router Link) with the pagination styles. */ asChild?: boolean; } export function PaginationLink({ isActive = false, asChild = false, className, children, ...props }: PaginationLinkProps) { const { id, variant, size } = useContext(PaginationContext); const Comp = asChild ? Slot.Root : "button"; return ( {isActive && ( )} {asChild ? children : {children}} ); } export function PaginationPrevious({ children = "Previous", ...props }: PaginationLinkProps) { return ( {children} ); } export function PaginationNext({ children = "Next", ...props }: PaginationLinkProps) { return ( {children} ); } export function PaginationEllipsis({ className, ...props }: ComponentProps<"span">) { return ( ); } export interface PaginationDotsProps extends Omit, "onChange"> { count: number; page: number; onPageChange?: (page: number) => void; } /** Carousel-style dots: the current one stretches into a pill. Pages are 1-based. */ export function PaginationDots({ count, page, onPageChange, className, ...props }: PaginationDotsProps) { return (

{Array.from({ length: count }, (_, i) => { const active = i + 1 === page; return ( ); })}

); } export default Pagination; 2e:T10d42,

"use client";

import { LayoutGroup, MotionConfig, motion } from "motion/react";
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
import { Slot } from "radix-ui";
import { createContext, useContext, useId, type ComponentProps } from "react";
import { cn } from "@/lib/utils";

type Variant = "ghost" | "outline";
type Size = "sm" | "md";

const PaginationContext = createContext<{ id: string; variant: Variant; size: Size }>({ id: "", variant: "ghost", size: "md" });

/** Pages to show around the current one: [1, "ellipsis", 4, 5, 6, "ellipsis", 20]. */
export function paginationRange(page: number, total: number, siblings = 1): (number | "ellipsis")[] {
  const range = (from: number, to: number) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);
  if (total <= siblings * 2 + 5) return range(1, total);
  const left = Math.max(page - siblings, 2);
  const right = Math.min(page + siblings, total - 1);
  const edge = siblings * 2 + 3;
  if (left <= 3) return [...range(1, edge), "ellipsis", total];
  if (right >= total - 2) return [1, "ellipsis", ...range(total - edge + 1, total)];
  return [1, "ellipsis", ...range(left, right), "ellipsis", total];
}

export interface PaginationProps extends ComponentProps<"nav"> {
  /** ghost: plain numbers with a sliding highlight · outline: bordered squares with a filled current page. */
  variant?: Variant;
  size?: Size;
}

export function Pagination({ variant = "ghost", size = "md", className, ...props }: PaginationProps) {
  const id = useId();
  return (
    <PaginationContext.Provider value={{ id, variant, size }}>
      <MotionConfig reducedMotion="user">
        <LayoutGroup id={id}>
          <nav aria-label="Pagination" className={cn("flex justify-center", className)} {...props} />
        </LayoutGroup>
      </MotionConfig>
    </PaginationContext.Provider>
  );
}

export function PaginationContent({ className, ...props }: ComponentProps<"ul">) {
  return <ul className={cn("flex items-center gap-1", className)} {...props} />;
}

export function PaginationItem(props: ComponentProps<"li">) {
  return <li {...props} />;
}

const SIZES = { sm: "h-8 min-w-8 rounded-[10px] px-2 text-[13px]", md: "h-9 min-w-9 rounded-[11px] px-2.5 text-[13.5px]" } as const;

const ITEM = {
  ghost: "text-neutral-600 hover:bg-neutral-100 hover:text-neutral-950 data-[active=true]:text-neutral-950 data-[active=true]:hover:bg-transparent dark:text-neutral-400 dark:hover:bg-white/[0.06] dark:hover:text-white dark:data-[active=true]:text-white",
  outline:
    "bg-white text-neutral-700 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-inset ring-black/[0.1] hover:bg-neutral-50 data-[active=true]:text-white data-[active=true]:ring-transparent dark:bg-transparent dark:text-neutral-300 dark:ring-white/[0.14] dark:hover:bg-white/[0.06] dark:data-[active=true]:text-neutral-950",
} as const;

const ACTIVE = {
  ghost: "bg-neutral-100 dark:bg-white/[0.1]",
  outline: "bg-neutral-950 dark:bg-white",
} as const;

export interface PaginationLinkProps extends ComponentProps<"button"> {
  isActive?: boolean;
  /** Render your own link (an <a> or a router Link) with the pagination styles. */
  asChild?: boolean;
}

export function PaginationLink({ isActive = false, asChild = false, className, children, ...props }: PaginationLinkProps) {
  const { id, variant, size } = useContext(PaginationContext);
  const Comp = asChild ? Slot.Root : "button";
  return (
    <Comp
      aria-current={isActive ? "page" : undefined}
      data-active={isActive}
      className={cn(
        "relative inline-flex select-none items-center justify-center gap-1.5 font-medium tabular-nums outline-none transition-colors duration-150",
        "focus-visible:bg-neutral-100 disabled:pointer-events-none disabled:opacity-40 dark:focus-visible:bg-white/[0.08] [&_svg]:size-4",
        SIZES[size],
        ITEM[variant],
        className,
      )}
      {...props}
    >
      {isActive && (
        <motion.span
          aria-hidden
          layoutId={`${id}-active`}
          className={cn("absolute inset-0 rounded-[inherit]", ACTIVE[variant])}
          transition={{ type: "spring", bounce: 0.18, duration: 0.4 }}
        />
      )}
      <Slot.Slottable>{asChild ? children : <span className="relative inline-flex items-center gap-1.5">{children}</span>}</Slot.Slottable>
    </Comp>
  );
}

export function PaginationPrevious({ children = "Previous", ...props }: PaginationLinkProps) {
  return (
    <PaginationLink aria-label="Go to previous page" {...props}>
      <ChevronLeft />
      <span className="hidden sm:inline">{children}</span>
    </PaginationLink>
  );
}

export function PaginationNext({ children = "Next", ...props }: PaginationLinkProps) {
  return (
    <PaginationLink aria-label="Go to next page" {...props}>
      <span className="hidden sm:inline">{children}</span>
      <ChevronRight />
    </PaginationLink>
  );
}

export function PaginationEllipsis({ className, ...props }: ComponentProps<"span">) {
  return (
    <span aria-hidden className={cn("flex size-9 items-center justify-center text-neutral-400", className)} {...props}>
      <MoreHorizontal className="size-4" />
    </span>
  );
}

export interface PaginationDotsProps extends Omit<ComponentProps<"div">, "onChange"> {
  count: number;
  page: number;
  onPageChange?: (page: number) => void;
}

/** Carousel-style dots: the current one stretches into a pill. Pages are 1-based. */
export function PaginationDots({ count, page, onPageChange, className, ...props }: PaginationDotsProps) {
  return (
    <MotionConfig reducedMotion="user">
      <div role="tablist" aria-label="Pages" className={cn("flex items-center gap-1.5", className)} {...props}>
        {Array.from({ length: count }, (_, i) => {
          const active = i + 1 === page;
          return (
            <button
              key={i}
              type="button"
              role="tab"
              aria-selected={active}
              aria-label={`Page ${i + 1}`}
              onClick={() => onPageChange?.(i + 1)}
              className="flex h-4 items-center outline-none"
            >
              <motion.span
                className={cn("block h-1.5 rounded-full", active ? "bg-neutral-950 dark:bg-white" : "bg-neutral-950/15 hover:bg-neutral-950/30 dark:bg-white/20 dark:hover:bg-white/35")}
                initial={false}
                animate={{ width: active ? 20 : 6 }}
                transition={{ type: "spring", bounce: 0.2, duration: 0.4 }}
              />
            </button>
          );
        })}
      </div>
    </MotionConfig>
  );
}

export default Pagination;

2f:T451,"use client"; import { useState } from "react"; import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, paginationRange, } from "@/components/scalar-ui/pagination"; const TOTAL = 20; export default function Demo() { const [page, setPage] = useState(6); return ( setPage((p) => p - 1)} /> {paginationRange(page, TOTAL).map((p, i) => ( {p === "ellipsis" ? ( ) : ( setPage(p)}> {p} )} ))} setPage((p) => p + 1)} /> ); } 30:T37fc,

"use client";

import { useState } from "react";
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  paginationRange,
} from "@/components/scalar-ui/pagination";

const TOTAL = 20;

export default function Demo() {
  const [page, setPage] = useState(6);
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious disabled={page === 1} onClick={() => setPage((p) => p - 1)} />
        </PaginationItem>
        {paginationRange(page, TOTAL).map((p, i) => (
          <PaginationItem key={i}>
            {p === "ellipsis" ? (
              <PaginationEllipsis />
            ) : (
              <PaginationLink isActive={p === page} onClick={() => setPage(p)}>
                {p}
              </PaginationLink>
            )}
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationNext disabled={page === TOTAL} onClick={() => setPage((p) => p + 1)} />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

31:T453,"use client"; import { useState } from "react"; import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, paginationRange, } from "@/components/scalar-ui/pagination"; const TOTAL = 5; export default function Example() { const [page, setPage] = useState(2); return ( setPage((p) => p - 1)} /> {paginationRange(page, TOTAL).map((p, i) => ( {p === "ellipsis" ? ( ) : ( setPage(p)}> {p} )} ))} setPage((p) => p + 1)} /> ); } 32:T37fe,

"use client";

import { useState } from "react";
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  paginationRange,
} from "@/components/scalar-ui/pagination";

const TOTAL = 5;

export default function Example() {
  const [page, setPage] = useState(2);
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious disabled={page === 1} onClick={() => setPage((p) => p - 1)} />
        </PaginationItem>
        {paginationRange(page, TOTAL).map((p, i) => (
          <PaginationItem key={i}>
            {p === "ellipsis" ? (
              <PaginationEllipsis />
            ) : (
              <PaginationLink isActive={p === page} onClick={() => setPage(p)}>
                {p}
              </PaginationLink>
            )}
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationNext disabled={page === TOTAL} onClick={() => setPage((p) => p + 1)} />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

33:T466,"use client"; import { useState } from "react"; import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, paginationRange, } from "@/components/scalar-ui/pagination"; const TOTAL = 12; export default function Example() { const [page, setPage] = useState(4); return ( setPage((p) => p - 1)} /> {paginationRange(page, TOTAL).map((p, i) => ( {p === "ellipsis" ? ( ) : ( setPage(p)}> {p} )} ))} setPage((p) => p + 1)} /> ); } 34:T38d1,

"use client";

import { useState } from "react";
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  paginationRange,
} from "@/components/scalar-ui/pagination";

const TOTAL = 12;

export default function Example() {
  const [page, setPage] = useState(4);
  return (
    <Pagination variant="outline">
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious disabled={page === 1} onClick={() => setPage((p) => p - 1)} />
        </PaginationItem>
        {paginationRange(page, TOTAL).map((p, i) => (
          <PaginationItem key={i}>
            {p === "ellipsis" ? (
              <PaginationEllipsis />
            ) : (
              <PaginationLink isActive={p === page} onClick={() => setPage(p)}>
                {p}
              </PaginationLink>
            )}
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationNext disabled={page === TOTAL} onClick={() => setPage((p) => p + 1)} />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

35:T2bb3,

"use client";

import { useState } from "react";
import { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious } from "@/components/scalar-ui/pagination";

const TOTAL = 12;

export default function Example() {
  const [page, setPage] = useState(3);
  return (
    <Pagination variant="outline" className="w-full max-w-[420px]">
      <PaginationContent className="w-full justify-between">
        <PaginationItem>
          <PaginationPrevious disabled={page === 1} onClick={() => setPage((p) => p - 1)} />
        </PaginationItem>
        <li className="text-[13.5px] tabular-nums text-neutral-500 dark:text-neutral-400">
          Page <span className="font-medium text-neutral-950 dark:text-white">{page}</span> of {TOTAL}
        </li>
        <PaginationItem>
          <PaginationNext disabled={page === TOTAL} onClick={() => setPage((p) => p + 1)} />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

36:T8b3,"use client"; import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react"; import { useState } from "react"; import { Pagination, PaginationContent, PaginationItem, PaginationLink } from "@/components/scalar-ui/pagination"; const ROWS = 240; export default function Example() { const [size, setSize] = useState(20); const [page, setPage] = useState(2); const pages = Math.ceil(ROWS / size); const from = (page - 1) * size + 1; const to = Math.min(page * size, ROWS); return (

Rows per page

{from}–{to} of {ROWS} setPage((p) => p - 1)}> setPage((p) => p + 1)}>

); } 37:T5e44,

"use client";

import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
import { useState } from "react";
import { Pagination, PaginationContent, PaginationItem, PaginationLink } from "@/components/scalar-ui/pagination";

const ROWS = 240;

export default function Example() {
  const [size, setSize] = useState(20);
  const [page, setPage] = useState(2);
  const pages = Math.ceil(ROWS / size);
  const from = (page - 1) * size + 1;
  const to = Math.min(page * size, ROWS);
  return (
    <div className="flex w-full max-w-[520px] flex-wrap items-center justify-between gap-4 text-[13px] text-neutral-500 dark:text-neutral-400">
      <label className="flex items-center gap-2">
        Rows per page
        <span className="relative">
          <select
            value={size}
            onChange={(e) => {
              setSize(Number(e.target.value));
              setPage(1);
            }}
            className="h-8 appearance-none rounded-[10px] bg-white pl-2.5 pr-7 font-medium text-neutral-900 outline-none ring-1 ring-inset ring-black/[0.1] dark:bg-transparent dark:text-white dark:ring-white/[0.14]"
          >
            {[10, 20, 50].map((n) => (
              <option key={n} value={n}>
                {n}
              </option>
            ))}
          </select>
          <ChevronDown className="pointer-events-none absolute right-2 top-1/2 size-3.5 -translate-y-1/2" />
        </span>
      </label>
      <div className="flex items-center gap-3">
        <span className="tabular-nums">
          {from}–{to} of {ROWS}
        </span>
        <Pagination variant="outline" size="sm">
          <PaginationContent>
            <PaginationItem>
              <PaginationLink aria-label="Previous page" disabled={page === 1} onClick={() => setPage((p) => p - 1)}>
                <ChevronLeft />
              </PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationLink aria-label="Next page" disabled={page === pages} onClick={() => setPage((p) => p + 1)}>
                <ChevronRight />
              </PaginationLink>
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      </div>
    </div>
  );
}

38:T674,"use client"; import { AnimatePresence, motion } from "motion/react"; import { useState } from "react"; import { PaginationDots } from "@/components/scalar-ui/pagination"; const slides = [ { title: "Deploy on push", body: "Every commit gets a preview URL.", tint: "from-indigo-500 to-violet-500" }, { title: "Roll back instantly", body: "Previous builds stay warm for an hour.", tint: "from-sky-400 to-cyan-500" }, { title: "Logs that stream", body: "Watch builds as they run.", tint: "from-emerald-400 to-teal-500" }, { title: "Branch secrets", body: "Previews never see production keys.", tint: "from-orange-400 to-rose-500" }, ]; export default function Example() { const [page, setPage] = useState(1); const slide = slides[page - 1]; return (

{slide.title}

{slide.body}

); } 39:T4053,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { useState } from "react";
import { PaginationDots } from "@/components/scalar-ui/pagination";

const slides = [
  { title: "Deploy on push", body: "Every commit gets a preview URL.", tint: "from-indigo-500 to-violet-500" },
  { title: "Roll back instantly", body: "Previous builds stay warm for an hour.", tint: "from-sky-400 to-cyan-500" },
  { title: "Logs that stream", body: "Watch builds as they run.", tint: "from-emerald-400 to-teal-500" },
  { title: "Branch secrets", body: "Previews never see production keys.", tint: "from-orange-400 to-rose-500" },
];

export default function Example() {
  const [page, setPage] = useState(1);
  const slide = slides[page - 1];
  return (
    <div className="flex w-full max-w-[320px] flex-col items-center gap-4">
      <div className="relative h-36 w-full overflow-hidden rounded-[22px]">
        <AnimatePresence initial={false} mode="popLayout">
          <motion.div
            key={page}
            initial={{ opacity: 0, x: 24 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -24 }}
            transition={{ type: "spring", bounce: 0, duration: 0.4 }}
            className={`absolute inset-0 flex flex-col justify-end bg-gradient-to-br p-5 text-white ${slide.tint}`}
          >
            <p className="text-[15px] font-semibold">{slide.title}</p>
            <p className="text-[13px] text-white/80">{slide.body}</p>
          </motion.div>
        </AnimatePresence>
      </div>
      <PaginationDots count={slides.length} page={page} onPageChange={setPage} />
    </div>
  );
}

29:["$","section","pagination",{"id":"pagination","aria-labelledby":"pagination-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":"pagination-title","className":"sr-only","children":"Pagination"}],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":"pagination","gated":{"unlocked":true,"files":[{"name":"pagination.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"default":{"name":"default.tsx","code":"$31","html":"$32"},"outline":{"name":"outline.tsx","code":"$33","html":"$34"},"simple":{"name":"simple.tsx","code":"\"use client\";\n\nimport { useState } from \"react\";\nimport { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious } from \"@/components/scalar-ui/pagination\";\n\nconst TOTAL = 12;\n\nexport default function Example() {\n const [page, setPage] = useState(3);\n return (\n \n \n \n setPage((p) => p - 1)} />\n \n

\n Page {page} of {TOTAL}\n

\n \n setPage((p) => p + 1)} />\n \n \n \n );\n}\n","html":"$35"},"page-size":{"name":"page-size.tsx","code":"$36","html":"$37"},"dots":{"name":"dots.tsx","code":"$38","html":"$39"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add pagination","shadcn":"npx shadcn@latest add https://scalarui.com/r/pagination.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"]]}]

Pagination

Pagination

Default

Outline

Simple

With Page Size

Dots