fixed small things in documentation

apps/dev/src/components/custom-button.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import React from "react";
+import { Button as DefaultButton, useDesign } from "@stackframe/stack";
+
+export const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof DefaultButton>
+>(({
+  variant = "primary",
+  color,
+  size = "md",
+  loading = false,
+  disabled = false,
+  ...props
+}, ref) => {
+  const { colors } = useDesign();
+
+  return <button
+    style={{
+      padding: ({ sm: 5, md: 10, lg: 15 } as const)[size],
+      backgroundColor: color || ({
+        primary: colors.primaryColor,
+        secondary: colors.secondaryColor,
+      } as const)[variant],
+    }}
+    disabled={loading || disabled}
+    {...props}
+  />;
+});
+
+Button.displayName = "Button";

apps/dev/src/components/provider.tsx

@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import { CssVarsProvider, getInitColorSchemeScript } from '@mui/joy/styles';
 import CssBaseline from '@mui/joy/CssBaseline';
 import { StackTheme, StackJoyTheme } from "@stackframe/stack";
+import { Button } from "./custom-button";
 
 type UI = 'default' | 'joy';
 const CurrentUIContext = React.createContext<[UI, React.Dispatch<React.SetStateAction<UI>>]>(['default', () => {}]);
@@ -24,8 +25,9 @@ function JoyProvider(props: any) {
 }
 
 function DefaultProvider(props: any) {
+  // theme={{ components: { Button }}}>
   return (
-    <StackTheme>
+    <StackTheme> 
       {props.children}
     </StackTheme>
   );

docs/docs/02-customization/02-custom-colors.md

@@ -9,7 +9,7 @@ title: Colors & Color Mode
 
 If you want to spend minimal time on styling but still want to align with your brand, you can customize the colors of the Stack app. Colors are stored in React context and can be easily overridden.
 
-There are five variables that you can override:
+There are a few variables that you can override:
 - `primaryColor`: The primary color used for components like button with primary variant.
 - `secondaryColor`: The secondary color used for components like button with secondary variant.
 - `neutralColor`: The color used for separators and borders.

docs/docs/02-customization/03-custom-components.md

@@ -4,28 +4,33 @@ sidebar_position: 1
 
 # Custom Components
 
-Even though Stack provides beautiful components out of the box, sometimes you might want to achieve coherent visual across your whole website.Stack allow you to replace low-level components like button, input, and text, with your own custom components as long as the props are the same.  The high-level components like sign-in, sign-up, or oauth will automatically use the custom components. This is useful if you want to achieve deep customization. 
+# Custom Components
 
-We currently already implemented the support for MUI Joy for you, so you can use it directly with minimal setup (see [MUI Joy](#mui-joy-setup)). Support of other common libraries like Chakra UI, Daisy UI, and Shadcn are comming soon. If you use the libraries that are currently not supported or you have your own custom components, you can follow customizing components guide below.
+Even though Stack provides beautiful components out of the box, sometimes you might want to achieve a coherent visual style across your entire website. Stack allows you to replace low-level components like buttons, inputs, and text with your own custom components, as long as the props are the same. The high-level components like sign-in, sign-up, or OAuth will automatically use the custom components. This is useful if you want to achieve deep customization.
+
+We currently already implemented support for MUI Joy, so you can use it directly with minimal setup (see [MUI Joy](#mui-joy-setup)). Support for other common libraries like Chakra UI, Daisy UI, and Shadcn is coming soon. If you use libraries that are currently not supported or you have your own custom components, you can follow the customizing components guide below.
 
 ## Customizing Components
 
-Here is an example of how you can customize the button component. For demostration purpose, we will keep the styling minimal. First we will create a new button component with `ButtonProps`. You can use `useDesign` hook to get the colors scheme (see more in [Custom Colors](/docs/customization/custom-colors)). You can also ignore the color scheme if you have a different way to handle colors.
+Here is an example of how you can customize the button component. For demonstration purposes, we will keep the styling minimal. We will create a new button component. You can use the `useDesign` hook to get the color scheme (see more in [Custom Colors](/docs/customization/custom-colors)). You can also ignore the color scheme if you have a different way to handle colors.
 
 ```jsx
 'use client';
 
-import { ButtonProps, useDesign } from "@stackframe/stack";
+import React from "react";
+import { Button as DefaultButton, useDesign } from "@stackframe/stack";
 
-export default function CustomButton({
+export const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof DefaultButton>
+>(({
   variant = "primary",
   color,
   size = "md",
   loading = false,
   disabled = false,
-  children,
   ...props
-} : ButtonProps) {
+}, ref) => {
   const { colors } = useDesign();
 
   return <button
@@ -38,10 +43,10 @@ export default function CustomButton({
     }}
     disabled={loading || disabled}
     {...props}
-  >
-    {children}
-  </button>;
-}
+  />;
+});
+
+Button.displayName = "Button";
 ```
 
 Then you can pass the custom button to the `StackTheme` (if you followed the get started guide, you can find it in your `layout.tsx` file) as follows:
@@ -67,13 +72,19 @@ const theme = {
 Now if you check out your sign-in page, you will see the sign-in button there is using your custom button component. If you import `Button` from `@stackframe/stack`, it will also use your custom button component as well.
 
 Here is a list of low-level components that you can customize, stared ones are the most used and recommended to customize first:
-- Button ⭐
-- Container
-- Separator
-- Input ⭐
-- Label
-- Link
-- Text ⭐
+
+- `Input` ⭐
+- `Button` ⭐
+- `Container`
+- `Separator`
+- `Label`
+- `Link`
+- `Text` ⭐
+- `Popover`, `PopoverTrigger`, `PopoverContent`
+- `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSeparator`
+- `Avatar`, `AvatarFallback`, `AvatarImage`
+- `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`
+- `Card`, `CardHeader`, `CardContent`, `CardFooter`, `CardDescription`
 
 ## MUI Joy setup
 

docs/docs/03-api-documentation/01-app.md

@@ -94,6 +94,11 @@ export const stackApp = new StackServerApp({
 
     The URL of the forgot password page.
 
+- `account-settings`   
+    Default: `"/handler/account-settings"`
+
+    The URL of the account settings page.
+
 - `handler`    
     Default: `"/handler"`  
 

packages/stack/src/components-core-joy/button.tsx

@@ -5,14 +5,6 @@ import { Button as DefaultButton } from "../components-core";
 import { Button as JoyButton } from '@mui/joy';
 import Color from "color";
 
-// export default function Button({
-//   variant = "primary",
-//   color,
-//   size = "md",
-//   loading = false,
-//   ...props
-// } : React.ComponentProps<typeof DefaultButton>) {
-
 export const Button = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof DefaultButton>