From e8769cee19543a8358b83f3d624dccf0650ed61e Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 26 Feb 2026 13:56:22 +0000
Subject: [PATCH] Migrate website components to shadcn UI primitives

Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
---
 packages/website/app/blog/agent/page.tsx      |   9 +-
 packages/website/app/open-file/page.tsx       | 124 +++--
 .../website/components/benchmark-tooltip.tsx  | 102 ++--
 .../benchmarks/benchmark-charts.tsx           |  52 ++-
 .../benchmarks/benchmark-detailed-table.tsx   | 232 ++++++----
 .../website/components/blocks/code-block.tsx  |   8 +-
 .../blocks/read-tool-call-block.tsx           |   9 +-
 packages/website/components/demo-footer.tsx   |  24 +-
 packages/website/components/github-button.tsx |   7 +-
 .../components/grab-element-button.tsx        |  15 +-
 packages/website/components/install-tabs.tsx  | 141 +++---
 packages/website/components/ui/button.tsx     |  65 +++
 packages/website/components/ui/card.tsx       |  91 ++++
 .../website/components/ui/collapsible.tsx     |  59 +--
 packages/website/components/ui/input.tsx      |  24 +
 .../website/components/ui/scroll-area.tsx     |  53 +++
 packages/website/components/ui/scrollable.tsx | 106 +----
 packages/website/components/ui/select.tsx     | 172 +++++++
 packages/website/components/ui/table.tsx      | 131 ++++++
 packages/website/components/ui/tabs.tsx       |  71 +++
 packages/website/components/ui/tooltip.tsx    |  59 +++
 .../website/components/view-docs-button.tsx   |   7 +-
 packages/website/package.json                 |   6 +
 pnpm-lock.yaml                                | 436 +++++++++++++++++-
 24 files changed, 1511 insertions(+), 492 deletions(-)
 create mode 100644 packages/website/components/ui/button.tsx
 create mode 100644 packages/website/components/ui/card.tsx
 create mode 100644 packages/website/components/ui/input.tsx
 create mode 100644 packages/website/components/ui/scroll-area.tsx
 create mode 100644 packages/website/components/ui/select.tsx
 create mode 100644 packages/website/components/ui/table.tsx
 create mode 100644 packages/website/components/ui/tabs.tsx
 create mode 100644 packages/website/components/ui/tooltip.tsx

diff --git a/packages/website/app/blog/agent/page.tsx b/packages/website/app/blog/agent/page.tsx
index 1c5e6f004..d50a56c3f 100644
--- a/packages/website/app/blog/agent/page.tsx
+++ b/packages/website/app/blog/agent/page.tsx
@@ -12,6 +12,7 @@ import { GithubButton } from "@/components/github-button";
 import { ViewDocsButton } from "@/components/view-docs-button";
 import { BlogArticleLayout } from "@/components/blog-article-layout";
 import { COPY_FEEDBACK_DURATION_MS } from "@/constants";
