GeekyAnts · madhav23bansal · Nov 19, 2021 · Nov 12, 2021 · Nov 12, 2021 · Nov 12, 2021
diff --git a/docs/default-theme.md b/docs/default-theme.md
@@ -3,7 +3,7 @@ id: default-theme
 title: Default Theme
 ---
 
-import { ColorsBlock, FontBlocks, SpaceBlocks } from "/src/components/index";
+import { ColorsBlock, FontBlocks, SpaceBlocks } from "../src/components/index";
 
 The theme object is where you define your application's color palette, type scale, font stacks, breakpoints, border radius values, and more.
 

diff --git a/docs/pseudoProps.md b/docs/pseudoProps.md
@@ -48,10 +48,10 @@ Now all the pseudo props follow a specific order that defines which pseudo prop
 | \_hover        | 60               |
 | \_focus        | 50               |
 | \_focusVisible | 55               |
-| \_active       | 30               |
-| \_checked      | 30               |
 | \_readOnly     | 40               |
 | \_invalid      | 40               |
+| \_active       | 30               |
+| \_checked      | 30               |
 | \_web          | 10               |
 | \_android      | 10               |
 | \_ios          | 10               |

diff --git a/docs/select.md b/docs/select.md
@@ -5,7 +5,7 @@ title: Select
 
 import { ComponentTheme } from '../src/components';
 
-import { AndroidBadge } from "/src/components/index";
+import { AndroidBadge } from "../src/components/index";
 
 Select creates a dropdown list of items with the selected item in closed view.
 

diff --git a/docs/skeleton.md b/docs/skeleton.md
@@ -0,0 +1,52 @@
+---
+id: skeleton
+title: Skeleton
+---
+
+import { ComponentTheme } from '../src/components';
+
+`Skeleton` is used to display the loading state of a component.
+
+## Examples
+
+### Usage
+
+```ComponentSnackPlayer path=components,composites,Skeleton,Basic.tsx
+
+```
+
+### Color
+
+```ComponentSnackPlayer path=components,composites,Skeleton,Color.tsx
+
+```
+
+### Composition
+
+```ComponentSnackPlayer path=components,composites,Skeleton,Composition.tsx
+
+```
+
+### IsLoaded
+
+```ComponentSnackPlayer path=components,composites,Skeleton,isLoaded.tsx
+
+```
+
+## Props
+
+### Skeleton
+
+```ComponentPropTable path=composites,Skeleton,Skeleton.tsx
+
+```
+
+### SkeletonText
+
+```ComponentPropTable path=composites,Skeleton,SkeletonText.tsx
+
+```
+
+## Styling
+
+<ComponentTheme name="skeleton" />
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -32,7 +32,7 @@ module.exports = {
         content:
           'NativeBase 3.0 enables you to build a consistent design system across android, iOS & web. It is powered by React Native ARIA and Styled System. Rich, highly themeable and responsive.',
       },
