diff --git a/new-docs/pages/draft/button-group/api.ts b/new-docs/pages/draft/button-group/api.ts
new file mode 100644
index 00000000..64fcbd98
--- /dev/null
+++ b/new-docs/pages/draft/button-group/api.ts
@@ -0,0 +1,19 @@
+import { APIData } from "../../../utils/api/api";
+
+export const ButtonGroupAPI: APIData[] = [
+ {
+ prop: "skipChildTypeCheck",
+ description: {
+ type: "boolean",
+ description: "",
+ },
+ },
+ {
+ prop: "fill",
+ description: {
+ type: "boolean",
+ description:
+ "If set to true, the button's width is 100% of its container.",
+ },
+ },
+];
diff --git a/new-docs/pages/draft/button-group/button-group.tsx b/new-docs/pages/draft/button-group/button-group.tsx
new file mode 100644
index 00000000..c5d9b1b4
--- /dev/null
+++ b/new-docs/pages/draft/button-group/button-group.tsx
@@ -0,0 +1,19 @@
+import { GoSearch } from "react-icons/go";
+import { Button, ButtonGroup, Input, Select } from "@moai/core/src";
+
+export const ButtonGroupExample = (): JSX.Element => {
+ const input = ;
+ const button = ;
+ const select = ;
+ return (
+
+
+ {[
+ { fill: false, element: select },
+ { fill: true, element: input },
+ { fill: false, element: button },
+ ]}
+
+
+ );
+};
diff --git a/new-docs/pages/draft/button-group/index.stories.mdx b/new-docs/pages/draft/button-group/index.stories.mdx
new file mode 100644
index 00000000..9bc11855
--- /dev/null
+++ b/new-docs/pages/draft/button-group/index.stories.mdx
@@ -0,0 +1,11 @@
+import { ButtonGroupExample } from "./button-group";
+import { APIReference } from "../../../utils/api/api";
+import { ButtonGroupAPI } from "./api";
+
+## Button Group
+
+
+
+### API Reference
+
+
diff --git a/new-docs/pages/draft/menu/api.ts b/new-docs/pages/draft/menu/api.ts
new file mode 100644
index 00000000..c6a6103c
--- /dev/null
+++ b/new-docs/pages/draft/menu/api.ts
@@ -0,0 +1,19 @@
+import { APIData } from "../../../utils/api/api";
+
+export const MenuAPI: APIData[] = [
+ {
+ prop: "items",
+ description: {
+ type: "MenuItemProps[]",
+ description: "",
+ },
+ required: true,
+ },
+ {
+ prop: "onEsc",
+ description: {
+ type: "(() => void)",
+ description: "",
+ },
+ },
+];
diff --git a/new-docs/pages/draft/menu/index.stories.mdx b/new-docs/pages/draft/menu/index.stories.mdx
new file mode 100644
index 00000000..db3545cd
--- /dev/null
+++ b/new-docs/pages/draft/menu/index.stories.mdx
@@ -0,0 +1,11 @@
+import { MenuExample } from "./menu";
+import { APIReference } from "../../../utils/api/api";
+import { MenuAPI } from "./api";
+
+## Menu
+
+
+
+### API Reference
+
+
diff --git a/new-docs/pages/draft/menu/menu.tsx b/new-docs/pages/draft/menu/menu.tsx
new file mode 100644
index 00000000..6d779a68
--- /dev/null
+++ b/new-docs/pages/draft/menu/menu.tsx
@@ -0,0 +1,13 @@
+import { Menu } from "@moai/core/src";
+
+export const MenuExample = (): JSX.Element => {
+ return (
+