diff --git a/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx b/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
index 52f2e5acf68..4c427e2b15a 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
@@ -248,7 +248,7 @@ You can swich between different variations of your theme with the ["theme" prop]
 ### Custom CSS classes [#custom-css-classes]
 
 You can use custom CSS classes for the following elements:
-`"button"`, `"container"`, `"anchor"`, `"divider"`, `"label"`, `"input"`, `"loader"`, `"message"`.
+`"button"`, `"container"`, `"anchor"`, `"divider"`, `"label"`, `"input"`, `"loader"`, `"message"`. 
 
 ```js title=/src/index.js
 import { createClient } from '@supabase/supabase-js'
@@ -260,6 +260,9 @@ const App = () => (
   <Auth
     supabaseClient={supabase}
     appearance={{
+      // If you want to extend the default styles instead of overriding it, set this to true
+      extend: false,
+      // Your custom classes
       className: {
         anchor: 'my-awesome-anchor',
         button: 'my-awesome-button',