From b58b888451fe8f4d879e0ae5d8da82f9187e8595 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Mon, 6 May 2024 12:59:28 +0530
Subject: [PATCH 1/2] docs: add installion steps for sdk

---
 docs/docs/sdk/introduction.md | 58 +++++++++++++++++++++++++++++++++++
 docs/sidebars.js              | 11 +++++++
 2 files changed, 69 insertions(+)
 create mode 100644 docs/docs/sdk/introduction.md

diff --git a/docs/docs/sdk/introduction.md b/docs/docs/sdk/introduction.md
new file mode 100644
index 000000000..fa64840ce
--- /dev/null
+++ b/docs/docs/sdk/introduction.md
@@ -0,0 +1,58 @@
+# Introduction
+
+Frontier SDK provides wrapper arround [Frontier Apis](/apis/frontier-administration-api) and React components which you can integrate in your web app for user and organization management.
+
+## Setup
+
+Install the sdk in your project.
+
+```sh
+npm i @raystack/frontier
+```
+
+Import the `FrontierProvider` in the root of your project and wrap your application code with it.
+
+```javascript
+import { FrontierProvider } from "@raystack/frontier/react";
+
+const frontierConfig = {};
+
+function App() {
+  return (
+    <FrontierProvider config={frontierConfig}>
+      /* Your app code here */
+    </FrontierProvider>
+  );
+}
+```
+
+To access the frontier instance inside your application, import the `useFrontier` hook in your components.
+
+```javascript
+import { useFrontier } from "@raystack/frontier/react";
+
+export function DemoComponent() {
+  const { client } = useFrontier();
+  const [userLoader, setUserLoader] = useState(true);
+  const [user, setUser] = useState();
+
+  useEffect(() => {
+    async function getCurrentUser() {
+      try {
+        setUserLoader(true);
+        const userResp = await client.frontierServiceGetCurrentUser();
+        if (userResp?.data) {
+          setUseruser(userResp?.data?.user);
+        }
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setUserLoader(false);
+      }
+    }
+    getCurrentUser();
+  }, [client]);
+
+  return <div>demo</div>;
+}
+```
diff --git a/docs/sidebars.js b/docs/sidebars.js
index be4a42fe4..6e9ba0f7b 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -122,6 +122,17 @@ module.exports = {
         require("./docs/apis/sidebar.js")
       ]
     },
+    {
+      type: "category",
+      label: "SDK",
+      link: {
+        type: "doc",
+        id: "sdk/introduction",
+      },
+      items: [
+        "sdk/introduction",
+      ]
+    },
     {
       type: "category",
       label: "Reference",

From ac383b8e6a3d5eea17b828bc00ee46c6b8c60809 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Mon, 6 May 2024 14:54:26 +0530
Subject: [PATCH 2/2] docs: add table for sdk config

---
 docs/docs/sdk/configurations.md | 19 +++++++++++++++++++
 docs/sidebars.js                |  1 +
 2 files changed, 20 insertions(+)
 create mode 100644 docs/docs/sdk/configurations.md

diff --git a/docs/docs/sdk/configurations.md b/docs/docs/sdk/configurations.md
new file mode 100644
index 000000000..4c4ac478f
--- /dev/null
+++ b/docs/docs/sdk/configurations.md
@@ -0,0 +1,19 @@
+# Configuration
+
+| key                       | type              | default                                | description |
+| ------------------------- | ----------------- | -------------------------------------- | ----------- |
+| endpoint                  | string            | http://localhost:8080                  |             |
+| redirectLogin             | string            | http://localhost:3000                  |             |
+| redirectSignup            | string            | http://localhost:3000/signup           |             |
+| redirectMagicLinkVerify   | string            | http://localhost:3000/magiclink-verify |             |
+| callbackUrl               | string            | http://localhost:3000/callback         |             |
+| dateFormat                | string            |                                        |             |
+| shortDateFormat           | string            |                                        |             |
+| theme                     | 'dark' or 'light' | 'light'                                |             |
+| billing.successUrl        | string            | http://localhost:3000/success          |             |
+| billing.cancelUrl         | string            | http://localhost:3000/cancel           |             |
+| billing.cancelAfterTrial  | boolean           | true                                   |             |
+| billing.showPerMonthPrice | boolean           | false                                  |             |
+| billing.supportEmail      | string            | ''                                     |             |
+| billing.hideDecimals      | boolean           | false                                  |             |
+| billing.tokenProductId    | string            | ''                                     |             |
diff --git a/docs/sidebars.js b/docs/sidebars.js
index 6e9ba0f7b..d4776e521 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -131,6 +131,7 @@ module.exports = {
       },
       items: [
         "sdk/introduction",
+        "sdk/configurations",
       ]
     },
     {