+import { Button } from "@/components/ui/button";
 
 interface HighlightedCodeBlockProps {
   code: string;
@@ -43,13 +44,15 @@ const HighlightedCodeBlock = ({ code, lang }: HighlightedCodeBlockProps) => {
 
   return (
     <div className="group relative">
-      <button
+      <Button
         type="button"
+        variant="ghost"
+        size="sm"
         onClick={handleCopy}
-        className="absolute right-0 top-0 text-[11px] text-white/50 opacity-0 transition-opacity hover:text-white group-hover:opacity-100 z-10"
+        className="absolute right-0 top-0 z-10 h-auto px-1.5 py-1 text-[11px] text-white/50 opacity-0 transition-opacity hover:bg-transparent hover:text-white group-hover:opacity-100"
       >
         {didCopy ? "Copied" : "Copy"}
-      </button>
+      </Button>
       {highlightedHtml ? (
         <div
           className="overflow-x-auto font-mono text-[13px] leading-relaxed"
diff --git a/packages/website/app/open-file/page.tsx b/packages/website/app/open-file/page.tsx
index 3f3c6c196..f6ff635b6 100644
--- a/packages/website/app/open-file/page.tsx
+++ b/packages/website/app/open-file/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useQueryState, parseAsStringLiteral } from "nuqs";
-import { useState, useEffect, useCallback, Suspense, useRef } from "react";
+import { useState, useEffect, useCallback, Suspense } from "react";
 import { ReactGrabLogo } from "@/components/react-grab-logo";
 import { cn } from "@/utils/cn";
 import { IconCursor } from "@/components/icons/icon-cursor";
@@ -9,6 +9,15 @@ import { IconVSCode } from "@/components/icons/icon-vscode";
 import { IconZed } from "@/components/icons/icon-zed";
 import { IconWebStorm } from "@/components/icons/icon-webstorm";
 import { ChevronDown, ArrowUpRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import Link from "next/link";
 
 const EDITOR_OPTIONS = ["cursor", "vscode", "zed", "webstorm"] as const;
@@ -29,6 +38,13 @@ const EDITORS: EditorOption[] = [
 
 const STORAGE_KEY = "react-grab-preferred-editor";
 
+const parseEditorFromValue = (value: string): Editor => {
+  const matchingEditor = EDITOR_OPTIONS.find(
+    (innerEditorValue) => innerEditorValue === value,
+  );
+  return matchingEditor ?? "cursor";
+};
+
 const getEditorUrl = (
   editor: Editor,
   filePath: string,
@@ -73,24 +89,9 @@ const OpenFileContent = () => {
     return getInitialEditor().editor;
   });
   const [didAttemptOpen, setDidAttemptOpen] = useState(false);
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isEditorSelectOpen, setIsEditorSelectOpen] = useState(false);
   const [hasSavedPreference] = useState(() => getInitialEditor().hasSaved);
   const [isInfoOpen, setIsInfoOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsDropdownOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
 
   const handleOpen = useCallback(() => {
     if (!resolvedFilePath) return;
@@ -115,14 +116,14 @@ const OpenFileContent = () => {
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Enter" && !isDropdownOpen) {
+      if (event.key === "Enter" && !isEditorSelectOpen) {
         handleOpen();
       }
     };
 
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [handleOpen, isDropdownOpen]);
+  }, [handleOpen, isEditorSelectOpen]);
 
   const handleEditorChange = (editor: Editor) => {
     setPreferredEditor(editor);
@@ -130,16 +131,15 @@ const OpenFileContent = () => {
       localStorage.setItem(STORAGE_KEY, editor);
     }
     setEditorParam(editor);
-    setIsDropdownOpen(false);
   };
 
   const fileName = resolvedFilePath.split("/").pop() ?? "file";
-  const selectedEditor = EDITORS.find((e) => e.id === preferredEditor);
+  const selectedEditor = EDITORS.find((innerEditor) => innerEditor.id === preferredEditor);
 
   if (!resolvedFilePath) {
     return (
       <div className="flex min-h-screen items-center justify-center bg-black p-4">
-        <div className="w-full max-w-md rounded-lg border border-white/10 bg-[#0d0d0d] p-8 text-center shadow-[0_8px_30px_rgb(0,0,0,0.3)]">
+        <Card className="w-full max-w-md border-white/10 bg-[#0d0d0d] p-8 text-center text-card-foreground shadow-[0_8px_30px_rgb(0,0,0,0.3)]">
           <div className="mb-6 flex justify-center">
             <ReactGrabLogo width={100} height={40} />
           </div>
@@ -150,7 +150,7 @@ const OpenFileContent = () => {
             </code>{" "}
             to the URL.
           </div>
-        </div>
+        </Card>
       </div>
     );
   }
@@ -167,7 +167,7 @@ const OpenFileContent = () => {
         </Link>
       </div>
 
-      <div className="w-full max-w-lg rounded-lg border border-white/10 bg-[#0d0d0d] p-8 shadow-[0_8px_30px_rgb(0,0,0,0.3)]">
+      <Card className="w-full max-w-lg border-white/10 bg-[#0d0d0d] p-8 shadow-[0_8px_30px_rgb(0,0,0,0.3)]">
         <div className="mb-2 flex flex-wrap items-center gap-2 text-lg text-white/80">
           <span>Opening</span>
           <span className="inline-flex items-center rounded bg-white/10 px-2 py-0.5 font-mono text-sm text-white/90">
@@ -187,75 +187,63 @@ const OpenFileContent = () => {
           {resolvedFilePath}
         </div>
 
-        <div className="mb-6 inline-flex items-stretch rounded-lg border border-white/10 bg-white/5">
-          <div className="relative" ref={dropdownRef}>
-            <button
-              type="button"
-              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-              className="flex h-full items-center gap-2 rounded-l-lg px-4 py-2.5 text-sm text-white/80 transition-colors hover:bg-white/10"
-            >
+        <div className="mb-6 inline-flex items-center gap-2">
+          <Select
+            value={preferredEditor}
+            onValueChange={(value) => handleEditorChange(parseEditorFromValue(value))}
+            onOpenChange={setIsEditorSelectOpen}
+          >
+            <SelectTrigger className="h-10 min-w-[160px] border-white/10 bg-white/5 text-sm text-white/80 hover:bg-white/10">
               <span className="opacity-70">{selectedEditor?.icon}</span>
-              <span>{selectedEditor?.name}</span>
-              <ChevronDown
-                size={14}
-                className={cn(
-                  "opacity-40 transition-transform",
-                  isDropdownOpen && "rotate-180",
-                )}
-              />
-            </button>
-
-            {isDropdownOpen && (
-              <div className="absolute left-0 top-full z-10 mt-1 min-w-[160px] overflow-hidden rounded-lg border border-white/10 bg-[#0d0d0d] shadow-[0_8px_30px_rgb(0,0,0,0.3)]">
-                {EDITORS.map((editor) => (
-                  <button
-                    key={editor.id}
-                    type="button"
-                    onClick={() => handleEditorChange(editor.id)}
-                    className={cn(
-                      "flex w-full items-center gap-2.5 px-4 py-2.5 text-sm transition-colors",
-                      preferredEditor === editor.id
-                        ? "bg-white/10 text-white"
-                        : "text-white/60 hover:bg-white/10 hover:text-white/90",
-                    )}
-                  >
+              <SelectValue placeholder="Select editor" />
+            </SelectTrigger>
+            <SelectContent className="border-white/10 bg-[#0d0d0d] text-white">
+              {EDITORS.map((editor) => (
+                <SelectItem
+                  key={editor.id}
+                  value={editor.id}
+                  className="text-sm text-white/80 focus:bg-white/10 focus:text-white"
+                >
+                  <span className="flex items-center gap-2.5">
                     <span className="opacity-70">{editor.icon}</span>
                     <span>{editor.name}</span>
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-
+                  </span>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
           <div className="w-px bg-white/10" />
 
-          <button
+          <Button
             type="button"
             onClick={handleOpen}
-            className="flex items-center gap-1.5 rounded-r-lg px-4 py-2.5 text-sm text-white/80 transition-colors hover:bg-white/10"
+            variant="outline"
+            className="h-10 border-white/10 bg-white/5 text-sm text-white/80 hover:bg-white/10 hover:text-white"
           >
             <span>Open</span>
             <ArrowUpRight size={14} className="opacity-50" />
-          </button>
+          </Button>
         </div>
 
         <div className="space-y-1 text-xs text-white/40">
           <p>Your preference will be saved for future use.</p>
           <p>Only open files from trusted sources.</p>
         </div>
-      </div>
+      </Card>
 
-      <button
+      <Button
         type="button"
+        variant="ghost"
+        size="sm"
         onClick={() => setIsInfoOpen(!isInfoOpen)}
-        className="mt-8 flex items-center gap-1.5 text-xs text-white/25 transition-colors hover:text-white/40 focus:outline-none"
+        className="mt-8 h-auto gap-1.5 px-0 py-0 text-xs text-white/25 transition-colors hover:bg-transparent hover:text-white/40"
       >
         <span>What is React Grab?</span>
         <ChevronDown
           size={10}
           className={cn("transition-transform", isInfoOpen && "rotate-180")}
         />
-      </button>
+      </Button>
 
       {isInfoOpen && (
         <p className="mt-2 text-center text-xs text-white/30">
diff --git a/packages/website/components/benchmark-tooltip.tsx b/packages/website/components/benchmark-tooltip.tsx
index 4f0cd11a8..9b09dd3f5 100644
--- a/packages/website/components/benchmark-tooltip.tsx
+++ b/packages/website/components/benchmark-tooltip.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { useState, useRef, useEffect, type ReactElement } from "react";
-import { motion, AnimatePresence, useReducedMotion } from "motion/react";
+import { useState, type ReactElement } from "react";
+import { motion, useReducedMotion } from "motion/react";
 import Link from "next/link";
 import {
   BENCHMARK_CONTROL_COLOR,
@@ -10,8 +10,12 @@ import {
   BENCHMARK_TOOLTIP_TREATMENT_SECONDS,
   BENCHMARK_TOOLTIP_MAX_SECONDS,
   BENCHMARK_TOOLTIP_SPEEDUP_FACTOR,
-  TOOLTIP_HOVER_DELAY_MS,
 } from "@/constants";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface BenchmarkTooltipProps {
   href: string;
@@ -190,71 +194,37 @@ export const BenchmarkTooltip = ({
   className,
 }: BenchmarkTooltipProps): ReactElement => {
   const shouldReduceMotion = Boolean(useReducedMotion());
-  const [isHovered, setIsHovered] = useState(false);
-  const [isVisible, setIsVisible] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  const handleMouseEnter = () => {
-    timeoutRef.current = setTimeout(() => {
-      setIsHovered(true);
-      setIsVisible(true);
-    }, TOOLTIP_HOVER_DELAY_MS);
-  };
-
-  const handleMouseLeave = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    setIsHovered(false);
-    setIsVisible(false);
-  };
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
 
   return (
-    <span
-      className="relative inline-block"
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <Link href={href} rel="noreferrer" className={className}>
-        {children}
-      </Link>
-      <AnimatePresence>
-        {isHovered && (
-          <motion.div
-            initial={
-              shouldReduceMotion ? false : { opacity: 0, y: 8, scale: 0.96 }
-            }
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            exit={
-              shouldReduceMotion ? undefined : { opacity: 0, y: 4, scale: 0.98 }
-            }
-            transition={
-              shouldReduceMotion
-                ? { duration: 0 }
-                : { duration: 0.15, ease: "easeOut" }
-            }
-            style={{ transformOrigin: "top center" }}
-            className="absolute left-1/2 -translate-x-1/2 top-full mt-2 z-50 pointer-events-none"
-          >
-            <div className="absolute left-1/2 -translate-x-1/2 -top-1.5 w-3 h-3 bg-[#0a0a0a] border-l border-t border-neutral-800 rotate-45" />
-            <div className="bg-[#0a0a0a] border border-neutral-800 rounded-lg shadow-2xl overflow-hidden">
-              <MiniChart
-                isVisible={isVisible}
-                shouldReduceMotion={shouldReduceMotion}
-              />
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </span>
+    <Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
+      <TooltipTrigger asChild>
+        <Link href={href} rel="noreferrer" className={className}>
+          {children}
+        </Link>
+      </TooltipTrigger>
+      <TooltipContent
+        side="bottom"
+        sideOffset={8}
+        className="border-neutral-800 bg-[#0a0a0a] p-0 shadow-2xl"
+      >
+        <motion.div
+          initial={shouldReduceMotion ? false : { opacity: 0, y: 8, scale: 0.96 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          transition={
+            shouldReduceMotion
+              ? { duration: 0 }
+              : { duration: 0.15, ease: "easeOut" }
+          }
+          style={{ transformOrigin: "top center" }}
+        >
+          <MiniChart
+            isVisible={isTooltipOpen}
+            shouldReduceMotion={shouldReduceMotion}
+          />
+        </motion.div>
+      </TooltipContent>
+    </Tooltip>
   );
 };
 
diff --git a/packages/website/components/benchmarks/benchmark-charts.tsx b/packages/website/components/benchmarks/benchmark-charts.tsx
index bebfdc836..c647a392a 100644
--- a/packages/website/components/benchmarks/benchmark-charts.tsx
+++ b/packages/website/components/benchmarks/benchmark-charts.tsx
@@ -25,6 +25,14 @@ import {
   BENCHMARK_TREATMENT_COLOR,
   BENCHMARK_LIVE_COUNTER_INTERVAL_MS,
 } from "@/constants";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 
 const formatMetricValue = (
   value: number,
@@ -566,16 +574,16 @@ export const BenchmarkCharts = ({ results }: BenchmarkChartsProps) => {
         </div>
 
         <div className="overflow-x-auto flex justify-center">
-          <table className="text-sm border-collapse max-w-2xl w-full">
-            <thead>
-              <tr className="border-b border-[#2a2a2a]">
-                <th className="text-left py-2 px-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">
+          <Table className="max-w-2xl border-collapse text-sm">
+            <TableHeader>
+              <TableRow className="border-b border-[#2a2a2a]">
+                <TableHead className="text-left py-2 px-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">
                   Metric
-                </th>
-                <th className="text-left py-2 px-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">
+                </TableHead>
+                <TableHead className="text-left py-2 px-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">
                   Control
-                </th>
-                <th className="text-left py-2 px-4 text-xs font-medium text-neutral-500 uppercase tracking-wider bg-[#1f1f1f]/50 rounded-tr-md">
+                </TableHead>
+                <TableHead className="rounded-tr-md bg-[#1f1f1f]/50 py-2 px-4 text-left text-xs font-medium uppercase tracking-wider text-neutral-500">
                   <div className="flex items-center gap-1.5">
                     <Image
                       src="/logo.svg"
@@ -588,33 +596,33 @@ export const BenchmarkCharts = ({ results }: BenchmarkChartsProps) => {
                       React Grab
                     </span>
                   </div>
-                </th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-[#2a2a2a]">
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody className="divide-y divide-[#2a2a2a]">
               {metrics.map((metric) => (
-                <tr
+                <TableRow
                   key={metric.name}
                   className="hover:bg-[#1a1a1a] transition-colors group"
                 >
-                  <td className="py-2 px-4 font-medium text-neutral-300 text-sm group-hover:text-white transition-colors">
+                  <TableCell className="py-2 px-4 text-sm font-medium text-neutral-300 transition-colors group-hover:text-white">
                     {metric.name}
-                  </td>
-                  <td className="py-2 px-4 text-neutral-400 tabular-nums text-sm">
+                  </TableCell>
+                  <TableCell className="py-2 px-4 text-sm text-neutral-400 tabular-nums">
                     {metric.control}
-                  </td>
-                  <td className="py-2 px-4 text-neutral-300 tabular-nums bg-[#1f1f1f]/50 text-sm group-hover:bg-[#1f1f1f] transition-colors">
+                  </TableCell>
+                  <TableCell className="bg-[#1f1f1f]/50 py-2 px-4 text-sm text-neutral-300 tabular-nums transition-colors group-hover:bg-[#1f1f1f]">
                     {metric.treatment}
                     <span
                       className={`ml-2 text-xs font-medium ${metric.isImprovement ? "text-green-400" : "text-red-400"}`}
                     >
                       {metric.isImprovement ? "↓" : "↑"} {metric.change}
                     </span>
-                  </td>
-                </tr>
+                  </TableCell>
+                </TableRow>
               ))}
-            </tbody>
-          </table>
+            </TableBody>
+          </Table>
         </div>
       </div>
     </div>
diff --git a/packages/website/components/benchmarks/benchmark-detailed-table.tsx b/packages/website/components/benchmarks/benchmark-detailed-table.tsx
index c08dcbaaa..301ec875d 100644
--- a/packages/website/components/benchmarks/benchmark-detailed-table.tsx
+++ b/packages/website/components/benchmarks/benchmark-detailed-table.tsx
@@ -5,6 +5,16 @@ import { useState, useMemo } from "react";
 import { ChevronDown, ChevronUp, Search, ArrowUpDown } from "lucide-react";
 import Image from "next/image";
 import { BENCHMARK_TREATMENT_COLOR } from "@/constants";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 
 interface BenchmarkDetailedTableProps {
   results: BenchmarkResult[];
@@ -143,109 +153,139 @@ export const BenchmarkDetailedTable = ({
             size={14}
             className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500"
           />
-          <input
+          <Input
             type="text"
             placeholder="Filter tests..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="bg-[#1a1a1a] border border-[#2a2a2a] rounded-md py-1.5 pl-9 pr-3 text-xs text-neutral-200 placeholder:text-neutral-600 focus:outline-none focus:border-[#404040] w-full sm:w-[200px]"
+            className="h-8 w-full border-[#2a2a2a] bg-[#1a1a1a] py-1.5 pl-9 pr-3 text-xs text-neutral-200 placeholder:text-neutral-600 focus-visible:border-[#404040] sm:w-[200px]"
           />
         </div>
       </div>
       <div className="overflow-x-auto">
-        <table className="w-full text-sm">
-          <thead>
-            <tr className="border-b border-[#2a2a2a]">
-              <th
+        <Table className="text-sm">
+          <TableHeader>
+            <TableRow className="border-b border-[#2a2a2a]">
+              <TableHead
                 rowSpan={2}
-                className="text-left py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider cursor-pointer hover:text-neutral-200 transition-colors group"
-                onClick={() => handleSort("testName")}
+                className="py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider"
               >
-                <div className="flex items-center">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleSort("testName")}
+                  className="h-auto px-0 py-0 text-xs font-medium uppercase tracking-wider text-neutral-400 hover:bg-transparent hover:text-neutral-200"
+                >
                   Test Name
                   <SortIcon
                     field="testName"
                     sortField={sortField}
                     sortDirection={sortDirection}
                   />
-                </div>
-              </th>
-              <th
+                </Button>
+              </TableHead>
+              <TableHead
                 colSpan={2}
-                className="text-left py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider cursor-pointer hover:text-neutral-200 transition-colors group"
-                onClick={() => handleSort("inputTokens")}
+                className="py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider"
               >
-                <div className="flex items-center">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleSort("inputTokens")}
+                  className="h-auto px-0 py-0 text-xs font-medium uppercase tracking-wider text-neutral-400 hover:bg-transparent hover:text-neutral-200"
+                >
                   Input Tokens
                   <SortIcon
                     field="inputTokens"
                     sortField={sortField}
                     sortDirection={sortDirection}
                   />
-                </div>
-              </th>
-              <th
+                </Button>
+              </TableHead>
+              <TableHead
                 colSpan={2}
-                className="text-left py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider cursor-pointer hover:text-neutral-200 transition-colors group"
-                onClick={() => handleSort("outputTokens")}
+                className="py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider"
               >
-                <div className="flex items-center">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleSort("outputTokens")}
+                  className="h-auto px-0 py-0 text-xs font-medium uppercase tracking-wider text-neutral-400 hover:bg-transparent hover:text-neutral-200"
+                >
                   Output Tokens
                   <SortIcon
                     field="outputTokens"
                     sortField={sortField}
                     sortDirection={sortDirection}
                   />
-                </div>
-              </th>
-              <th
+                </Button>
+              </TableHead>
+              <TableHead
                 colSpan={2}
-                className="text-left py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider cursor-pointer hover:text-neutral-200 transition-colors group"
-                onClick={() => handleSort("cost")}
+                className="py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider"
               >
-                <div className="flex items-center">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleSort("cost")}
+                  className="h-auto px-0 py-0 text-xs font-medium uppercase tracking-wider text-neutral-400 hover:bg-transparent hover:text-neutral-200"
+                >
                   Cost
                   <SortIcon
                     field="cost"
                     sortField={sortField}
                     sortDirection={sortDirection}
                   />
-                </div>
-              </th>
-              <th
+                </Button>
+              </TableHead>
+              <TableHead
                 colSpan={2}
-                className="text-left py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider cursor-pointer hover:text-neutral-200 transition-colors group"
-                onClick={() => handleSort("duration")}
+                className="py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider"
               >
-                <div className="flex items-center">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleSort("duration")}
+                  className="h-auto px-0 py-0 text-xs font-medium uppercase tracking-wider text-neutral-400 hover:bg-transparent hover:text-neutral-200"
+                >
                   Duration
                   <SortIcon
                     field="duration"
                     sortField={sortField}
                     sortDirection={sortDirection}
                   />
-                </div>
-              </th>
-              <th
+                </Button>
+              </TableHead>
+              <TableHead
                 colSpan={2}
-                className="text-left py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider cursor-pointer hover:text-neutral-200 transition-colors group"
-                onClick={() => handleSort("toolCalls")}
+                className="py-2 px-3 text-xs font-medium text-neutral-400 uppercase tracking-wider"
               >
-                <div className="flex items-center">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleSort("toolCalls")}
+                  className="h-auto px-0 py-0 text-xs font-medium uppercase tracking-wider text-neutral-400 hover:bg-transparent hover:text-neutral-200"
+                >
                   Tool Calls
                   <SortIcon
                     field="toolCalls"
                     sortField={sortField}
                     sortDirection={sortDirection}
                   />
-                </div>
-              </th>
-            </tr>
-            <tr className="border-b border-[#2a2a2a] bg-[#0d0d0d]">
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide">
+                </Button>
+              </TableHead>
+            </TableRow>
+            <TableRow className="border-b border-[#2a2a2a] bg-[#0d0d0d]">
+              <TableHead className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide">
                 Control
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide bg-[#111111]">
+              </TableHead>
+              <TableHead className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide bg-[#111111]">
                 <div className="flex items-center gap-1.5">
                   <Image
                     src="/logo.svg"
@@ -258,11 +298,11 @@ export const BenchmarkDetailedTable = ({
                     React Grab
                   </span>
                 </div>
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide">
+              </TableHead>
+              <TableHead className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide">
                 Control
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide bg-[#111111]">
+              </TableHead>
+              <TableHead className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide bg-[#111111]">
                 <div className="flex items-center gap-1.5">
                   <Image
                     src="/logo.svg"
@@ -275,11 +315,11 @@ export const BenchmarkDetailedTable = ({
                     React Grab
                   </span>
                 </div>
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide">
+              </TableHead>
+              <TableHead className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide">
                 Control
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide bg-[#111111]">
+              </TableHead>
+              <TableHead className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide bg-[#111111]">
                 <div className="flex items-center gap-1.5">
                   <Image
                     src="/logo.svg"
@@ -292,11 +332,11 @@ export const BenchmarkDetailedTable = ({
                     React Grab
                   </span>
                 </div>
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide">
+              </TableHead>
+              <TableHead className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide">
                 Control
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide bg-[#111111]">
+              </TableHead>
+              <TableHead className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide bg-[#111111]">
                 <div className="flex items-center gap-1.5">
                   <Image
                     src="/logo.svg"
@@ -309,11 +349,11 @@ export const BenchmarkDetailedTable = ({
                     React Grab
                   </span>
                 </div>
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide">
+              </TableHead>
+              <TableHead className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide">
                 Control
-              </th>
-              <th className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide bg-[#111111]">
+              </TableHead>
+              <TableHead className="text-left py-1.5 px-3 text-[10px] font-normal text-neutral-600 uppercase tracking-wide bg-[#111111]">
                 <div className="flex items-center gap-1.5">
                   <Image
                     src="/logo.svg"
@@ -326,16 +366,16 @@ export const BenchmarkDetailedTable = ({
                     React Grab
                   </span>
                 </div>
-              </th>
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-[#2a2a2a]">
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody className="divide-y divide-[#2a2a2a]">
             {filteredAndSortedResults.length === 0 ? (
-              <tr>
-                <td colSpan={11} className="py-8 text-center text-neutral-500">
+              <TableRow>
+                <TableCell colSpan={11} className="py-8 text-center text-neutral-500">
                   No results found matching &quot;{searchQuery}&quot;
-                </td>
-              </tr>
+                </TableCell>
+              </TableRow>
             ) : (
               filteredAndSortedResults.map(([testName, results]) => {
                 const control = results.control || ({} as BenchmarkResult);
@@ -365,22 +405,22 @@ export const BenchmarkDetailedTable = ({
                 const prompt = testCaseMap[testName] || "";
 
                 return (
-                  <tr
+                  <TableRow
                     key={testName}
                     className="hover:bg-[#1a1a1a] transition-colors"
                   >
-                    <td
+                    <TableCell
                       className="py-2 px-3 font-medium text-neutral-300 cursor-help max-w-[200px] truncate"
                       title={prompt}
                     >
                       {testName}
-                    </td>
-                    <td className="py-2 px-3 text-neutral-400 tabular-nums text-xs">
+                    </TableCell>
+                    <TableCell className="py-2 px-3 text-neutral-400 tabular-nums text-xs">
                       {control.inputTokens
                         ? control.inputTokens.toLocaleString()
                         : "-"}
-                    </td>
-                    <td
+                    </TableCell>
+                    <TableCell
                       className="py-2 px-3 text-neutral-300 tabular-nums text-xs"
                       style={{
                         backgroundColor:
@@ -397,13 +437,13 @@ export const BenchmarkDetailedTable = ({
                           {inputChange.change}
                         </span>
                       )}
-                    </td>
-                    <td className="py-2 px-3 text-neutral-400 tabular-nums text-xs">
+                    </TableCell>
+                    <TableCell className="py-2 px-3 text-neutral-400 tabular-nums text-xs">
                       {control.outputTokens
                         ? control.outputTokens.toLocaleString()
                         : "-"}
-                    </td>
-                    <td
+                    </TableCell>
+                    <TableCell
                       className="py-2 px-3 text-neutral-300 tabular-nums text-xs"
                       style={{
                         backgroundColor:
@@ -420,13 +460,13 @@ export const BenchmarkDetailedTable = ({
                           {outputChange.change}
                         </span>
                       )}
-                    </td>
-                    <td className="py-2 px-3 text-neutral-400 tabular-nums text-xs">
+                    </TableCell>
+                    <TableCell className="py-2 px-3 text-neutral-400 tabular-nums text-xs">
                       {control.costUsd !== undefined
                         ? "$" + control.costUsd.toFixed(2)
                         : "-"}
-                    </td>
-                    <td
+                    </TableCell>
+                    <TableCell
                       className="py-2 px-3 text-neutral-300 tabular-nums text-xs"
                       style={{
                         backgroundColor:
@@ -443,11 +483,11 @@ export const BenchmarkDetailedTable = ({
                           {costChange.change}
                         </span>
                       )}
-                    </td>
-                    <td className="py-2 px-3 text-neutral-400 tabular-nums text-xs">
+                    </TableCell>
+                    <TableCell className="py-2 px-3 text-neutral-400 tabular-nums text-xs">
                       {control.durationMs ? prettyMs(control.durationMs) : "-"}
-                    </td>
-                    <td
+                    </TableCell>
+                    <TableCell
                       className="py-2 px-3 text-neutral-300 tabular-nums text-xs"
                       style={{
                         backgroundColor:
@@ -464,13 +504,13 @@ export const BenchmarkDetailedTable = ({
                           {durationChange.change}
                         </span>
                       )}
-                    </td>
-                    <td className="py-2 px-3 text-neutral-400 tabular-nums text-xs">
+                    </TableCell>
+                    <TableCell className="py-2 px-3 text-neutral-400 tabular-nums text-xs">
                       {control.toolCalls !== undefined
                         ? control.toolCalls
                         : "-"}
-                    </td>
-                    <td
+                    </TableCell>
+                    <TableCell
                       className="py-2 px-3 text-neutral-300 tabular-nums text-xs"
                       style={{
                         backgroundColor:
@@ -487,13 +527,13 @@ export const BenchmarkDetailedTable = ({
                           {toolCallsChange.change}
                         </span>
                       )}
-                    </td>
-                  </tr>
+                    </TableCell>
+                  </TableRow>
                 );
               })
             )}
-          </tbody>
-        </table>
+          </TableBody>
+        </Table>
       </div>
     </div>
   );
diff --git a/packages/website/components/blocks/code-block.tsx b/packages/website/components/blocks/code-block.tsx
index 546851591..c29ef418b 100644
--- a/packages/website/components/blocks/code-block.tsx
+++ b/packages/website/components/blocks/code-block.tsx
@@ -6,6 +6,7 @@ import {
   CODE_BLOCK_COLLAPSE_LINE_THRESHOLD,
   CODE_BLOCK_MAX_HEIGHT_PX,
 } from "@/constants";
+import { Button } from "@/components/ui/button";
 import { type StreamRenderedBlock } from "@/hooks/use-stream";
 import { highlightCode } from "@/lib/shiki";
 import { StreamingText } from "./streaming-text";
@@ -75,9 +76,10 @@ export const CodeBlock = ({ block }: CodeBlockProps): ReactElement => {
       )}
 
       {shouldShowExpandButton && (
-        <button
+        <Button
           onClick={() => setIsExpanded(!isExpanded)}
-          className="relative w-full py-2 flex items-center justify-center gap-1 text-xs text-white/50 hover:text-white/90 transition-colors bg-[#0d0d0d]"
+          variant="ghost"
+          className="relative h-auto w-full rounded-none bg-[#0d0d0d] py-2 text-xs text-white/50 transition-colors hover:bg-[#0d0d0d] hover:text-white/90"
           type="button"
         >
           <span>{isExpanded ? "Show less" : "Show more"}</span>
@@ -85,7 +87,7 @@ export const CodeBlock = ({ block }: CodeBlockProps): ReactElement => {
             size={14}
             className={`transition-transform ${isExpanded ? "rotate-180" : ""}`}
           />
-        </button>
+        </Button>
       )}
     </div>
   );
diff --git a/packages/website/components/blocks/read-tool-call-block.tsx b/packages/website/components/blocks/read-tool-call-block.tsx
index 3498f4699..8f064e60e 100644
--- a/packages/website/components/blocks/read-tool-call-block.tsx
+++ b/packages/website/components/blocks/read-tool-call-block.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useRef, useEffect, type ReactElement } from "react";
 import { CLICK_FEEDBACK_DURATION_MS } from "@/constants";
+import { Button } from "@/components/ui/button";
 
 interface ReadToolCallBlockProps {
   parameter: string;
@@ -38,15 +39,17 @@ export const ReadToolCallBlock = ({
   return (
     <div className="flex flex-wrap gap-1 text-[#818181]">
       <span className={isStreaming ? "shimmer-text" : ""}>{displayName}</span>
-      <button
+      <Button
         onClick={handleClick}
-        className="max-w-full break-all text-left transition-colors duration-300"
+        variant="ghost"
+        size="sm"
+        className="h-auto max-w-full break-all px-0 py-0 text-left font-normal transition-colors duration-300 hover:bg-transparent"
         style={{
           color: isClicked ? "#ffffff" : "#5b5b5b",
         }}
       >
         {parameter}
-      </button>
+      </Button>
     </div>
   );
 };
diff --git a/packages/website/components/demo-footer.tsx b/packages/website/components/demo-footer.tsx
index bdcd2736c..9983e2538 100644
--- a/packages/website/components/demo-footer.tsx
+++ b/packages/website/components/demo-footer.tsx
@@ -1,7 +1,9 @@
 "use client";
 
 import { type ReactElement } from "react";
+import Link from "next/link";
 import { RotateCcw } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 export const DemoFooter = (): ReactElement => {
   const handleRestartClick = () => {
@@ -17,28 +19,24 @@ export const DemoFooter = (): ReactElement => {
 
   return (
     <div className="pt-4 text-sm text-white/50 sm:text-base">
-      <button
+      <Button
         type="button"
+        variant="link"
+        size="sm"
         onClick={handleRestartClick}
-        className="hidden items-center gap-1 hover:text-white/80 sm:inline-flex"
+        className="hidden h-auto items-center gap-1 px-0 py-0 text-sm text-white/50 hover:text-white/80 sm:inline-flex sm:text-base"
       >
         <span className="underline underline-offset-4">restart demo</span>
         <RotateCcw size={13} className="align-middle" />
-      </button>
+      </Button>
       <span className="hidden sm:inline"> &middot; </span>
-      <a
-        href="/blog"
-        className="underline underline-offset-4 hover:text-white/80"
-      >
+      <Link href="/blog" className="underline underline-offset-4 hover:text-white/80">
         blog
-      </a>{" "}
+      </Link>{" "}
       &middot;{" "}
-      <a
-        href="/changelog"
-        className="underline underline-offset-4 hover:text-white/80"
-      >
+      <Link href="/changelog" className="underline underline-offset-4 hover:text-white/80">
         changelog
-      </a>
+      </Link>
     </div>
   );
 };
diff --git a/packages/website/components/github-button.tsx b/packages/website/components/github-button.tsx
index 9238e44ad..f61c13ecc 100644
--- a/packages/website/components/github-button.tsx
+++ b/packages/website/components/github-button.tsx
@@ -1,4 +1,6 @@
 import { type ReactElement } from "react";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/utils/cn";
 import { IconGithub } from "./icons/icon-github";
 
 export const GithubButton = (): ReactElement => {
@@ -7,7 +9,10 @@ export const GithubButton = (): ReactElement => {
       href="https://github.com/aidenybai/react-grab"
       target="_blank"
       rel="noreferrer"
-      className="inline-flex items-center gap-2 rounded-md border border-white/20 bg-white px-3 py-1.5 text-sm text-black transition-all hover:bg-white/90 active:scale-[0.98] sm:text-base"
+      className={cn(
+        buttonVariants({ variant: "secondary", size: "sm" }),
+        "border border-white/20 bg-white px-3 py-1.5 text-sm text-black transition-all hover:bg-white/90 hover:text-black active:scale-[0.98] sm:text-base",
+      )}
     >
       <IconGithub className="h-[18px] w-[18px]" />
       Star on GitHub
diff --git a/packages/website/components/grab-element-button.tsx b/packages/website/components/grab-element-button.tsx
index 921c5a0d9..ec83e8b2a 100644
--- a/packages/website/components/grab-element-button.tsx
+++ b/packages/website/components/grab-element-button.tsx
@@ -11,6 +11,7 @@ import {
 } from "react";
 import { motion, useReducedMotion } from "motion/react";
 import { HOTKEY_KEYUP_DELAY_MS } from "@/constants";
+import { Button } from "@/components/ui/button";
 import { cn } from "@/utils/cn";
 import { detectMobile } from "@/utils/detect-mobile";
 import { getKeyFromCode } from "@/utils/get-key-from-code";
@@ -398,10 +399,11 @@ export const GrabElementButton = ({
             }
           />
         )}
-        <button
+        <Button
           onClick={toggleReactGrab}
+          variant={hasAdvanced ? "outline" : "default"}
           className={cn(
-            "relative flex h-12 w-full items-center justify-center gap-2 rounded-lg px-3 text-sm text-white transition-all active:scale-[0.98] sm:w-auto sm:text-base",
+            "relative h-12 w-full px-3 text-sm text-white transition-all active:scale-[0.98] sm:w-auto sm:text-base",
             hasAdvanced
               ? "border border-white/20 bg-white/5 hover:bg-white/10"
               : "border border-[#d75fcb] bg-[#330039] hover:bg-[#4a0052] shadow-[0_0_12px_rgba(215,95,203,0.4)]",
@@ -415,7 +417,7 @@ export const GrabElementButton = ({
               Click to select an element
             </span>
           )}
-        </button>
+        </Button>
         {!hasAdvanced && !isActivated && (
           <motion.div
             initial={shouldReduceMotion ? false : { opacity: 0 }}
@@ -496,13 +498,14 @@ export const GrabElementButton = ({
         )}
       </div>
       {!hideSkip && showSkip && (
-        <button
+        <Button
           onClick={handleSkip}
-          className="px-3 py-2 text-white/50 hover:text-white/90 text-sm transition-colors"
+          variant="ghost"
+          className="px-3 py-2 text-sm text-white/50 transition-colors hover:text-white/90"
           type="button"
         >
           Skip
-        </button>
+        </Button>
       )}
     </motion.div>
   );
diff --git a/packages/website/components/install-tabs.tsx b/packages/website/components/install-tabs.tsx
index 64269e92c..7624afe91 100644
--- a/packages/website/components/install-tabs.tsx
+++ b/packages/website/components/install-tabs.tsx
@@ -1,8 +1,11 @@
 "use client";
 
 import { useEffect, useState, useCallback, type ReactElement } from "react";
+import Link from "next/link";
 import { Copy, Check } from "lucide-react";
 import { COPY_FEEDBACK_DURATION_MS } from "@/constants";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { cn } from "@/utils/cn";
 import { detectMobile } from "@/utils/detect-mobile";
 import { hotkeyToString } from "@/utils/hotkey-to-string";
@@ -366,84 +369,86 @@ export const InstallTabs = ({
         <span className="hidden sm:inline text-white">
           {headingText}
           {activeTabId === "cli" && (
-            <button
+            <Button
               type="button"
+              variant="link"
+              size="sm"
               onClick={() => setActiveTabId("next-app")}
-              className="ml-3 text-xs italic text-white/40 hover:text-white/60 hover:underline transition-colors sm:text-sm"
+              className="ml-3 h-auto px-0 py-0 text-xs italic text-white/40 transition-colors hover:text-white/60 sm:text-sm"
             >
               Prefer manual install?
-            </button>
+            </Button>
           )}
         </span>
       )}
-      <div className="mt-4 overflow-hidden rounded-lg border border-white/10 bg-white/5 text-white shadow-[0_8px_30px_rgb(0,0,0,0.3)]">
-        <div className="flex items-center gap-4 overflow-x-auto border-b border-white/10 px-4 pt-2">
-          {installTabsData.map((tab) => {
-            const isActive = tab.id === activeTab.id;
-
-            return (
-              <button
-                key={tab.id}
-                type="button"
-                className={cn(
-                  "shrink-0 whitespace-nowrap border-b pb-2 font-sans text-sm transition-colors sm:text-base",
-                  isActive
-                    ? "border-white text-white"
-                    : "border-transparent text-white/60 hover:text-white",
-                )}
-                onClick={() => setActiveTabId(tab.id)}
-              >
-                <span>{tab.label}</span>
-              </button>
-            );
-          })}
-        </div>
-        <div className="bg-black/60 relative">
-          <div className="relative">
-            {activeTabId === "cli" ? (
-              <button
-                type="button"
-                onClick={handleCopyClick}
-                className="group flex w-full items-center justify-between gap-4 px-4 py-6 transition-colors hover:bg-white/5"
-              >
-                {highlightedCode ? (
-                  <div
-                    className="overflow-x-auto font-mono text-base leading-relaxed highlighted-code"
-                    dangerouslySetInnerHTML={{ __html: highlightedCode }}
-                  />
-                ) : (
-                  <pre className="overflow-x-auto font-mono text-base leading-relaxed text-white/80">
-                    <code>{activeCode}</code>
-                  </pre>
-                )}
-                <span className="shrink-0 text-white/50 transition-colors group-hover:text-white">
-                  {didCopy ? <Check size={16} /> : <Copy size={16} />}
-                </span>
-              </button>
-            ) : (
-              <div className="group relative">
-                <button
+      <Tabs value={activeTabId} onValueChange={setActiveTabId} className="mt-4">
+        <div className="overflow-hidden rounded-lg border border-white/10 bg-white/5 text-white shadow-[0_8px_30px_rgb(0,0,0,0.3)]">
+          <div className="border-b border-white/10 px-4 pt-2">
+            <TabsList className="h-auto w-full justify-start gap-4 overflow-x-auto rounded-none bg-transparent p-0">
+              {installTabsData.map((tab) => (
+                <TabsTrigger
+                  key={tab.id}
+                  value={tab.id}
+                  className={cn(
+                    "shrink-0 border-b border-transparent rounded-none px-0 pb-2 text-sm font-sans text-white/60 transition-colors hover:text-white data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white sm:text-base",
+                  )}
+                >
+                  {tab.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </div>
+          <div className="relative bg-black/60">
+            <div className="relative">
+              {activeTabId === "cli" ? (
+                <Button
                   type="button"
+                  variant="ghost"
+                  size="sm"
                   onClick={handleCopyClick}
-                  className="touch-hitbox absolute! right-4 top-4 text-white/50 opacity-0 transition-opacity hover:text-white group-hover:opacity-100 z-10"
+                  className="group flex h-auto w-full items-center justify-between gap-4 rounded-none px-4 py-6 hover:bg-white/5"
                 >
-                  {didCopy ? <Check size={16} /> : <Copy size={16} />}
-                </button>
-                {highlightedCode ? (
-                  <div
-                    className="overflow-x-auto p-4 font-mono text-[13px] leading-relaxed highlighted-code"
-                    dangerouslySetInnerHTML={{ __html: highlightedCode }}
-                  />
-                ) : (
-                  <pre className="overflow-x-auto p-4 font-mono text-[13px] leading-relaxed text-white/80">
-                    <code>{activeCode}</code>
-                  </pre>
-                )}
-              </div>
-            )}
+                  {highlightedCode ? (
+                    <div
+                      className="overflow-x-auto font-mono text-base leading-relaxed highlighted-code"
+                      dangerouslySetInnerHTML={{ __html: highlightedCode }}
+                    />
+                  ) : (
+                    <pre className="overflow-x-auto font-mono text-base leading-relaxed text-white/80">
+                      <code>{activeCode}</code>
+                    </pre>
+                  )}
+                  <span className="shrink-0 text-white/50 transition-colors group-hover:text-white">
+                    {didCopy ? <Check size={16} /> : <Copy size={16} />}
+                  </span>
+                </Button>
+              ) : (
+                <div className="group relative">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={handleCopyClick}
+                    className="touch-hitbox absolute! right-4 top-4 z-10 size-6 text-white/50 opacity-0 transition-opacity hover:bg-transparent hover:text-white group-hover:opacity-100"
+                  >
+                    {didCopy ? <Check size={16} /> : <Copy size={16} />}
+                  </Button>
+                  {highlightedCode ? (
+                    <div
+                      className="overflow-x-auto p-4 font-mono text-[13px] leading-relaxed highlighted-code"
+                      dangerouslySetInnerHTML={{ __html: highlightedCode }}
+                    />
+                  ) : (
+                    <pre className="overflow-x-auto p-4 font-mono text-[13px] leading-relaxed text-white/80">
+                      <code>{activeCode}</code>
+                    </pre>
+                  )}
+                </div>
+              )}
+            </div>
           </div>
         </div>
-      </div>
+      </Tabs>
       {activeTabId !== "cli" && (
         <span className="mt-4 block text-sm text-white/50 sm:text-base">
           {activeTab.description}
@@ -452,9 +457,9 @@ export const InstallTabs = ({
       {showAgentNote && activeTabId !== "cli" && (
         <span className="mt-2 block text-sm text-white/50 sm:text-base">
           Want to connect directly to your coding agent?{" "}
-          <a href="/blog/agent" className="underline hover:text-white/70">
+          <Link href="/blog/agent" className="underline hover:text-white/70">
             See our agent connection guide
-          </a>
+          </Link>
         </span>
       )}
     </div>
diff --git a/packages/website/components/ui/button.tsx b/packages/website/components/ui/button.tsx
new file mode 100644
index 000000000..314195904
--- /dev/null
+++ b/packages/website/components/ui/button.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ButtonHTMLAttributes, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,border-color,box-shadow,transform,opacity] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/50",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 focus-visible:ring-ring",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring",
+        link: "text-primary underline-offset-4 hover:underline focus-visible:ring-ring",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3",
+        lg: "h-10 rounded-md px-6",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+export const Button = ({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: ButtonProps): ReactElement => {
+  const Component = asChild ? Slot : "button";
+
+  return (
+    <Component
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+};
+
+Button.displayName = "Button";
+
+export { buttonVariants };
diff --git a/packages/website/components/ui/card.tsx b/packages/website/components/ui/card.tsx
new file mode 100644
index 000000000..b06ff93de
--- /dev/null
+++ b/packages/website/components/ui/card.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import type { HTMLAttributes, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+export const Card = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>): ReactElement => {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col rounded-xl border border-border shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+export const CardHeader = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>): ReactElement => {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col gap-1.5 p-6", className)}
+      {...props}
+    />
+  );
+};
+
+export const CardTitle = ({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLHeadingElement>): ReactElement => {
+  return (
+    <h3
+      data-slot="card-title"
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    >
+      {children}
+    </h3>
+  );
+};
+
+export const CardDescription = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLParagraphElement>): ReactElement => {
+  return (
+    <p
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+};
+
+export const CardContent = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>): ReactElement => {
+  return (
+    <div data-slot="card-content" className={cn("p-6 pt-0", className)} {...props} />
+  );
+};
+
+export const CardFooter = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>): ReactElement => {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  );
+};
+
+Card.displayName = "Card";
+CardHeader.displayName = "CardHeader";
+CardTitle.displayName = "CardTitle";
+CardDescription.displayName = "CardDescription";
+CardContent.displayName = "CardContent";
+CardFooter.displayName = "CardFooter";
diff --git a/packages/website/components/ui/collapsible.tsx b/packages/website/components/ui/collapsible.tsx
index 3fc42b216..64b5f6d90 100644
--- a/packages/website/components/ui/collapsible.tsx
+++ b/packages/website/components/ui/collapsible.tsx
@@ -1,8 +1,10 @@
 "use client";
 
-import { useState, useMemo, type ReactElement, type ReactNode } from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import { motion, AnimatePresence } from "motion/react";
 import { ChevronDown, ChevronRight } from "lucide-react";
+import { useMemo, useState, type ReactElement, type ReactNode } from "react";
+import { Button } from "@/components/ui/button";
 
 interface CollapsibleProps {
   header: ReactNode;
@@ -31,44 +33,47 @@ export const Collapsible = ({
     return defaultExpanded;
   }, [manualExpanded, isStreaming, defaultExpanded, autoExpandOnStreaming]);
 
-  const handleToggle = () => {
-    setManualExpanded(!isExpanded);
-  };
-
   return (
-    <div>
-      <button
-        onClick={handleToggle}
-        className="w-full text-left group relative"
-      >
-        <div className="flex items-center text-[#818181]">
+    <CollapsiblePrimitive.Root
+      open={isExpanded}
+      onOpenChange={setManualExpanded}
+      className="w-full"
+    >
+      <CollapsiblePrimitive.Trigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="group relative h-auto w-full justify-start px-0 py-0 text-left text-[#818181] hover:bg-transparent hover:text-[#9a9a9a]"
+        >
           {header}
           {isExpanded ? (
             <span className="ml-2 opacity-50">
-              <ChevronDown className="w-3 h-3" />
+              <ChevronDown className="size-3" />
             </span>
           ) : (
-            <span className="ml-2 opacity-0 group-hover:opacity-50 transition-opacity">
-              <ChevronRight className="w-3 h-3" />
+            <span className="ml-2 opacity-0 transition-opacity group-hover:opacity-50">
+              <ChevronRight className="size-3" />
             </span>
           )}
-        </div>
-      </button>
-
+        </Button>
+      </CollapsiblePrimitive.Trigger>
       <AnimatePresence initial={false}>
         {isExpanded && (
-          <motion.div
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: "auto" }}
-            exit={{ opacity: 0, height: 0 }}
-            transition={{ duration: 0.2, ease: "easeOut" }}
-            className="overflow-hidden"
-          >
-            {children}
-          </motion.div>
+          <CollapsiblePrimitive.Content forceMount asChild>
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: "auto" }}
+              exit={{ opacity: 0, height: 0 }}
+              transition={{ duration: 0.2, ease: "easeOut" }}
+              className="overflow-hidden"
+            >
+              {children}
+            </motion.div>
+          </CollapsiblePrimitive.Content>
         )}
       </AnimatePresence>
-    </div>
+    </CollapsiblePrimitive.Root>
   );
 };
 
diff --git a/packages/website/components/ui/input.tsx b/packages/website/components/ui/input.tsx
new file mode 100644
index 000000000..90d46120c
--- /dev/null
+++ b/packages/website/components/ui/input.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import type { InputHTMLAttributes, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+export const Input = ({
+  className,
+  type = "text",
+  ...props
+}: InputHTMLAttributes<HTMLInputElement>): ReactElement => {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow,border-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+Input.displayName = "Input";
diff --git a/packages/website/components/ui/scroll-area.tsx b/packages/website/components/ui/scroll-area.tsx
new file mode 100644
index 000000000..48e514dfc
--- /dev/null
+++ b/packages/website/components/ui/scroll-area.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+export const ScrollArea = ({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>): ReactElement => {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative overflow-hidden", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport data-slot="scroll-area-viewport" className="size-full rounded-[inherit]">
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+};
+
+export const ScrollBar = ({
+  className,
+  orientation = "vertical",
+  ...props
+}: ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): ReactElement => {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2 flex-col border-t border-t-transparent",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-[#3a3a3a] hover:bg-[#4a4a4a]"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+};
+
+ScrollArea.displayName = "ScrollArea";
+ScrollBar.displayName = "ScrollBar";
diff --git a/packages/website/components/ui/scrollable.tsx b/packages/website/components/ui/scrollable.tsx
index 0a3546d60..31e0b4b75 100644
--- a/packages/website/components/ui/scrollable.tsx
+++ b/packages/website/components/ui/scrollable.tsx
@@ -1,9 +1,11 @@
 "use client";
 
-import { useRef, useState, useEffect, type ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
+import { cn } from "@/utils/cn";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 interface ScrollableProps {
-  children: React.ReactNode;
+  children: ReactNode;
   className?: string;
   maxHeight?: string;
 }
@@ -13,104 +15,18 @@ export const Scrollable = ({
   className = "",
   maxHeight = "200px",
 }: ScrollableProps): ReactElement => {
-  const contentRef = useRef<HTMLDivElement>(null);
-  const scrollbarRef = useRef<HTMLDivElement>(null);
-  const [isHovered, setIsHovered] = useState(false);
-  const [showScrollbar, setShowScrollbar] = useState(false);
-  const [scrollbarHeight, setScrollbarHeight] = useState(0);
-  const [scrollbarTop, setScrollbarTop] = useState(0);
-
-  useEffect(() => {
-    const updateScrollbar = () => {
-      if (!contentRef.current) return;
-
-      const element = contentRef.current;
-      const hasScroll = element.scrollHeight > element.clientHeight;
-      setShowScrollbar(hasScroll);
-
-      if (hasScroll) {
-        const scrollRatio = element.clientHeight / element.scrollHeight;
-        const newScrollbarHeight = Math.max(
-          element.clientHeight * scrollRatio,
-          20,
-        );
-        setScrollbarHeight(newScrollbarHeight);
-
-        const scrollPercentage =
-          element.scrollTop / (element.scrollHeight - element.clientHeight);
-        const maxScrollbarTop = element.clientHeight - newScrollbarHeight;
-        setScrollbarTop(scrollPercentage * maxScrollbarTop);
-      }
-    };
-
-    const element = contentRef.current;
-    if (!element) return;
-
-    updateScrollbar();
-    element.addEventListener("scroll", updateScrollbar);
-    window.addEventListener("resize", updateScrollbar);
-
-    return () => {
-      element.removeEventListener("scroll", updateScrollbar);
-      window.removeEventListener("resize", updateScrollbar);
-    };
-  }, [children]);
-
-  const handleScrollbarMouseDown = (event: React.MouseEvent) => {
-    event.preventDefault();
-    const startY = event.clientY;
-    const startScrollTop = contentRef.current?.scrollTop || 0;
-
-    const handleMouseMove = (moveEvent: MouseEvent) => {
-      if (!contentRef.current) return;
-
-      const deltaY = moveEvent.clientY - startY;
-      const scrollRatio =
-        contentRef.current.scrollHeight / contentRef.current.clientHeight;
-      contentRef.current.scrollTop = startScrollTop + deltaY * scrollRatio;
-    };
-
-    const handleMouseUp = () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  };
-
   return (
-    <div
-      className="relative"
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <div
-        ref={contentRef}
-        className={`overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden ${className}`}
+    <div className="relative">
+      <ScrollArea
+        className={cn(
+          "overflow-y-auto rounded-md [scrollbar-width:none] [&_[data-slot='scroll-area-scrollbar']]:opacity-0 [&_[data-slot='scroll-area-scrollbar']]:transition-opacity hover:[&_[data-slot='scroll-area-scrollbar']]:opacity-100",
+          className,
+        )}
         style={{ maxHeight }}
       >
         {children}
-      </div>
+      </ScrollArea>
       <div className="absolute bottom-0 left-0 right-0 h-8 pointer-events-none bg-linear-to-t from-black/50 to-transparent" />
-      {showScrollbar && (
-        <div
-          className={`absolute right-0 top-0 w-1 transition-opacity duration-200 ${
-            isHovered ? "opacity-100" : "opacity-0"
-          }`}
-          style={{ height: maxHeight }}
-        >
-          <div
-            ref={scrollbarRef}
-            className="absolute right-0 w-1 bg-[#3a3a3a] cursor-pointer hover:bg-[#4a4a4a] transition-colors"
-            style={{
-              height: `${scrollbarHeight}px`,
-              top: `${scrollbarTop}px`,
-            }}
-            onMouseDown={handleScrollbarMouseDown}
-          />
-        </div>
-      )}
     </div>
   );
 };
diff --git a/packages/website/components/ui/select.tsx b/packages/website/components/ui/select.tsx
new file mode 100644
index 000000000..c3ca13f95
--- /dev/null
+++ b/packages/website/components/ui/select.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+export const Select = ({
+  ...props
+}: ComponentPropsWithoutRef<typeof SelectPrimitive.Root>): ReactElement => {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+};
+
+export const SelectGroup = ({
+  ...props
+}: ComponentPropsWithoutRef<typeof SelectPrimitive.Group>): ReactElement => {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+};
+
+export const SelectValue = ({
+  ...props
+}: ComponentPropsWithoutRef<typeof SelectPrimitive.Value>): ReactElement => {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+};
+
+export const SelectTrigger = ({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>): ReactElement => {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow,border-color] outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDown className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+};
+
+export const SelectContent = ({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: ComponentPropsWithoutRef<typeof SelectPrimitive.Content>): ReactElement => {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        position={position}
+        className={cn(
+          "bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1",
+          className,
+        )}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] min-w-[var(--radix-select-trigger-width)] w-full",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+};
+
+export const SelectLabel = ({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof SelectPrimitive.Label>): ReactElement => {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  );
+};
+
+export const SelectItem = ({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<typeof SelectPrimitive.Item>): ReactElement => {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <Check className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+};
+
+export const SelectSeparator = ({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>): ReactElement => {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("-mx-1 my-1 h-px bg-muted", className)}
+      {...props}
+    />
+  );
+};
+
+export const SelectScrollUpButton = ({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>): ReactElement => {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronUp className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+};
+
+export const SelectScrollDownButton = ({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>): ReactElement => {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronDown className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+};
+
+Select.displayName = "Select";
+SelectGroup.displayName = "SelectGroup";
+SelectValue.displayName = "SelectValue";
+SelectTrigger.displayName = "SelectTrigger";
+SelectContent.displayName = "SelectContent";
+SelectLabel.displayName = "SelectLabel";
+SelectItem.displayName = "SelectItem";
+SelectSeparator.displayName = "SelectSeparator";
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+SelectScrollDownButton.displayName = "SelectScrollDownButton";
diff --git a/packages/website/components/ui/table.tsx b/packages/website/components/ui/table.tsx
new file mode 100644
index 000000000..1a3aace3f
--- /dev/null
+++ b/packages/website/components/ui/table.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import type {
+  HTMLAttributes,
+  ReactElement,
+  TableHTMLAttributes,
+  TdHTMLAttributes,
+  ThHTMLAttributes,
+} from "react";
+import { cn } from "@/utils/cn";
+
+export const Table = ({
+  className,
+  ...props
+}: TableHTMLAttributes<HTMLTableElement>): ReactElement => {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export const TableHeader = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLTableSectionElement>): ReactElement => {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+};
+
+export const TableBody = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLTableSectionElement>): ReactElement => {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+};
+
+export const TableFooter = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLTableSectionElement>): ReactElement => {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  );
+};
+
+export const TableRow = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLTableRowElement>): ReactElement => {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+export const TableHead = ({
+  className,
+  ...props
+}: ThHTMLAttributes<HTMLTableCellElement>): ReactElement => {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+export const TableCell = ({
+  className,
+  ...props
+}: TdHTMLAttributes<HTMLTableCellElement>): ReactElement => {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("p-2 align-middle whitespace-nowrap", className)}
+      {...props}
+    />
+  );
+};
+
+export const TableCaption = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLTableCaptionElement>): ReactElement => {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+};
+
+Table.displayName = "Table";
+TableHeader.displayName = "TableHeader";
+TableBody.displayName = "TableBody";
+TableFooter.displayName = "TableFooter";
+TableRow.displayName = "TableRow";
+TableHead.displayName = "TableHead";
+TableCell.displayName = "TableCell";
+TableCaption.displayName = "TableCaption";
diff --git a/packages/website/components/ui/tabs.tsx b/packages/website/components/ui/tabs.tsx
new file mode 100644
index 000000000..60971383b
--- /dev/null
+++ b/packages/website/components/ui/tabs.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+export const Tabs = ({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof TabsPrimitive.Root>): ReactElement => {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+};
+
+export const TabsList = ({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof TabsPrimitive.List>): ReactElement => {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+export const TabsTrigger = ({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>): ReactElement => {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background data-[state=active]:text-foreground text-foreground inline-flex h-full items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+export const TabsContent = ({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof TabsPrimitive.Content>): ReactElement => {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn(
+        "outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+Tabs.displayName = "Tabs";
+TabsList.displayName = "TabsList";
+TabsTrigger.displayName = "TabsTrigger";
+TabsContent.displayName = "TabsContent";
diff --git a/packages/website/components/ui/tooltip.tsx b/packages/website/components/ui/tooltip.tsx
new file mode 100644
index 000000000..9ac5d668f
--- /dev/null
+++ b/packages/website/components/ui/tooltip.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import { cn } from "@/utils/cn";
+
+export const TooltipProvider = ({
+  delayDuration = 0,
+  ...props
+}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>): ReactElement => {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+};
+
+export const Tooltip = ({
+  ...props
+}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>): ReactElement => {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+};
+
+export const TooltipTrigger = ({
+  ...props
+}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>): ReactElement => {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+};
+
+export const TooltipContent = ({
+  className,
+  sideOffset = 4,
+  ...props
+}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>): ReactElement => {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 origin-(--radix-tooltip-content-transform-origin) rounded-md border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          className,
+        )}
+        {...props}
+      />
+    </TooltipPrimitive.Portal>
+  );
+};
+
+TooltipProvider.displayName = "TooltipProvider";
+Tooltip.displayName = "Tooltip";
+TooltipTrigger.displayName = "TooltipTrigger";
+TooltipContent.displayName = "TooltipContent";
diff --git a/packages/website/components/view-docs-button.tsx b/packages/website/components/view-docs-button.tsx
index 121e22184..de3b7fe28 100644
--- a/packages/website/components/view-docs-button.tsx
+++ b/packages/website/components/view-docs-button.tsx
@@ -1,12 +1,17 @@
 import { type ReactElement } from "react";
 import { BookOpen } from "lucide-react";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/utils/cn";
 
 export const ViewDocsButton = (): ReactElement => (
   <a
     href="https://github.com/aidenybai/react-grab#readme"
     target="_blank"
     rel="noreferrer"
-    className="hidden sm:inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white transition-all hover:bg-white/10 active:scale-[0.98] sm:text-base"
+    className={cn(
+      buttonVariants({ variant: "outline", size: "sm" }),
+      "hidden border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white transition-all hover:bg-white/10 hover:text-white active:scale-[0.98] sm:inline-flex sm:text-base",
+    )}
   >
     <BookOpen className="h-[15px] w-[15px]" />
     View docs
diff --git a/packages/website/package.json b/packages/website/package.json
index 0ba9e9084..3fb252e9d 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -9,6 +9,12 @@
     "lint": "oxlint"
   },
   "dependencies": {
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-grab/design-system": "workspace:*",
     "@vercel/analytics": "^1.5.0",
     "@vercel/firewall": "^1.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 130462c85..9d7dbab2b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -752,12 +752,30 @@ importers:
 
   packages/website:
     dependencies:
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.12
+        version: 1.1.12(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.2.10
+        version: 1.2.10(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-select':
+        specifier: ^2.2.6
+        version: 2.2.6(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.4
+        version: 1.2.4(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.13
+        version: 1.1.13(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.8
+        version: 1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@react-grab/design-system':
         specifier: workspace:*
         version: link:../design-system
       '@vercel/analytics':
         specifier: ^1.5.0
-        version: 1.5.0(next@16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)
+        version: 1.5.0(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)
       '@vercel/firewall':
         specifier: ^1.1.1
         version: 1.1.1
@@ -766,7 +784,7 @@ importers:
         version: 5.0.108(zod@4.3.5)
       botid:
         specifier: ^1.5.10
-        version: 1.5.10(next@16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)
+        version: 1.5.10(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -781,10 +799,10 @@ importers:
         version: 12.23.24(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       next:
         specifier: 16.0.10
-        version: 16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       nuqs:
         specifier: ^2.8.1
-        version: 2.8.1(next@16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)
+        version: 2.8.1(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)
       pretty-ms:
         specifier: ^9.3.0
         version: 9.3.0
@@ -2954,6 +2972,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-scroll-area@1.2.10':
+    resolution: {integrity: sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-select@2.2.6':
     resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
     peerDependencies:
@@ -3420,8 +3451,8 @@ packages:
     engines: {node: '>=20'}
     hasBin: true
 
-  '@sourcegraph/amp@0.0.1771838262-g353b96':
-    resolution: {integrity: sha512-uFAaUMheC6iSXII1rP9r16DPpkrFhklrXjNj0Wq3poUrAwjjJRE6BtnMcMC8RVfLGfwyc933fQh6QMumMoYkGw==}
+  '@sourcegraph/amp@0.0.1772107648-gbe4328':
+    resolution: {integrity: sha512-ekkK4vs/AWgEYVRanF6bZ7T0XrlF2jTEyIzDQaJVU/mugZ6dZsQ/d+8GX6si9DuvPXnelOh6cku74WcN198zmg==}
     engines: {node: '>=20'}
     hasBin: true
 
@@ -9132,6 +9163,12 @@ snapshots:
       react: 19.0.1
       react-dom: 19.0.1(react@19.0.1)
 
+  '@floating-ui/react-dom@2.1.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+
   '@floating-ui/utils@0.2.10': {}
 
   '@hono/node-server@1.19.9(hono@4.11.7)':
@@ -9632,6 +9669,15 @@ snapshots:
 
   '@radix-ui/primitive@1.1.3': {}
 
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
@@ -9670,6 +9716,22 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -9686,6 +9748,18 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.0.1)
@@ -9698,12 +9772,24 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       react: 19.0.1
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-context@1.1.2(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       react: 19.0.1
@@ -9738,12 +9824,31 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-direction@1.1.1(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       react: 19.0.1
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -9772,12 +9877,29 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       react: 19.0.1
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.0.1)
@@ -9789,6 +9911,13 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-id@1.1.1(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.0.1)
@@ -9831,6 +9960,24 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@floating-ui/react-dom': 2.1.6(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
@@ -9849,6 +9996,16 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
@@ -9859,6 +10016,16 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.0.1)
@@ -9869,6 +10036,15 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.0.1)
@@ -9887,6 +10063,23 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -9904,6 +10097,52 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-scroll-area@1.2.10(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
+  '@radix-ui/react-select@2.2.6(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      aria-hidden: 1.2.6
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      react-remove-scroll: 2.7.2(@types/react@19.2.2)(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-select@2.2.6(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/number': 1.1.1
@@ -9942,6 +10181,13 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-slot@1.2.3(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.0.1)
@@ -9949,6 +10195,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-slot@1.2.4(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.0.1)
@@ -9956,6 +10209,22 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -9998,6 +10267,26 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -10018,12 +10307,26 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.2(@types/react@19.2.7)
 
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       react: 19.0.1
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.7)(react@19.0.1)
@@ -10032,6 +10335,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.0.1)
@@ -10039,6 +10349,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.0.1)
@@ -10053,18 +10370,37 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       react: 19.0.1
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       react: 19.0.1
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/rect': 1.1.1
@@ -10072,6 +10408,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@radix-ui/react-use-size@1.1.1(@types/react@19.2.7)(react@19.0.1)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.0.1)
@@ -10079,6 +10422,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
   '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
@@ -10405,14 +10757,14 @@ snapshots:
 
   '@sourcegraph/amp-sdk@0.1.0-20251210081226-g90e3892':
     dependencies:
-      '@sourcegraph/amp': 0.0.1771838262-g353b96
+      '@sourcegraph/amp': 0.0.1772107648-gbe4328
       zod: 3.25.76
 
   '@sourcegraph/amp@0.0.1767830505-ga62310':
     dependencies:
       '@napi-rs/keyring': 1.1.9
 
-  '@sourcegraph/amp@0.0.1771838262-g353b96':
+  '@sourcegraph/amp@0.0.1772107648-gbe4328':
     dependencies:
       '@napi-rs/keyring': 1.1.9
 
@@ -11040,9 +11392,9 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
-  '@vercel/analytics@1.5.0(next@16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)':
+  '@vercel/analytics@1.5.0(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)':
     optionalDependencies:
-      next: 16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      next: 16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       react: 19.2.1
 
   '@vercel/firewall@1.1.1': {}
@@ -11459,9 +11811,9 @@ snapshots:
 
   boolbase@1.0.0: {}
 
-  botid@1.5.10(next@16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1):
+  botid@1.5.10(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1):
     optionalDependencies:
-      next: 16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      next: 16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       react: 19.2.1
 
   boxen@8.0.1:
@@ -13667,7 +14019,7 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  next@16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
       '@next/env': 16.0.10
       '@swc/helpers': 0.5.15
@@ -13675,7 +14027,7 @@ snapshots:
       postcss: 8.4.31
       react: 19.2.1
       react-dom: 19.2.1(react@19.2.1)
-      styled-jsx: 5.1.6(react@19.2.1)
+      styled-jsx: 5.1.6(@babel/core@7.28.5)(react@19.2.1)
     optionalDependencies:
       '@next/swc-darwin-arm64': 16.0.10
       '@next/swc-darwin-x64': 16.0.10
@@ -13740,12 +14092,12 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nuqs@2.8.1(next@16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1):
+  nuqs@2.8.1(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1):
     dependencies:
       '@standard-schema/spec': 1.0.0
       react: 19.2.1
     optionalDependencies:
-      next: 16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      next: 16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
 
   object-assign@4.1.1: {}
 
@@ -14198,6 +14550,14 @@ snapshots:
 
   react-refresh@0.9.0: {}
 
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.2)(react@19.2.1):
+    dependencies:
+      react: 19.2.1
+      react-style-singleton: 2.2.3(@types/react@19.2.2)(react@19.2.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   react-remove-scroll-bar@2.3.8(@types/react@19.2.7)(react@19.0.1):
     dependencies:
       react: 19.0.1
@@ -14206,6 +14566,17 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  react-remove-scroll@2.7.2(@types/react@19.2.2)(react@19.2.1):
+    dependencies:
+      react: 19.2.1
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.2)(react@19.2.1)
+      react-style-singleton: 2.2.3(@types/react@19.2.2)(react@19.2.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.2)(react@19.2.1)
+      use-sidecar: 1.1.3(@types/react@19.2.2)(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   react-remove-scroll@2.7.2(@types/react@19.2.7)(react@19.0.1):
     dependencies:
       react: 19.0.1
@@ -14225,6 +14596,14 @@ snapshots:
       react-dom: 19.0.1(react@19.0.1)
       react-transition-group: 4.4.5(react-dom@19.0.1(react@19.0.1))(react@19.0.1)
 
+  react-style-singleton@2.2.3(@types/react@19.2.2)(react@19.2.1):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   react-style-singleton@2.2.3(@types/react@19.2.7)(react@19.0.1):
     dependencies:
       get-nonce: 1.0.1
@@ -14846,15 +15225,17 @@ snapshots:
     dependencies:
       webpack: 5.105.0(esbuild@0.25.0)
 
-  styled-jsx@5.1.6(react@19.0.1):
+  styled-jsx@5.1.6(@babel/core@7.28.5)(react@19.2.1):
     dependencies:
       client-only: 0.0.1
-      react: 19.0.1
+      react: 19.2.1
+    optionalDependencies:
+      '@babel/core': 7.28.5
 
-  styled-jsx@5.1.6(react@19.2.1):
+  styled-jsx@5.1.6(react@19.0.1):
     dependencies:
       client-only: 0.0.1
-      react: 19.2.1
+      react: 19.0.1
 
   sucrase@3.35.0:
     dependencies:
@@ -15250,6 +15631,13 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  use-callback-ref@1.3.3(@types/react@19.2.2)(react@19.2.1):
+    dependencies:
+      react: 19.2.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   use-callback-ref@1.3.3(@types/react@19.2.7)(react@19.0.1):
     dependencies:
       react: 19.0.1
@@ -15257,6 +15645,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  use-sidecar@1.1.3(@types/react@19.2.2)(react@19.2.1):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   use-sidecar@1.1.3(@types/react@19.2.7)(react@19.0.1):
     dependencies:
       detect-node-es: 1.1.0