void 0} />
+ );
+};
diff --git a/examples/react/src/components/Demo/DarkModeOptions.tsx b/examples/react/src/components/Demo/DarkModeOptions.tsx
new file mode 100644
index 00000000..9b04e17f
--- /dev/null
+++ b/examples/react/src/components/Demo/DarkModeOptions.tsx
@@ -0,0 +1,42 @@
+import { useContext } from 'react';
+import RadioButton from '../RadioButton';
+import { CustomizationsContext } from '../../contexts/CustomizationsContext';
+
+export const DarkModeOptions = () => {
+ const { darkMode, setDarkMode } = useContext(CustomizationsContext);
+
+ const handleDarkModeChange = (value: string) => {
+ setDarkMode(value as 'on' | 'off' | 'auto');
+ };
+
+ return (
+
+
+ Change Dark Mode
+
+
+ setDarkMode('on')}
+ />
+ setDarkMode('off')}
+ />
+
+
+
+ Change Theme
+
+
+
+
+ Documentation for customizing themes are{' '}
+
+ here
+
+
+
+
+ Use Custom Translations
+
+
+
+
+ Documentation for customizing translations are{' '}
+
+ here
+
+
+
+
+ );
+};
diff --git a/examples/react/src/components/Guide/AuthBasedSteps.tsx b/examples/react/src/components/Guide/AuthBasedSteps.tsx
new file mode 100644
index 00000000..93d5571b
--- /dev/null
+++ b/examples/react/src/components/Guide/AuthBasedSteps.tsx
@@ -0,0 +1,16 @@
+import { useCorbado } from '@corbado/react';
+import { passkeyListSnippet, authSnippet } from '../../utils/constants';
+
+export const AuthBasedSteps = () => {
+ const { isAuthenticated } = useCorbado();
+ return (
+
+
+ 3. Use {isAuthenticated ? `
+
+
+ {isAuthenticated ? passkeyListSnippet : authSnippet}
+
+
+ );
+};
diff --git a/examples/react/src/components/Guide/CommonSteps.tsx b/examples/react/src/components/Guide/CommonSteps.tsx
new file mode 100644
index 00000000..73962c20
--- /dev/null
+++ b/examples/react/src/components/Guide/CommonSteps.tsx
@@ -0,0 +1,25 @@
+import { installCommand, providerSnippet } from '../../utils/constants';
+
+export const CommonSteps = () => {
+ return (
+ <>
+
+ 1. Install the package
+
+
+ {installCommand}
+
+
+
+
+ 2. Wrap your app with the CorbadoProvider
+
+ {providerSnippet}
+
+
+
+ );
+};
diff --git a/examples/react/src/components/Guide/GuideHeader.tsx b/examples/react/src/components/Guide/GuideHeader.tsx
new file mode 100644
index 00000000..92489f2d
--- /dev/null
+++ b/examples/react/src/components/Guide/GuideHeader.tsx
@@ -0,0 +1,12 @@
+import { useCorbado } from '@corbado/react';
+import { passkeyGuideHeader, authGuideHeader, passkeyComponentBody, authComponentBody } from '../../utils/constants';
+
+export const GuideHeader = () => {
+ const { isAuthenticated } = useCorbado();
+ return (
+ <>
+ {isAuthenticated ? passkeyGuideHeader : authGuideHeader}
+ {isAuthenticated ? passkeyComponentBody : authComponentBody}
+
+ );
+};
diff --git a/examples/react/src/components/Guide/index.tsx b/examples/react/src/components/Guide/index.tsx
new file mode 100644
index 00000000..58933d48
--- /dev/null
+++ b/examples/react/src/components/Guide/index.tsx
@@ -0,0 +1,19 @@
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-tsx';
+import 'prismjs/themes/prism-tomorrow.min.css';
+import { GuideHeader } from './GuideHeader';
+import { CommonSteps } from './CommonSteps';
+import { AuthBasedSteps } from './AuthBasedSteps';
+
+export const Guide = () => {
+ return (
+ <>
+
+
+
+ );
+};
diff --git a/examples/react/src/components/Header.tsx b/examples/react/src/components/Header.tsx
index 9f32bee7..745b2189 100644
--- a/examples/react/src/components/Header.tsx
+++ b/examples/react/src/components/Header.tsx
@@ -1,42 +1,64 @@
-import { useCorbado } from '@corbado/react';
-import { useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useCorbadoSession } from '@corbado/react';
+import { faGithub } from '@fortawesome/free-brands-svg-icons/faGithub';
+import { faBook } from '@fortawesome/free-solid-svg-icons/faBook';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import 'prismjs/themes/prism-tomorrow.min.css';
+import { useState } from 'react';
export const Header = () => {
- const { isAuthenticated, logout, loading } = useCorbado();
- const navigate = useNavigate();
+ const { user, isAuthenticated } = useCorbadoSession();
+ const [bounceGihub, setBounceGithub] = useState(false);
+ const [bounceDocumentation, setBounceDocumentation] = useState(false);
- const handleLogout = useCallback(async () => {
- logout();
- navigate('/auth');
- }, [logout, navigate]);
+ const onMouseIn = (setBounce: (value: boolean) => void) => {
+ setBounce(true);
+ };
- const logoutButton = useMemo(() => {
- return (
-
- Logout
-
- );
- }, [handleLogout]);
-
- const loginButton = useMemo(() => {
- return (
- navigate('/auth')}
- >
- Login
-
- );
- }, [navigate]);
+ const onMouseOut = (setBounce: (value: boolean) => void) => {
+ setBounce(false);
+ };
return (
-