stack-auth · madster456 · Oct 10, 2025 · Sep 23, 2025 · Sep 24, 2025 · Sep 24, 2025
diff --git a/docs/docs-platform.yml b/docs/docs-platform.yml
@@ -273,6 +273,9 @@ pages:
   - path: others/self-host.mdx
     platforms: ["next", "react", "js", "python"] # All platforms
 
+  - path: others/mcp-setup.mdx
+    platforms: ["next", "react", "js", "python"] # All platforms
+
   - path: others/supabase.mdx
     platforms: ["next"] # Next only
 

diff --git a/docs/public/imgs/cursor.svg b/docs/public/imgs/cursor.svg
diff --git a/docs/public/imgs/mcp.svg b/docs/public/imgs/mcp.svg
diff --git a/docs/public/imgs/vscode.svg b/docs/public/imgs/vscode.svg
diff --git a/docs/src/components/icons.tsx b/docs/src/components/icons.tsx
@@ -345,3 +345,52 @@ export const Code = createLucideIcon('code', [
 export const Zap = createLucideIcon('zap', [
   ['path', { d: 'M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z', key: 'za6gxh' }],
 ]);
+
+// Stack Auth Logo Component
+export const StackAuthIcon = forwardRef<SVGSVGElement, LucideProps>(
+  ({ className, size = 40, color = 'currentColor', ...props }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        width={size}
+        height={size}
+        viewBox="0 0 200 242"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={cn('flex-shrink-0', className)}
+        {...props}
+      >
+        <path
+          d="M103.504 1.81227C101.251 0.68679 98.6002 0.687576 96.3483 1.81439L4.4201 47.8136C1.71103 49.1692 0 51.9387 0 54.968V130.55C0 133.581 1.7123 136.351 4.42292 137.706L96.4204 183.695C98.6725 184.82 101.323 184.82 103.575 183.694L168.422 151.271C173.742 148.611 180 152.479 180 158.426V168.879C180 171.91 178.288 174.68 175.578 176.035L103.577 212.036C101.325 213.162 98.6745 213.162 96.4224 212.036L11.5771 169.623C6.25791 166.964 0 170.832 0 176.779V187.073C0 190.107 1.71689 192.881 4.43309 194.234L96.5051 240.096C98.7529 241.216 101.396 241.215 103.643 240.094L195.571 194.235C198.285 192.881 200 190.109 200 187.076V119.512C200 113.565 193.741 109.697 188.422 112.356L131.578 140.778C126.258 143.438 120 139.57 120 133.623V123.17C120 120.14 121.712 117.37 124.422 116.014L195.578 80.4368C198.288 79.0817 200 76.3116 200 73.2814V54.9713C200 51.9402 198.287 49.1695 195.576 47.8148L103.504 1.81227Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+StackAuthIcon.displayName = 'StackAuthIcon';
+
+// Cursor Logo Component (actual Cursor logo)
+export const CursorIcon = forwardRef<SVGSVGElement, LucideProps>(
+  ({ className, size = 24, color = 'currentColor', ...props }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={cn('flex-shrink-0', className)}
+        {...props}
+      >
+        <path d="M12 2L2 7L12 12L22 7L12 2Z" fill={color}/>
+        <path d="M2 17L12 22L22 17" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M2 12L12 17L22 12" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      </svg>
+    );
+  }
+);
+
+CursorIcon.displayName = 'CursorIcon';
diff --git a/docs/src/components/mdx/button.tsx b/docs/src/components/mdx/button.tsx
@@ -0,0 +1,70 @@
+"use client";
+import * as React from "react";
+import { cn } from "../../lib/cn";
+import { buttonVariants } from "../ui/button";
+
+type BaseButtonProps = {
+  color?: 'primary' | 'secondary' | 'outline' | 'ghost',
+  size?: 'sm' | 'icon' | 'icon-sm',
+  icon?: React.ReactNode,
+  children: React.ReactNode,
+}
+
+type ButtonAsButton = BaseButtonProps &
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: never,
+  };
+
+type ButtonAsLink = BaseButtonProps &
+  React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string,
+  };
+
+type ButtonProps = ButtonAsButton | ButtonAsLink;
+
+export const Button = React.forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  ButtonProps
+>(({ className, color = 'secondary', size = 'sm', icon, href, children, ...props }, ref) => {
+  const buttonContent = (
+    <>
+      {icon && <span className="inline-flex items-center justify-center w-3.5 h-3.5">{icon}</span>}
+      {children}
+    </>
+  );
+
+  const buttonClasses = cn(
+    buttonVariants({
+      color,
+      size,
+      className: 'gap-2 no-underline hover:no-underline'
+    }),
+    className
+  );
+
+  if (href) {
+    return (
+      <a
+        role="button"
+        href={href}
+        className={buttonClasses}
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+      >
+        {buttonContent}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      ref={ref as React.Ref<HTMLButtonElement>}
+      className={buttonClasses}
+      {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+    >
+      {buttonContent}
+    </button>
+  );
+});
+
+Button.displayName = "Button";
diff --git a/docs/src/components/mdx/info.tsx b/docs/src/components/mdx/info.tsx
@@ -6,9 +6,10 @@ import { cn } from '../../lib/cn';
 export type InfoProps = {
   children: React.ReactNode,
   type?: 'info' | 'warning' | 'success',
+  size?: 'default' | 'small',
 }
 
-export function Info({ children, type = 'info' }: InfoProps) {
+export function Info({ children, type = 'info', size = 'default' }: InfoProps) {
   const colorVariants = {
     info: {
       border: 'border-blue-400/30 dark:border-blue-400/20',
@@ -32,28 +33,44 @@ export function Info({ children, type = 'info' }: InfoProps) {
 
   const colors = colorVariants[type];
 
+  const sizeVariants = {
+    default: {
+      container: 'my-6',
+      content: 'py-1 px-2',
+      icon: 'w-5 h-5 mr-3',
+    },
+    small: {
+      container: 'my-4',
+      content: 'py-0.5 px-1.5',
+      icon: 'w-4 h-4 mr-2',
+    }
+  };
+
+  const sizes = sizeVariants[size];
+
   return (
     <div className={cn(
-      'relative my-6 overflow-hidden rounded-lg',
+      'relative overflow-hidden rounded-lg',
       'border border-dashed',
       'shadow-sm',
+      sizes.container,
       colors.border,
       colors.bg
     )}>
-      <div className="flex items-baseline py-1 px-2">
-        <div className={cn("flex-shrink-0 mr-3", colors.icon)}>
+      <div className={cn("flex items-baseline", sizes.content)}>
+        <div className={cn("flex-shrink-0", colors.icon)}>
           {type === 'info' && (
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={sizes.icon}>
               <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z" clipRule="evenodd" />
             </svg>
           )}
           {type === 'warning' && (
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={sizes.icon}>
               <path fillRule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clipRule="evenodd" />
             </svg>
           )}
           {type === 'success' && (
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={sizes.icon}>
               <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" />
             </svg>
           )}

diff --git a/docs/src/mdx-components.tsx b/docs/src/mdx-components.tsx
@@ -18,6 +18,8 @@ import { AsideSection, CollapsibleMethodSection, CollapsibleTypesSection, Method
 
 import { SDKOverview } from './components/sdk/overview';
 
+import { CursorIcon, StackAuthIcon } from './components/icons';
+import { Button } from './components/mdx/button';
 import { JWTViewer } from './components/mdx/jwt-viewer';
 import { Mermaid } from './components/mdx/mermaid';
 import { Accordion, AccordionGroup, ClickableTableOfContents, CodeBlocks, Icon, Markdown, ParamField } from './components/mdx/sdk-components';
@@ -80,6 +82,11 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     CollapsibleTypesSection,
     SDKOverview,
     AppleSecretGenerator,
+    // Logo Icons
+    StackAuthIcon,
+    CursorIcon,
+    // UI Components
+    Button,
     JWTViewer
   } as MDXComponents;
 }
diff --git a/docs/templates/meta.json b/docs/templates/meta.json
@@ -34,6 +34,7 @@
     "others/cli-authentication",
     "others/self-host",
     "others/supabase",
+    "others/mcp-setup",
     "others/convex",
     "sdk",
     "components"