diff --git a/docs/default-theme.md b/docs/default-theme.md
index 8b46edddd..70100a240 100644
--- 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
index 36baacf27..af574f3f8 100644
--- 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
index 6d1d6a9ad..eb43b14c6 100644
--- 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
new file mode 100644
index 000000000..65e573844
--- /dev/null
+++ 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
index 9171dcce7..87bcc2b43 100644
--- 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
index 343c159b0..19182fdba 100644
--- 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
index 68efb7ca4..e91ef93b0 100644
--- 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
deleted file mode 100644
index e7427c690..000000000
--- a/unreleased-docs/skeleton.md
+++ /dev/null
@@ -1,137 +0,0 @@
----
-id: skeleton
-title: Skeleton
----
-
-import { ComponentTheme } from '../src/components';
-
-`Skeleton` is used to display the loading state of a component.
-
-## Implements
-
-- [`Box`](box.md)
-
-## Examples
-
-### Usage
-
-```SnackPlayer name=Skeleton%20Usage
-import React from 'react';
-import { NativeBaseProvider, Skeleton, Stack, Text, Center } from 'native-base';
-function SkeletonComponent() {
-  return (
-    <Stack width="90%">
-      <Skeleton variant="text" height={6} />
-      <Skeleton my={2} height={6} variant="rect" />
-      <Skeleton my={2} height={6} variant="circle" size={20} />
-    </Stack>
-  );
-}
-export default function () {
-  return (
-    <NativeBaseProvider>
-      <Center flex={1}>
-        <SkeletonComponent />
-      </Center>
-    </NativeBaseProvider>
-  );
-}
-```
-
-### Color
-
-```SnackPlayer name=Skeleton%20Color
-import React from 'react';
-import { NativeBaseProvider, Skeleton, VStack, Center } from 'native-base';
-function SkeletonComponent () {
-  return (
-    <VStack space={5} width="90%">
-      <Skeleton startColor="pink.600" endColor="purple.400" height="20px" />
-      <Skeleton startColor="#0dead0" endColor="#0face0" height="20px" />
-      <Skeleton
-        startColor="warning.200"
-        endColor="danger.200"
-        size={20}
-        variant="circle"
-      />
-    </VStack>
-  );
-}
-export default function () {
-  return (
-    <NativeBaseProvider>
-      <Center flex={1}>
-        <SkeletonComponent />
-      </Center>
-    </NativeBaseProvider>
-  );
-}
-```
-
-### IsLoaded
-
-```SnackPlayer name=Skeleton%20IsLoaded
-import React from 'react';
-import { NativeBaseProvider, Box, Skeleton, Stack, Text, Avatar, HStack, Image, Center } from 'native-base';
-function Composition({ loaded }: any) {
-  return (
-    <Stack size={200}>
-      <HStack alignItems="center">
-        {loaded ? (
-          <Avatar
-            name="Ankur Kedia"
-            source={{
-              uri: 'https://nativebase.github.io/img/icon.png',
-            }}
-          />
-        ) : (
-          <Skeleton variant="circle" size={12} />
-        )}
-        <Text fontWeight="bold" fontSize="lg" ml={2}>
-          {loaded ? 'NativeBase' : <Skeleton>NativeBase</Skeleton>}
-        </Text>
-      </HStack>
-      <Box size={200} mt={1}>
-        {loaded ? (
-          <Image
-            source={{
-              uri: 'https://www.w3schools.com/css/img_lights.jpg',
-            }}
-            alt="NativeBase logo"
-          />
-        ) : (
-          <Skeleton variant="rect" height="100%" />
-        )}
-      </Box>
-    </Stack>
-  );
-}
-
-export default function () {
-  return (
-    <NativeBaseProvider>
-      <Center flex={1}>
-        <HStack space={10}>
-          <Composition />
-          <Composition loaded />
-        </HStack>
-      </Center>
-    </NativeBaseProvider>
-  );
-}
-```
-
-## Props
-
-`Skeleton` composes [`Box`](box.md) so you can pass all [`Box props`](box.md#props) to it.
-
-| Name       | Type                     | Description                       | Default |
-| ---------- | ------------------------ | --------------------------------- | ------- |
-| startColor | string                   | The color at the animation start. | -       |
-| endColor   | string                   | The color at the animation end.   | -       |
-| variant    | `circle`, `rect`, `text` | Variation of Skeleton to use      | `text`  |
-| size       | number, string           | The size of the Skeleton          | -       |
-
-## Styling
-
-<ComponentTheme name="skeleton" />
diff --git a/versioned_docs/version-3.0.0-next.36/default-theme.md b/versioned_docs/version-3.0.0-next.36/default-theme.md
index 53b211019..3cafbb56e 100644
--- a/versioned_docs/version-3.0.0-next.36/default-theme.md
+++ b/versioned_docs/version-3.0.0-next.36/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/versioned_docs/version-3.0.0-next.36/select.md b/versioned_docs/version-3.0.0-next.36/select.md
index 5fe712cea..ba25b9233 100644
--- a/versioned_docs/version-3.0.0-next.36/select.md
+++ b/versioned_docs/version-3.0.0-next.36/select.md
@@ -3,7 +3,7 @@ id: select
 title: Select
 ---
 
-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. You can use native as well as styled one. The native one will have a different look and feel on each platform(Android, iOS and Web). The behaviour and look of styled variant will be same across all platforms.
 
diff --git a/versioned_docs/version-3.0.0-next.37/default-theme.md b/versioned_docs/version-3.0.0-next.37/default-theme.md
index 53b211019..3cafbb56e 100644
--- a/versioned_docs/version-3.0.0-next.37/default-theme.md
+++ b/versioned_docs/version-3.0.0-next.37/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/versioned_docs/version-3.0.0-next.37/select.md b/versioned_docs/version-3.0.0-next.37/select.md
index f968b76ff..ea6088626 100644
--- a/versioned_docs/version-3.0.0-next.37/select.md
+++ b/versioned_docs/version-3.0.0-next.37/select.md
@@ -3,7 +3,7 @@ id: select
 title: Select
 ---
 
-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/versioned_docs/version-3.0.0-next.38/default-theme.md b/versioned_docs/version-3.0.0-next.38/default-theme.md
index 53b211019..3cafbb56e 100644
--- a/versioned_docs/version-3.0.0-next.38/default-theme.md
+++ b/versioned_docs/version-3.0.0-next.38/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/versioned_docs/version-3.0.0-next.38/select.md b/versioned_docs/version-3.0.0-next.38/select.md
index f968b76ff..ea6088626 100644
--- a/versioned_docs/version-3.0.0-next.38/select.md
+++ b/versioned_docs/version-3.0.0-next.38/select.md
@@ -3,7 +3,7 @@ id: select
 title: Select
 ---
 
-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/versioned_docs/version-3.0.0-next.40/default-theme.md b/versioned_docs/version-3.0.0-next.40/default-theme.md
index 53b211019..3cafbb56e 100644
--- a/versioned_docs/version-3.0.0-next.40/default-theme.md
+++ b/versioned_docs/version-3.0.0-next.40/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/versioned_docs/version-3.0.0-next.40/select.md b/versioned_docs/version-3.0.0-next.40/select.md
index f968b76ff..ea6088626 100644
--- a/versioned_docs/version-3.0.0-next.40/select.md
+++ b/versioned_docs/version-3.0.0-next.40/select.md
@@ -3,7 +3,7 @@ id: select
 title: Select
 ---
 
-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/versioned_docs/version-3.0.0/default-theme.md b/versioned_docs/version-3.0.0/default-theme.md
index 6126f0909..011a33c24 100644
--- a/versioned_docs/version-3.0.0/default-theme.md
+++ b/versioned_docs/version-3.0.0/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/versioned_docs/version-3.0.0/select.md b/versioned_docs/version-3.0.0/select.md
index cfecd7ead..0268ca229 100644
--- a/versioned_docs/version-3.0.0/select.md
+++ b/versioned_docs/version-3.0.0/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/versioned_docs/version-3.0.3/default-theme.md b/versioned_docs/version-3.0.3/default-theme.md
index 6126f0909..011a33c24 100644
--- a/versioned_docs/version-3.0.3/default-theme.md
+++ b/versioned_docs/version-3.0.3/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/versioned_docs/version-3.0.3/select.md b/versioned_docs/version-3.0.3/select.md
index cfecd7ead..0268ca229 100644
--- a/versioned_docs/version-3.0.3/select.md
+++ b/versioned_docs/version-3.0.3/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/versioned_docs/version-3.0.6/default-theme.md b/versioned_docs/version-3.0.6/default-theme.md
index 6126f0909..011a33c24 100644
--- a/versioned_docs/version-3.0.6/default-theme.md
+++ b/versioned_docs/version-3.0.6/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/versioned_docs/version-3.0.6/select.md b/versioned_docs/version-3.0.6/select.md
index cfecd7ead..0268ca229 100644
--- a/versioned_docs/version-3.0.6/select.md
+++ b/versioned_docs/version-3.0.6/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/versioned_docs/version-3.0.7/default-theme.md b/versioned_docs/version-3.0.7/default-theme.md
index 6126f0909..011a33c24 100644
--- a/versioned_docs/version-3.0.7/default-theme.md
+++ b/versioned_docs/version-3.0.7/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/versioned_docs/version-3.0.7/select.md b/versioned_docs/version-3.0.7/select.md
index cfecd7ead..0268ca229 100644
--- a/versioned_docs/version-3.0.7/select.md
+++ b/versioned_docs/version-3.0.7/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/versioned_docs/version-3.1.0/default-theme.md b/versioned_docs/version-3.1.0/default-theme.md
index f4412006d..c407bbda9 100644
--- a/versioned_docs/version-3.1.0/default-theme.md
+++ b/versioned_docs/version-3.1.0/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.
 
@@ -31,11 +31,11 @@ To manage Typography options, the theme object supports the following keys:
 const typography = {
   letterSpacings: {
     '2xs': -1.5,
-    'xs': -0.5,
-    'sm': 0,
-    'md': 0.1,
-    'lg': 0.15,
-    'xl': 0.25,
+    xs: -0.5,
+    sm: 0,
+    md: 0.1,
+    lg: 0.15,
+    xl: 0.25,
     '2xl': 0.4,
     '3xl': 0.5,
     '4xl': 1.25,
@@ -43,11 +43,11 @@ const typography = {
   },
   lineHeights: {
     '2xs': 16,
-    'xs': 18,
-    'sm': 20,
-    'md': 22,
-    'lg': 24,
-    'xl': 28,
+    xs: 18,
+    sm: 20,
+    md: 22,
+    lg: 24,
+    xl: 28,
     '2xl': 32,
     '3xl': 40,
     '4xl': 48,
@@ -72,11 +72,11 @@ const typography = {
   },
   fontSizes: {
     '2xs': 10,
-    'xs': 12,
-    'sm': 14,
-    'md': 16,
-    'lg': 18,
-    'xl': 20,
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20,
     '2xl': 24,
     '3xl': 30,
     '4xl': 36,
diff --git a/versioned_docs/version-3.1.0/select.md b/versioned_docs/version-3.1.0/select.md
index cfecd7ead..0268ca229 100644
--- a/versioned_docs/version-3.1.0/select.md
+++ b/versioned_docs/version-3.1.0/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/versioned_docs/version-3.2.0/default-theme.md b/versioned_docs/version-3.2.0/default-theme.md
index 7a6ab70bf..9e7bd7484 100644
--- a/versioned_docs/version-3.2.0/default-theme.md
+++ b/versioned_docs/version-3.2.0/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/versioned_docs/version-3.2.0/select.md b/versioned_docs/version-3.2.0/select.md
index 2e335fbb9..7444a91a3 100644
--- a/versioned_docs/version-3.2.0/select.md
+++ b/versioned_docs/version-3.2.0/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/versioned_docs/version-3.2.1/default-theme.md b/versioned_docs/version-3.2.1/default-theme.md
index 7a6ab70bf..9e7bd7484 100644
--- a/versioned_docs/version-3.2.1/default-theme.md
+++ b/versioned_docs/version-3.2.1/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/versioned_docs/version-3.2.1/select.md b/versioned_docs/version-3.2.1/select.md
index cfecd7ead..0268ca229 100644
--- a/versioned_docs/version-3.2.1/select.md
+++ b/versioned_docs/version-3.2.1/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.