diff --git a/.vscode/.DS_Store b/.vscode/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/.vscode/.DS_Store differ
diff --git a/.vscode/accordion.code-snippets b/.vscode/accordion.code-snippets
new file mode 100644
index 0000000..efb3a05
--- /dev/null
+++ b/.vscode/accordion.code-snippets
@@ -0,0 +1,14 @@
+{
+    "DocuAccordion": {
+      "prefix": "accordion",
+      "body": [
+        "<Accordion title=\"${1:Plain Text}\">",
+        "    this is an example of plain text content from the accordion component and below is markdown ;",
+        "    1. number one",
+        "    2. number two",
+        "    3. number three",
+        "</Accordion>"
+      ],
+      "description": "Create a DocuAccordion component with markdown list."
+    }
+  }
diff --git a/.vscode/button.code-snippets b/.vscode/button.code-snippets
new file mode 100644
index 0000000..3142994
--- /dev/null
+++ b/.vscode/button.code-snippets
@@ -0,0 +1,16 @@
+{
+    "DocuButton": {
+      "prefix": "button",
+      "body": [
+        "<Button",
+        "    text=\"${1:Learn More}\"",
+        "    href=\"${2:https://learn.example.com}\"",
+        "    icon=\"${3:MoveUpRight}\"",
+        "    size=\"${4:md}\"",
+        "    target=\"${5:_blank}\"",
+        "    variation=\"${6:primary}\"",
+        "/>"
+      ],
+      "description": "Create a DocuButton component on markdown."
+    }
+  }
diff --git a/.vscode/card.code-snippets b/.vscode/card.code-snippets
new file mode 100644
index 0000000..02af419
--- /dev/null
+++ b/.vscode/card.code-snippets
@@ -0,0 +1,16 @@
+{
+    "DocuCards": {
+      "prefix": "card",
+      "body": [
+        "<CardGroup cols={2}>",
+            "<Card title=\"${1:Heading2}\" icon=\"${2:Heading2}\">",
+            "   This is an example of card content with columns.",
+            "</Card>",
+            "<Card title=\"${3:Heading3}\" icon=\"${4:Heading3}\">",
+            "   This is an example of card content with columns.",
+            "</Card>",
+        "</CardGroup>"
+      ],
+      "description": "Create a DocuCards component on markdown."
+    }
+  }
diff --git a/.vscode/codeblock.code-snippets b/.vscode/codeblock.code-snippets
new file mode 100644
index 0000000..ec5d1a1
--- /dev/null
+++ b/.vscode/codeblock.code-snippets
@@ -0,0 +1,16 @@
+{
+    "DocuCodeBlock": {
+        "prefix": "codeblock",
+        "description": "Checks if the rocket is stable and prevents a crash if it's not.",
+        "body": [
+            "```${1:javascript:main.js} showLineNumbers {${2:3-4}}",
+            "function isRocketAboutToCrash() {",
+            "    // Check if the rocket is stable",
+            "    if (!isStable()) {",
+            "        NoCrash(); // Prevent the crash",
+            "    }",
+            "}",
+            "```",
+        ],
+    }
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..4ef01b0
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+    "recommendations": []
+}
diff --git a/.vscode/image-link.code-snippets b/.vscode/image-link.code-snippets
new file mode 100644
index 0000000..b4a86c5
--- /dev/null
+++ b/.vscode/image-link.code-snippets
@@ -0,0 +1,16 @@
+{
+    "DocuImage": {
+      "prefix": "image",
+      "body": [
+        "![${1:Alt text for the image}](${2:https://via.placeholder.com/150})"
+      ],
+      "description": "Snippet untuk menampilkan image komponen."
+    },
+    "DocuLink": {
+      "prefix": "link",
+      "body": [
+        "[${1:Text Link}](${2:https://www.openai.com})"
+      ],
+      "description": "Snippet untuk menampilkan link komponen."
+    }
+}
diff --git a/.vscode/metadata.code-snippets b/.vscode/metadata.code-snippets
new file mode 100644
index 0000000..5cd7ce9
--- /dev/null
+++ b/.vscode/metadata.code-snippets
@@ -0,0 +1,13 @@
+{
+    "DocuMetadata": {
+        "prefix": "metadata",
+        "body": [
+            "---",
+            "title : ${1:judul post}",
+            "description : ${2:deskripsi singkat dari post}",
+            "date : ${3:10-12-2024}",
+            "---"
+        ],
+        "description": "Snippet untuk membuat metadata."
+    }
+}
diff --git a/.vscode/note.code-snippets b/.vscode/note.code-snippets
new file mode 100644
index 0000000..0126504
--- /dev/null
+++ b/.vscode/note.code-snippets
@@ -0,0 +1,38 @@
+{
+    "DocuNote - General Note": {
+      "prefix": "note",
+      "body": [
+        "<Note type=\"note\" title=\"Note\">",
+        "  ${1:This is a general note to convey information to the user.}",
+        "</Note>"
+      ],
+      "description": "Insert a general note"
+    },
+    "DocuNote - Danger Note": {
+      "prefix": "danger",
+      "body": [
+        "<Note type=\"danger\" title=\"Danger\">",
+        "  ${1:This is a danger alert to notify the user of a critical issue.}",
+        "</Note>"
+      ],
+      "description": "Insert a danger note"
+    },
+    "DocuNote - Warning Note": {
+      "prefix": "warning",
+      "body": [
+        "<Note type=\"warning\" title=\"Warning\">",
+        "  ${1:This is a warning alert for issues that require attention.}",
+        "</Note>"
+      ],
+      "description": "Insert a warning note"
+    },
+    "DocuNote - Success Note": {
+      "prefix": "success",
+      "body": [
+        "<Note type=\"success\" title=\"Success\">",
+        "  ${1:This is a success message to inform the user of successful actions.}",
+        "</Note>"
+      ],
+      "description": "Insert a success note"
+    }
+}
diff --git a/.vscode/stepper.code-snippets b/.vscode/stepper.code-snippets
new file mode 100644
index 0000000..704d492
--- /dev/null
+++ b/.vscode/stepper.code-snippets
@@ -0,0 +1,24 @@
+{
+    "DocuStepper": {
+      "prefix": "stepper",
+      "body": [
+        "<Stepper>",
+        "  <StepperItem title=\"${1:Step 1: Clone the DocuBook Repository}\">",
+        "    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,",
+        "    felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc",
+        "    dolor in lorem.",
+        "  </StepperItem>${2:}",
+        "</Stepper>"
+      ],
+      "description": "Snippet untuk menampilkan stepper komponen."
+    },
+    "DocuStepperItem": {
+      "prefix": "item",
+      "body": [
+        "<StepperItem title=\"${1:Step X: Your Step Title}\">",
+        "  ${2:Your step description here.}",
+        "</StepperItem>${3:}"
+      ],
+      "description": "Snippet untuk menambahkan item baru ke dalam Stepper."
+    }
+}
diff --git a/.vscode/table.code-snippets b/.vscode/table.code-snippets
new file mode 100644
index 0000000..202f150
--- /dev/null
+++ b/.vscode/table.code-snippets
@@ -0,0 +1,20 @@
+{
+    "DocuTable": {
+      "prefix": "table",
+      "body": [
+        "| **${1:Feature}**                     | **${2:Description}**                                       |",
+        "| ------------------------------- | ----------------------------------------------------- |",
+        "| ${3:MDX Support}                     | ${4:Write interactive documentation with MDX.}             |",
+        "| Nested Pages                    | Organize content in a nested, hierarchical structure. |",
+        "| Blog Section                    | Include a dedicated blog section.                     |",
+        "| Pagination                      | Split content across multiple pages.                  |",
+        "| Syntax Highlighting             | Highlight code for better readability.                |",
+        "| Code Line Highlighting & Titles | Highlight specific lines with descriptive titles.     |",
+        "| Interactive Code Blocks         | Language-specific and interactive code display.       |",
+        "| Custom Markdown Components      | Embed custom, reusable components in your docs.       |",
+        "| Static Site Generation          | Generate a static, high-performance site.             |",
+        "| SEO-Optimized                   | Structured for optimal search engine indexing.        |"
+      ],
+      "description": "Create a DocuTable component on markdown."
+    }
+  }
diff --git a/.vscode/tabs.code-snippets b/.vscode/tabs.code-snippets
new file mode 100644
index 0000000..02e2f36
--- /dev/null
+++ b/.vscode/tabs.code-snippets
@@ -0,0 +1,33 @@
+{
+    "DocuTabs": {
+      "prefix": "tabs",
+      "body": [
+        "<Tabs defaultValue=\"${1:java}\" className=\"pt-5 pb-1\">",
+        "  <TabsList>",
+        "    <TabsTrigger value=\"${2:java}\">Java</TabsTrigger>",
+        "    <TabsTrigger value=\"${3:typescript}\">TypeScript</TabsTrigger>",
+        "  </TabsList>",
+        "  <TabsContent value=\"${4:java}\">",
+        "    ```java",
+        "    // HelloWorld.java",
+        "    public class HelloWorld {",
+        "        public static void main(String[] args) {",
+        "            System.out.println(\"Hello, World!\");",
+        "        }",
+        "    }",
+        "    ```",
+        "  </TabsContent>",
+        "  <TabsContent value=\"${5:typescript}\">",
+        "    ```typescript",
+        "    // helloWorld.ts",
+        "    function helloWorld(): void {",
+        "        console.log(\"Hello, World!\");",
+        "    }",
+        "    helloWorld();",
+        "    ```",
+        "  </TabsContent>",
+        "</Tabs>"
+      ],
+      "description": "Create a DocuTabs component with Java and TypeScript examples."
+    }
+  }
diff --git a/.vscode/tooltips.code-snippets b/.vscode/tooltips.code-snippets
new file mode 100644
index 0000000..9299451
--- /dev/null
+++ b/.vscode/tooltips.code-snippets
@@ -0,0 +1,9 @@
+{
+    "DocuTooltips": {
+      "prefix": "tooltips",
+      "body": [
+        "${1:What do you know about }<Tooltip text=\"${2:DocuBook}\" tip=\"${3:npx @docubook/create@latest}\" /> ${4:? Create interactive nested documentations using MDX.}",
+      ],
+      "description": "Create a DocuTooltips component with version examples."
+    }
+  }
diff --git a/.vscode/typography.code-snippets b/.vscode/typography.code-snippets
new file mode 100644
index 0000000..d534da3
--- /dev/null
+++ b/.vscode/typography.code-snippets
@@ -0,0 +1,33 @@
+{
+    "DocuH2": {
+      "prefix": "h2",
+      "body": [
+        "## Heading 2"
+      ],
+      "description": "Tag Heading 2 for markdown."
+    },
+    "DocuH3": {
+        "prefix": "h3",
+        "body": [
+            "### Heading 3"
+        ],
+        "description": "Tag Heading 3 for markdown."
+    },
+    "DocuText": {
+        "prefix": "text",
+        "body": [
+            "DocuBook is proudly **open-source**! 🎉 We believe in creating an accessible, collaborative platform that thrives on community contributions."
+        ],
+        "description": "Tag Paragraph for markdown."
+    },
+    "Docu-UndorderList": {
+        "prefix": "unorderlist",
+        "body": [
+            "- ${1:**Next.js 14** - The powerful React framework optimized for production.}",
+            "- **Tailwind CSS** - Utility-first styling for quick, clean designs.",
+            "- **Shadcn-UI** - Elegant, accessible components for a polished look.",
+            "- **next-mdx-remote** - Enables MDX support for dynamic, interactive Markdown content."
+        ],
+        "description": "Tag Undorderlist for markdown."
+    },
+}
diff --git a/.vscode/youtube.code-snippets b/.vscode/youtube.code-snippets
new file mode 100644
index 0000000..6ec60a4
--- /dev/null
+++ b/.vscode/youtube.code-snippets
@@ -0,0 +1,9 @@
+{
+    "DocuVideo": {
+        "prefix": "youtube",
+        "body": [
+            "<Youtube videoId=\"${1:zQnBQ4tB3ZA}\" />"
+        ],
+        "description": "Snippet untuk menampilkan komponen video Youtube."
+    }
+}