-      { name: 'twitter:site', content: '@NativeBaseIO' },
+      { name: 'twitter:site', content: '@nativebase' },
       {
         property: 'og:title',
         content:
@@ -155,7 +155,7 @@ module.exports = {
           items: [
             {
               label: 'Twitter',
-              href: 'https://twitter.com/nativebaseio',
+              href: 'https://twitter.com/nativebase',
             },
             {
               label: 'Stack Overflow',

diff --git a/sidebars.js b/sidebars.js
@@ -115,7 +115,7 @@ module.exports = {
         'alert',
         // 'circularProgress',
         'progress',
-        // 'skeleton',
+        'skeleton',
         // 'snackBar',
         'spinner',
         'toast',

diff --git a/src/theme/Footer.js b/src/theme/Footer.js
@@ -4,7 +4,7 @@ import useThemeContext from '@theme/hooks/useThemeContext';
 const communities = [
   {
     name: 'Twitter',
-    url: 'https://twitter.com/nativebaseio',
+    url: 'https://twitter.com/nativebase',
   },
   {
     name: 'StackOverflow',
@@ -55,16 +55,14 @@ export default function Footer() {
   return (
     <div className="tailwind">
       <div
-        className={`w-full py-8 mt-10 ${
-          isDarkTheme ? 'bg-coolGray-800' : 'bg-coolGray-100'
-        } `}
+        className={`w-full py-8 mt-10 ${isDarkTheme ? 'bg-coolGray-800' : 'bg-coolGray-100'
+          } `}
       >
         <div className="flex flex-col justify-between w-full px-6 mx-auto text-gray-500 max-w-7xl lg:px-4 md:flex-row gap-y-10">
           <div className="">
             <div
-              className={`font-semibold  ${
-                isDarkTheme ? 'text-gray-100' : 'text-gray-900'
-              }`}
+              className={`font-semibold  ${isDarkTheme ? 'text-gray-100' : 'text-gray-900'
+                }`}
             >
               Docs
             </div>
@@ -73,9 +71,8 @@ export default function Footer() {
                 return (
                   <div className="text-gray-500 hover:underline" key={idx}>
                     <a
-                      className={` ${linkHoverColor} ${
-                        isDarkTheme ? 'text-gray-200' : 'text-gray-500'
-                      }`}
+                      className={` ${linkHoverColor} ${isDarkTheme ? 'text-gray-200' : 'text-gray-500'
+                        }`}
                       rel="noreferrer"
                       href={items.url}
                     >
@@ -88,9 +85,8 @@ export default function Footer() {
           </div>
           <div>
             <div
-              className={`font-semibold  ${
-                isDarkTheme ? 'text-gray-100' : 'text-gray-900'
-              }`}
+              className={`font-semibold  ${isDarkTheme ? 'text-gray-100' : 'text-gray-900'
+                }`}
             >
               Community
             </div>
@@ -99,9 +95,8 @@ export default function Footer() {
                 return (
                   <div className="hover:underline " key={idx}>
                     <a
-                      className={` ${linkHoverColor} ${
-                        isDarkTheme ? 'text-gray-200' : 'text-gray-500'
-                      }`}
+                      className={` ${linkHoverColor} ${isDarkTheme ? 'text-gray-200' : 'text-gray-500'
+                        }`}
                       rel="noreferrer"
                       target="_blank"
                       href={items.url}
@@ -115,9 +110,8 @@ export default function Footer() {
           </div>
           <div className="">
             <div
-              className={`font-semibold  ${
-                isDarkTheme ? 'text-gray-100' : 'text-gray-900'
-              }`}
+              className={`font-semibold  ${isDarkTheme ? 'text-gray-100' : 'text-gray-900'
+                }`}
             >
               More
             </div>
@@ -126,9 +120,8 @@ export default function Footer() {
                 return (
                   <div className="hover:underline" key={idx}>
                     <a
-                      className={` ${linkHoverColor} ${
-                        isDarkTheme ? 'text-gray-200' : 'text-gray-500'
-                      } `}
+                      className={` ${linkHoverColor} ${isDarkTheme ? 'text-gray-200' : 'text-gray-500'
+                        } `}
                       rel="noreferrer"
                       target="_blank"
                       href={items.url}
@@ -143,9 +136,8 @@ export default function Footer() {
           <div className="flex flex-col space-y-5 text-gray-500 list-none">
             <div className="hover:underline">
               <a
-                className={` ${linkHoverColor} ${
-                  isDarkTheme ? 'text-gray-200' : 'text-gray-500'
-                }`}
+                className={` ${linkHoverColor} ${isDarkTheme ? 'text-gray-200' : 'text-gray-500'
+                  }`}
                 href="https://geekyants.com/?utm_source=RnD&utm_medium=Landing_Page&utm_campaign=NativeBase_3"
                 target="_blank"
                 rel="noreferrer"
@@ -161,9 +153,8 @@ export default function Footer() {
                 href="https://www.linkedin.com/company/nativebase/about/?viewAsMember=true"
               >
                 <svg
-                  className={`w-6 h-6 ${
-                    isDarkTheme ? 'text-gray-200' : 'text-gray-500 '
-                  }  fill-current`}
+                  className={`w-6 h-6 ${isDarkTheme ? 'text-gray-200' : 'text-gray-500 '
+                    }  fill-current`}
                   aria-hidden="true"
                   focusable="false"
                   data-prefix="fab"
@@ -185,9 +176,8 @@ export default function Footer() {
                 href="https://www.instagram.com/nativebaseio/?hl=en"
               >
                 <svg
-                  className={`w-6 h-6 ${
-                    isDarkTheme ? 'text-gray-200' : 'text-gray-500 '
-                  }  fill-current`}
+                  className={`w-6 h-6 ${isDarkTheme ? 'text-gray-200' : 'text-gray-500 '
+                    }  fill-current`}
                   xmlns="http://www.w3.org/2000/svg"
                   data-name="Layer 1"
                   viewBox="0 0 24 24"
@@ -201,9 +191,8 @@ export default function Footer() {
                 href="https://www.youtube.com/channel/UCoL_iTwpY07vDs91974z3xA/about"
               >
                 <svg
-                  className={`w-6 h-6 ${
-                    isDarkTheme ? 'text-gray-200' : 'text-gray-500 '
-                  }  fill-current`}
+                  className={`w-6 h-6 ${isDarkTheme ? 'text-gray-200' : 'text-gray-500 '
+                    }  fill-current`}
                   version="1.0"
                   xmlns="http://www.w3.org/2000/svg"
                   width="512.000000pt"
@@ -233,9 +222,8 @@ export default function Footer() {
               </a>
             </div>
             <div
-              className={`text-sm ${
-                isDarkTheme ? 'text-gray-200' : 'text-gray-500 '
-              }`}
+              className={`text-sm ${isDarkTheme ? 'text-gray-200' : 'text-gray-500 '
+                }`}
             >
               Copyright © 2021 NativeBase
             </div>

diff --git a/unreleased-docs/skeleton.md b/unreleased-docs/skeleton.md