diff --git a/docs/utils/getRoutes.ts b/docs/utils/getRoutes.ts
new file mode 100644
index 0000000..8b1ceab
--- /dev/null
+++ b/docs/utils/getRoutes.ts
@@ -0,0 +1,25 @@
+import fs from 'fs';
+import path from 'path';
+
+type Folder = 'get-started' | 'components' | 'layout';
+
+export type Folders = {
+   [key in Folder]: string;
+};
+
+export const getRoutes = () => {
+   const folders: Folders = {
+      'components': path.join(process.cwd(), 'content/components'),
+      'get-started': path.join(process.cwd(), 'content/get-started'),
+      'layout': path.join(process.cwd(), 'content/layout'),
+   };
+
+   const routes = Object.keys(folders).map((folder: string) => {
+      const files = fs.readdirSync(folders[folder as Folder]);
+      return files.map((file) => {
+         const name = file.replace('.mdx', '');
+         return `/docs/${folder}/${name}`;
+      });
+   });
+   return routes.flat();
+};
diff --git a/docs/utils/getToc.ts b/docs/utils/getToc.ts
new file mode 100644
index 0000000..b10ccfe
--- /dev/null
+++ b/docs/utils/getToc.ts
@@ -0,0 +1,45 @@
+import {headingRank} from 'hast-util-heading-rank';
+import {toString} from 'hast-util-to-string';
+import {visit} from 'unist-util-visit';
+import {Root} from 'hast';
+import {titleToSlug} from './titleToSlug';
+
+interface Heading {
+   id: string;
+   title: string;
+   level: number;
+}
+
+type Rank = 1 | 2 | 3 | 4 | 5 | 6;
+
+interface ExtractHeadingsConfig {
+   rank: Rank;
+   headings: Heading[];
+}
+
+export default function rehypeExtractHeadings({
+   rank = 1,
+   headings,
+}: ExtractHeadingsConfig) {
+   return (tree: Root) => {
+      visit(tree, 'element', (node) => {
+         const rankNode = headingRank(node);
+         if (
+            (rankNode === 1 ||
+               rankNode === 2 ||
+               rankNode === 3 ||
+               rankNode === 4 ||
+               rankNode === 5) &&
+            node.properties
+         ) {
+            headings.push({
+               title: toString(node),
+               id: titleToSlug(toString(node)),
+               level: parseInt(node.tagName[1]),
+            });
+         }
+      });
+   };
+}
+
+export interface Headings extends Heading {}
diff --git a/docs/utils/items.tsx b/docs/utils/items.tsx
new file mode 100644
index 0000000..f57fe01
--- /dev/null
+++ b/docs/utils/items.tsx
@@ -0,0 +1,69 @@
+interface Items {
+  title: string;
+  links: Link[];
+}
+interface Link {
+  href: string;
+  children: string | React.ReactNode;
+  disabled?: boolean;
+}
+
+export const items: Items[] = [
+  {
+    title: "Get started",
+    links: [
+      {
+        href: "/docs/get-started/installation",
+        children: "Installation",
+      },
+      {
+        href: "/docs/get-started/usage",
+        children: "Usage",
+      },
+      {
+        href: "/docs/get-started/customization",
+        children: "Customization",
+        disabled: true,
+      },
+      {
+        href: "/docs/get-started/theme",
+        children: "Theme",
+      },
+      {
+        href: "/docs/get-started/dark-mode",
+        children: "Dark mode",
+      },
+    ],
+  },
+
+  {
+    title: "Components",
+    links: [
+      { href: "/docs/components/button", children: "Button" },
+      { href: "/docs/components/input", children: "Input" },
+      { href: "/docs/components/textarea", children: "Textarea" },
+      { href: "/docs/components/checkbox", children: "Checkbox" },
+      {
+        href: "/docs/components/button-group",
+        children: "ButtonGroup",
+      },
+      { href: "/docs/components/radio", children: "Radio" },
+      { href: "/docs/components/label", children: "Label" },
+      { href: "/docs/components/drawer", children: "Drawer" },
+      { href: "/docs/components/modal", children: "Modal" },
+      { href: "/docs/components/select", children: "Select" },
+      { href: "/docs/components/switch", children: "Switch" },
+      { href: "/docs/components/collapse", children: "Collapse" },
+      { href: "/docs/components/table", children: "Table" },
+      { href: "/docs/components/breadcrumb", children: "Breadcrumb" },
+      { href: "/docs/components/badge", children: "Badge" },
+      { href: "/docs/components/alert", children: "Alert" },
+      { href: "/docs/components/tooltip", children: "Tooltip" },
+      { href: "/docs/components/avatar", children: "Avatar" },
+    ],
+  },
+  {
+    title: "Credits",
+    links: [{ href: "/docs", children: "Overview" }],
+  },
+];
diff --git a/docs/utils/pallete.ts b/docs/utils/pallete.ts
new file mode 100644
index 0000000..6dd3ec1
--- /dev/null
+++ b/docs/utils/pallete.ts
@@ -0,0 +1,145 @@
+export const pallete = [
+  {
+    title: "Brands",
+    colors: [
+      {
+        title: "Blue",
+        values: [
+          {
+            "blue-50": "text-content1",
+            "blue-100": "text-content1",
+            "blue-200": "text-content1",
+            "blue-300": "text-content1",
+            "blue-400": "text-content1",
+            "blue-500": "text-white",
+            "blue-600": "text-white",
+            "blue-700": "text-white",
+            "blue-800": "text-white",
+          },
+        ],
+      },
+      {
+        title: "Green",
+        values: [
+          {
+            "green-50": "text-content1",
+            "green-100": "text-content1",
+            "green-200": "text-content1",
+            "green-300": "text-content1",
+            "green-400": "text-content1",
+            "green-500": "text-white",
+            "green-600": "text-white",
+            "green-700": "text-white",
+            "green-800": "text-white",
+          },
+        ],
+      },
+      {
+        title: "Red",
+        values: [
+          {
+            "red-50": "text-content1",
+            "red-100": "text-content1",
+            "red-200": "text-content1",
+            "red-300": "text-content1",
+            "red-400": "text-content1",
+            "red-500": "text-white",
+            "red-600": "text-white",
+            "red-700": "text-white",
+            "red-800": "text-white",
+          },
+        ],
+      },
+      {
+        title: "Yellow",
+        values: [
+          {
+            "yellow-50": "text-content1",
+            "yellow-100": "text-content1",
+            "yellow-200": "text-content1",
+            "yellow-300": "text-content1",
+            "yellow-400": "text-content1",
+            "yellow-500": "text-white",
+            "yellow-600": "text-white",
+            "yellow-700": "text-white",
+            "yellow-800": "text-white",
+          },
+        ],
+      },
+      {
+        title: "Pink",
+        values: [
+          {
+            "pink-50": "text-content1",
+            "pink-100": "text-content1",
+            "pink-200": "text-content1",
+            "pink-300": "text-content1",
+            "pink-400": "text-content1",
+            "pink-500": "text-white",
+            "pink-600": "text-white",
+            "pink-700": "text-white",
+            "pink-800": "text-white",
+          },
+        ],
+      },
+      {
+        title: "Purple",
+        values: [
+          {
+            "purple-50": "text-content1",
+            "purple-100": "text-content1",
+            "purple-200": "text-content1",
+            "purple-300": "text-content1",
+            "purple-400": "text-content1",
+            "purple-500": "text-white",
+            "purple-600": "text-white",
+            "purple-700": "text-white",
+            "purple-800": "text-white",
+          },
+        ],
+      },
+
+      {
+        title: "Gray",
+        values: [
+          {
+            "gray-50": "text-content1",
+            "gray-100": "text-content1",
+            "gray-200": "text-content1",
+            "gray-300": "text-content1",
+            "gray-400": "text-content1",
+            "gray-500": "text-white",
+            "gray-600": "text-white",
+            "gray-700": "text-white",
+            "gray-800": "text-white",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Background",
+    colors: [
+      {
+        title: "Background",
+        values: [
+          {
+            backgroundPrimary: "text-content1",
+            backgroundSecondary: "text-content1",
+            border: "text-content1",
+          },
+        ],
+      },
+      {
+        title: "Content",
+        values: [
+          {
+            content1: "blackInverted",
+            content2: "blackInverted",
+            content3: "blackInverted",
+          },
+        ],
+      },
+    ],
+  },
+];