From 189244c019920d0b35d4a7452f99dfec86eddc55 Mon Sep 17 00:00:00 2001
From: 8845musign <hiroki.yokouchi@dr-ubie.com>
Date: Thu, 19 Oct 2023 22:23:15 +0900
Subject: [PATCH 1/7] update cli messages

Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
---
 .scaffdog/example.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.scaffdog/example.md b/.scaffdog/example.md
index 02cd256..b54a15a 100644
--- a/.scaffdog/example.md
+++ b/.scaffdog/example.md
@@ -4,8 +4,8 @@ root: '.'
 output: '**/*'
 ignore: []
 questions:
-  exampleKey: What is the exampleKey (e.g., stack)?
-  exampleName: What is the exampleName (e.g., nested)?
+  exampleKey: What is the exampleKey (e.g., link-button)?
+  exampleName: What is the exampleName (e.g., with-icon)?
 ---
 
 # `src/components/react/examples/{{ inputs.exampleKey }}/{{ inputs.exampleName | pascal }}.tsx`

From 691f4e0b9a7d53b6385482ac1102a7c4452b87a6 Mon Sep 17 00:00:00 2001
From: 8845musign <hiroki.yokouchi@dr-ubie.com>
Date: Thu, 19 Oct 2023 22:23:45 +0900
Subject: [PATCH 2/7] refactor name

Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
---
 src/components/react/Example.tsx         | 14 +++++++-------
 src/components/react/ExampleSwitcher.tsx |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/react/Example.tsx b/src/components/react/Example.tsx
index f72555f..28d5d11 100644
--- a/src/components/react/Example.tsx
+++ b/src/components/react/Example.tsx
@@ -6,21 +6,21 @@ import type { Example } from '@utils/server';
 import type { FC } from 'react';
 
 interface Props {
-  exampleUrlAndFilePath: Example;
+  example: Example;
 }
 
-const Example: FC<Props> = ({ exampleUrlAndFilePath }) => {
+const Example: FC<Props> = ({ example }) => {
   return (
     <div className={styles.example}>
-      <a className={styles.externalLink} href={exampleUrlAndFilePath.url} target="_blank" rel="noreferrer">
+      <a className={styles.externalLink} href={example.url} target="_blank" rel="noreferrer">
         Open Window
       </a>
 
       <div className={styles.demo}>
         <iframe
           className={styles.demoFrame}
-          src={exampleUrlAndFilePath.url}
-          title={`${exampleUrlAndFilePath.name} example`}
+          src={example.url}
+          title={`${example.name} example`}
           loading="lazy"
         ></iframe>
       </div>
@@ -34,9 +34,9 @@ const Example: FC<Props> = ({ exampleUrlAndFilePath }) => {
             margin: '0',
           }}
         >
-          {exampleUrlAndFilePath.code}
+          {example.code}
         </SyntaxHighlighter>
-        <CopyButton className={styles.copy} text={exampleUrlAndFilePath.code} />
+        <CopyButton className={styles.copy} text={example.code} />
       </div>
     </div>
   );
diff --git a/src/components/react/ExampleSwitcher.tsx b/src/components/react/ExampleSwitcher.tsx
index 7d1a21b..103055c 100644
--- a/src/components/react/ExampleSwitcher.tsx
+++ b/src/components/react/ExampleSwitcher.tsx
@@ -37,7 +37,7 @@ const ExampleSwitcher: FC<Props> = ({ examples }) => {
           ))}
         </Stack>
 
-        {currentExample && <Example exampleUrlAndFilePath={currentExample} />}
+        {currentExample && <Example example={currentExample} />}
       </Stack>
     </>
   );

From 8c74969bfd7e0db9a80641a73c94871ac8f1d670 Mon Sep 17 00:00:00 2001
From: 8845musign <hiroki.yokouchi@dr-ubie.com>
Date: Thu, 19 Oct 2023 22:25:48 +0900
Subject: [PATCH 3/7] Migration of examples from storybook

Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
---
 .../react/examples/accordion/Small.tsx        |  12 +++
 .../examples/action-half-modal/Customized.tsx |  33 ++++++
 .../examples/action-half-modal/Fullscreen.tsx |  24 +++++
 .../action-half-modal/NoCloseButton.tsx       |  31 ++++++
 .../examples/action-half-modal/Secondary.tsx  |  32 ++++++
 .../examples/action-modal/Customized.tsx      |  29 +++++
 .../examples/action-modal/FixedHeight.tsx     |  26 +++++
 .../react/examples/action-modal/Secondary.tsx |  28 +++++
 .../react/examples/button/Block.tsx           |  26 +++++
 .../react/examples/button/Default.tsx         |  11 +-
 .../react/examples/button/Disabled.tsx        |  27 +++++
 src/components/react/examples/button/Size.tsx |  16 +++
 .../react/examples/button/WithIcon.tsx        |  89 ++++++++++++++++
 .../react/examples/checkbox/Disabled.tsx      |  18 ++++
 .../react/examples/checkbox/SingleUse.tsx     |  17 +++
 .../react/examples/checkbox/Size.tsx          |  17 +++
 .../react/examples/input/Disabled.tsx         |   8 ++
 .../react/examples/input/IsInvalid.tsx        |   8 ++
 src/components/react/examples/input/Types.tsx |  81 ++++++++++++++
 .../react/examples/link-button/Block.tsx      |  26 +++++
 .../react/examples/link-button/Default.tsx    |  21 +++-
 .../react/examples/link-button/Disabled.tsx   |  29 +++++
 .../react/examples/link-button/Size.tsx       |  20 ++++
 .../react/examples/link-button/WithIcon.tsx   | 100 ++++++++++++++++++
 .../react/examples/link-card/Default.tsx      |  20 ++--
 .../react/examples/link-card/WithIcon.tsx     |  16 +++
 .../examples/message-modal/FixedHeight.tsx    |  20 ++++
 .../examples/message-modal/OverlayDarker.tsx  |  20 ++++
 .../examples/message-modal/WithHeader.tsx     |  20 ++++
 .../react/examples/radio-button/Disabled.tsx  |  39 +++++++
 .../react/examples/radio-button/Size.tsx      |  31 ++++++
 .../react/examples/radio-card/Block.tsx       |  25 +++++
 .../react/examples/radio-card/Default.tsx     |  46 +++++---
 .../react/examples/select/Disabled.tsx        |  16 +++
 .../react/examples/select/IsInvalid.tsx       |  16 +++
 .../stack/BlockLevelElementsToFullWidth.tsx   |  29 +++++
 .../react/examples/stack/Centralized.tsx      |  24 +++++
 .../react/examples/stack/Default.tsx          |   8 +-
 .../react/examples/stack/MarkupAsList.tsx     |  15 +++
 .../react/examples/stack/Nested.tsx           |  28 +++++
 .../react/examples/stack/PutOnTheEnd.tsx      |  15 +++
 .../stack/{Horizontal.tsx => Vertical.tsx}    |   0
 src/components/react/examples/text/Body.tsx   |  82 ++++++++++++++
 src/components/react/examples/text/Button.tsx |  28 +++++
 src/components/react/examples/text/Color.tsx  |  20 ++++
 .../react/examples/text/Default.tsx           |  10 +-
 .../react/examples/text/Heading.tsx           |  38 +++++++
 src/components/react/examples/text/Note.tsx   |  81 ++++++++++++++
 src/components/react/examples/text/Tag.tsx    |  28 +++++
 .../react/examples/textarea/Disabled.tsx      |   8 ++
 .../react/examples/textarea/IsInvalid.tsx     |   8 ++
 .../components/examples/accordion/small.astro |   8 ++
 .../action-half-modal/Customized.astro        |   8 ++
 .../action-half-modal/fullscreen.astro        |   8 ++
 .../action-half-modal/no-close-button.astro   |   8 ++
 .../action-half-modal/secondary.astro         |   8 ++
 .../examples/action-modal/customized.astro    |   8 ++
 .../examples/action-modal/fixed-height.astro  |   8 ++
 .../examples/action-modal/secondary.astro     |   8 ++
 .../components/examples/button/block.astro    |   8 ++
 .../components/examples/button/disabled.astro |   8 ++
 .../components/examples/button/size.astro     |   8 ++
 .../examples/button/with-icon.astro           |   8 ++
 .../examples/checkbox/disabled.astro          |   8 ++
 .../examples/checkbox/single-use.astro        |   8 ++
 .../components/examples/checkbox/size.astro   |   8 ++
 .../components/examples/input/disabled.astro  |   8 ++
 .../examples/input/is-invalid.astro           |   8 ++
 .../components/examples/input/types.astro     |   8 ++
 .../examples/link-button/block.astro          |   8 ++
 .../examples/link-button/disabled.astro       |   8 ++
 .../examples/link-button/size.astro           |   8 ++
 .../examples/link-button/with-icon.astro      |   8 ++
 .../examples/link-card/with-icon.astro        |   8 ++
 .../examples/message-modal/fixed-height.astro |   8 ++
 .../message-modal/overlay-darker.astro        |   8 ++
 .../examples/message-modal/with-header.astro  |   8 ++
 .../examples/radio-button/disabled.astro      |   8 ++
 .../examples/radio-button/size.astro          |   8 ++
 .../examples/radio-card/block.astro           |   8 ++
 .../components/examples/select/disabled.astro |   8 ++
 .../examples/select/is-invalid.astro          |   8 ++
 .../block-level-elements-to-full-width.astro  |   8 ++
 .../examples/stack/centralized.astro          |   8 ++
 .../examples/stack/markup-as-list.astro       |   8 ++
 .../components/examples/stack/nested.astro    |   8 ++
 .../examples/stack/put-on-the-end.astro       |   8 ++
 .../{horizontal.astro => vertical.astro}      |   4 +-
 src/pages/components/examples/text/body.astro |   8 ++
 .../components/examples/text/button.astro     |   8 ++
 .../components/examples/text/color.astro      |   8 ++
 .../components/examples/text/heading.astro    |   8 ++
 src/pages/components/examples/text/note.astro |   8 ++
 src/pages/components/examples/text/tag.astro  |   8 ++
 .../examples/textarea/disabled.astro          |   8 ++
 .../examples/textarea/is-invalid.astro        |   8 ++
 src/utils/server/example.ts                   |  20 +++-
 97 files changed, 1750 insertions(+), 46 deletions(-)
 create mode 100644 src/components/react/examples/accordion/Small.tsx
 create mode 100644 src/components/react/examples/action-half-modal/Customized.tsx
 create mode 100644 src/components/react/examples/action-half-modal/Fullscreen.tsx
 create mode 100644 src/components/react/examples/action-half-modal/NoCloseButton.tsx
 create mode 100644 src/components/react/examples/action-half-modal/Secondary.tsx
 create mode 100644 src/components/react/examples/action-modal/Customized.tsx
 create mode 100644 src/components/react/examples/action-modal/FixedHeight.tsx
 create mode 100644 src/components/react/examples/action-modal/Secondary.tsx
 create mode 100644 src/components/react/examples/button/Block.tsx
 create mode 100644 src/components/react/examples/button/Disabled.tsx
 create mode 100644 src/components/react/examples/button/Size.tsx
 create mode 100644 src/components/react/examples/button/WithIcon.tsx
 create mode 100644 src/components/react/examples/checkbox/Disabled.tsx
 create mode 100644 src/components/react/examples/checkbox/SingleUse.tsx
 create mode 100644 src/components/react/examples/checkbox/Size.tsx
 create mode 100644 src/components/react/examples/input/Disabled.tsx
 create mode 100644 src/components/react/examples/input/IsInvalid.tsx
 create mode 100644 src/components/react/examples/input/Types.tsx
 create mode 100644 src/components/react/examples/link-button/Block.tsx
 create mode 100644 src/components/react/examples/link-button/Disabled.tsx
 create mode 100644 src/components/react/examples/link-button/Size.tsx
 create mode 100644 src/components/react/examples/link-button/WithIcon.tsx
 create mode 100644 src/components/react/examples/link-card/WithIcon.tsx
 create mode 100644 src/components/react/examples/message-modal/FixedHeight.tsx
 create mode 100644 src/components/react/examples/message-modal/OverlayDarker.tsx
 create mode 100644 src/components/react/examples/message-modal/WithHeader.tsx
 create mode 100644 src/components/react/examples/radio-button/Disabled.tsx
 create mode 100644 src/components/react/examples/radio-button/Size.tsx
 create mode 100644 src/components/react/examples/radio-card/Block.tsx
 create mode 100644 src/components/react/examples/select/Disabled.tsx
 create mode 100644 src/components/react/examples/select/IsInvalid.tsx
 create mode 100644 src/components/react/examples/stack/BlockLevelElementsToFullWidth.tsx
 create mode 100644 src/components/react/examples/stack/Centralized.tsx
 create mode 100644 src/components/react/examples/stack/MarkupAsList.tsx
 create mode 100644 src/components/react/examples/stack/Nested.tsx
 create mode 100644 src/components/react/examples/stack/PutOnTheEnd.tsx
 rename src/components/react/examples/stack/{Horizontal.tsx => Vertical.tsx} (100%)
 create mode 100644 src/components/react/examples/text/Body.tsx
 create mode 100644 src/components/react/examples/text/Button.tsx
 create mode 100644 src/components/react/examples/text/Color.tsx
 create mode 100644 src/components/react/examples/text/Heading.tsx
 create mode 100644 src/components/react/examples/text/Note.tsx
 create mode 100644 src/components/react/examples/text/Tag.tsx
 create mode 100644 src/components/react/examples/textarea/Disabled.tsx
 create mode 100644 src/components/react/examples/textarea/IsInvalid.tsx
 create mode 100644 src/pages/components/examples/accordion/small.astro
 create mode 100644 src/pages/components/examples/action-half-modal/Customized.astro
 create mode 100644 src/pages/components/examples/action-half-modal/fullscreen.astro
 create mode 100644 src/pages/components/examples/action-half-modal/no-close-button.astro
 create mode 100644 src/pages/components/examples/action-half-modal/secondary.astro
 create mode 100644 src/pages/components/examples/action-modal/customized.astro
 create mode 100644 src/pages/components/examples/action-modal/fixed-height.astro
 create mode 100644 src/pages/components/examples/action-modal/secondary.astro
 create mode 100644 src/pages/components/examples/button/block.astro
 create mode 100644 src/pages/components/examples/button/disabled.astro
 create mode 100644 src/pages/components/examples/button/size.astro
 create mode 100644 src/pages/components/examples/button/with-icon.astro
 create mode 100644 src/pages/components/examples/checkbox/disabled.astro
 create mode 100644 src/pages/components/examples/checkbox/single-use.astro
 create mode 100644 src/pages/components/examples/checkbox/size.astro
 create mode 100644 src/pages/components/examples/input/disabled.astro
 create mode 100644 src/pages/components/examples/input/is-invalid.astro
 create mode 100644 src/pages/components/examples/input/types.astro
 create mode 100644 src/pages/components/examples/link-button/block.astro
 create mode 100644 src/pages/components/examples/link-button/disabled.astro
 create mode 100644 src/pages/components/examples/link-button/size.astro
 create mode 100644 src/pages/components/examples/link-button/with-icon.astro
 create mode 100644 src/pages/components/examples/link-card/with-icon.astro
 create mode 100644 src/pages/components/examples/message-modal/fixed-height.astro
 create mode 100644 src/pages/components/examples/message-modal/overlay-darker.astro
 create mode 100644 src/pages/components/examples/message-modal/with-header.astro
 create mode 100644 src/pages/components/examples/radio-button/disabled.astro
 create mode 100644 src/pages/components/examples/radio-button/size.astro
 create mode 100644 src/pages/components/examples/radio-card/block.astro
 create mode 100644 src/pages/components/examples/select/disabled.astro
 create mode 100644 src/pages/components/examples/select/is-invalid.astro
 create mode 100644 src/pages/components/examples/stack/block-level-elements-to-full-width.astro
 create mode 100644 src/pages/components/examples/stack/centralized.astro
 create mode 100644 src/pages/components/examples/stack/markup-as-list.astro
 create mode 100644 src/pages/components/examples/stack/nested.astro
 create mode 100644 src/pages/components/examples/stack/put-on-the-end.astro
 rename src/pages/components/examples/stack/{horizontal.astro => vertical.astro} (55%)
 create mode 100644 src/pages/components/examples/text/body.astro
 create mode 100644 src/pages/components/examples/text/button.astro
 create mode 100644 src/pages/components/examples/text/color.astro
 create mode 100644 src/pages/components/examples/text/heading.astro
 create mode 100644 src/pages/components/examples/text/note.astro
 create mode 100644 src/pages/components/examples/text/tag.astro
 create mode 100644 src/pages/components/examples/textarea/disabled.astro
 create mode 100644 src/pages/components/examples/textarea/is-invalid.astro

diff --git a/src/components/react/examples/accordion/Small.tsx b/src/components/react/examples/accordion/Small.tsx
new file mode 100644
index 0000000..f0e8fc4
--- /dev/null
+++ b/src/components/react/examples/accordion/Small.tsx
@@ -0,0 +1,12 @@
+import { Accordion } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Small: FC = () => {
+  return (
+    <Accordion header="夏目漱石「私の個人主義」" size="small">
+      何は時分どうもどんな観念顔というののところを云ったいまし。とうてい今日に説明院は現にこういう反対たますくらいから思わて来るないにも撲殺なるたたて、始終にも願うただですん。
+    </Accordion>
+  );
+};
+
+export default Small;
diff --git a/src/components/react/examples/action-half-modal/Customized.tsx b/src/components/react/examples/action-half-modal/Customized.tsx
new file mode 100644
index 0000000..1595e41
--- /dev/null
+++ b/src/components/react/examples/action-half-modal/Customized.tsx
@@ -0,0 +1,33 @@
+import { ActionHalfModal } from '@ubie/ubie-ui';
+import { useCallback, useState } from 'react';
+import type { FC } from 'react';
+
+const Customized: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionHalfModal
+        header="削除します"
+        primaryActionColor="alert"
+        primaryActionLabel="削除"
+        onPrimaryAction={onClose}
+        overlayOpacity="darker"
+        closeLabel="キャンセル"
+        open={open}
+        onClose={onClose}
+      >
+        body
+      </ActionHalfModal>
+    </>
+  );
+};
+
+export default Customized;
diff --git a/src/components/react/examples/action-half-modal/Fullscreen.tsx b/src/components/react/examples/action-half-modal/Fullscreen.tsx
new file mode 100644
index 0000000..fa2a513
--- /dev/null
+++ b/src/components/react/examples/action-half-modal/Fullscreen.tsx
@@ -0,0 +1,24 @@
+import { ActionHalfModal } from '@ubie/ubie-ui';
+import { useCallback, useState } from 'react';
+import type { FC } from 'react';
+
+const Fullscreen: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionHalfModal header="モーダル" open={open} onClose={onClose} fullscreen>
+        body
+      </ActionHalfModal>
+    </>
+  );
+};
+
+export default Fullscreen;
diff --git a/src/components/react/examples/action-half-modal/NoCloseButton.tsx b/src/components/react/examples/action-half-modal/NoCloseButton.tsx
new file mode 100644
index 0000000..261bcc9
--- /dev/null
+++ b/src/components/react/examples/action-half-modal/NoCloseButton.tsx
@@ -0,0 +1,31 @@
+import { ActionHalfModal } from '@ubie/ubie-ui';
+import { useCallback, useState } from 'react';
+import type { FC } from 'react';
+
+const NoCloseButton: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionHalfModal
+        onPrimaryAction={onClose}
+        primaryActionLabel="確認"
+        showClose={false}
+        header="モーダル"
+        open={open}
+        onClose={onClose}
+      >
+        body
+      </ActionHalfModal>
+    </>
+  );
+};
+
+export default NoCloseButton;
diff --git a/src/components/react/examples/action-half-modal/Secondary.tsx b/src/components/react/examples/action-half-modal/Secondary.tsx
new file mode 100644
index 0000000..7b9f6b6
--- /dev/null
+++ b/src/components/react/examples/action-half-modal/Secondary.tsx
@@ -0,0 +1,32 @@
+import { ActionHalfModal } from '@ubie/ubie-ui';
+import { useCallback, useState } from 'react';
+import type { FC } from 'react';
+
+const Secondary: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionHalfModal
+        primaryActionLabel="アクション1"
+        onPrimaryAction={onClose}
+        secondaryActionLabel="アクション2"
+        onSecondaryAction={onClose}
+        header="モーダル"
+        open={open}
+        onClose={onClose}
+      >
+        body
+      </ActionHalfModal>
+    </>
+  );
+};
+
+export default Secondary;
diff --git a/src/components/react/examples/action-modal/Customized.tsx b/src/components/react/examples/action-modal/Customized.tsx
new file mode 100644
index 0000000..799d516
--- /dev/null
+++ b/src/components/react/examples/action-modal/Customized.tsx
@@ -0,0 +1,29 @@
+import { ActionModal } from '@ubie/ubie-ui';
+import { useState } from 'react';
+import type { FC } from 'react';
+
+const Secondary: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionModal
+        header="削除します"
+        closeLabel="キャンセル"
+        overlayOpacity="darker"
+        primaryActionLabel="削除"
+        primaryActionColor="alert"
+        open={open}
+        onPrimaryAction={() => setOpen(false)}
+        onClose={() => setOpen(false)}
+      >
+        Default
+      </ActionModal>
+    </>
+  );
+};
+
+export default Secondary;
diff --git a/src/components/react/examples/action-modal/FixedHeight.tsx b/src/components/react/examples/action-modal/FixedHeight.tsx
new file mode 100644
index 0000000..39f8d26
--- /dev/null
+++ b/src/components/react/examples/action-modal/FixedHeight.tsx
@@ -0,0 +1,26 @@
+import { ActionModal } from '@ubie/ubie-ui';
+import { useState } from 'react';
+import type { FC } from 'react';
+
+const FixedHeight: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionModal
+        primaryActionLabel="回答を見る"
+        open={open}
+        fixedHeight
+        onPrimaryAction={() => setOpen(false)}
+        onClose={() => setOpen(false)}
+      >
+        <p>Default</p>
+      </ActionModal>
+    </>
+  );
+};
+
+export default FixedHeight;
diff --git a/src/components/react/examples/action-modal/Secondary.tsx b/src/components/react/examples/action-modal/Secondary.tsx
new file mode 100644
index 0000000..c9dd779
--- /dev/null
+++ b/src/components/react/examples/action-modal/Secondary.tsx
@@ -0,0 +1,28 @@
+import { ActionModal } from '@ubie/ubie-ui';
+import { useState } from 'react';
+import type { FC } from 'react';
+
+const Secondary: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionModal
+        header="モーダル"
+        primaryActionLabel="回答を見る"
+        open={open}
+        onPrimaryAction={() => setOpen(false)}
+        secondaryActionLabel={'このまま回答を続ける'}
+        onSecondaryAction={() => setOpen(false)}
+        onClose={() => setOpen(false)}
+      >
+        Default
+      </ActionModal>
+    </>
+  );
+};
+
+export default Secondary;
diff --git a/src/components/react/examples/button/Block.tsx b/src/components/react/examples/button/Block.tsx
new file mode 100644
index 0000000..200a098
--- /dev/null
+++ b/src/components/react/examples/button/Block.tsx
@@ -0,0 +1,26 @@
+import { Button } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Block: FC = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+      <div>
+        <Button block size="small" variant="secondary">
+          ボタン
+        </Button>
+      </div>
+      <div>
+        <Button block size="medium" variant="secondary">
+          ボタン
+        </Button>
+      </div>
+      <div>
+        <Button block size="large" variant="secondary">
+          ボタン
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Block;
diff --git a/src/components/react/examples/button/Default.tsx b/src/components/react/examples/button/Default.tsx
index c652b97..66f5dd3 100644
--- a/src/components/react/examples/button/Default.tsx
+++ b/src/components/react/examples/button/Default.tsx
@@ -2,7 +2,16 @@ import { Button } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Default: FC = () => {
-  return <Button>ボタン</Button>;
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px', flexWrap: 'wrap' }}>
+      <Button>ボタン</Button>
+      <Button variant="secondary">ボタン</Button>
+      <Button variant="accent">ボタン</Button>
+      <Button variant="alert">ボタン</Button>
+      <Button variant="text">ボタン</Button>
+      <Button variant="textAlert">ボタン</Button>
+    </div>
+  );
 };
 
 export default Default;
diff --git a/src/components/react/examples/button/Disabled.tsx b/src/components/react/examples/button/Disabled.tsx
new file mode 100644
index 0000000..df991f3
--- /dev/null
+++ b/src/components/react/examples/button/Disabled.tsx
@@ -0,0 +1,27 @@
+import { Button } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Disabled: FC = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px', flexWrap: 'wrap' }}>
+      <Button disabled>ボタン</Button>
+      <Button variant="secondary" disabled>
+        ボタン
+      </Button>
+      <Button variant="accent" disabled>
+        ボタン
+      </Button>
+      <Button variant="alert" disabled>
+        ボタン
+      </Button>
+      <Button variant="text" disabled>
+        ボタン
+      </Button>
+      <Button variant="textAlert" disabled>
+        ボタン
+      </Button>
+    </div>
+  );
+};
+
+export default Disabled;
diff --git a/src/components/react/examples/button/Size.tsx b/src/components/react/examples/button/Size.tsx
new file mode 100644
index 0000000..ca6443a
--- /dev/null
+++ b/src/components/react/examples/button/Size.tsx
@@ -0,0 +1,16 @@
+import { Button } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Default: FC = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px' }}>
+      <Button size="small">Small</Button>
+
+      <Button size="medium">Medium</Button>
+
+      <Button>Large</Button>
+    </div>
+  );
+};
+
+export default Default;
diff --git a/src/components/react/examples/button/WithIcon.tsx b/src/components/react/examples/button/WithIcon.tsx
new file mode 100644
index 0000000..55af145
--- /dev/null
+++ b/src/components/react/examples/button/WithIcon.tsx
@@ -0,0 +1,89 @@
+import { BlankLinkIcon, UbieIcon, TrashIcon } from '@ubie/ubie-icons';
+import { Button, Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Default: FC = () => {
+  return (
+    <Stack spacing="lg">
+      <Stack spacing="lg" as="dl">
+        <dt style={{ fontWeight: 'bold' }}>Default Position</dt>
+        <dd style={{ margin: 0 }}>
+          <div
+            style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px', flexWrap: 'wrap' }}
+          >
+            <Button icon={<UbieIcon />}>ボタン</Button>
+            <Button icon={<UbieIcon />} variant="secondary">
+              ボタン
+            </Button>
+            <Button icon={<UbieIcon />} variant="accent">
+              ボタン
+            </Button>
+            <Button icon={<UbieIcon />} variant="alert">
+              ボタン
+            </Button>
+            <Button icon={<UbieIcon />} variant="text">
+              ボタン
+            </Button>
+            <Button icon={<TrashIcon />} variant="textAlert">
+              ボタン
+            </Button>
+          </div>
+        </dd>
+      </Stack>
+
+      <Stack spacing="lg" as="dl">
+        <dt style={{ fontWeight: 'bold' }}>Position Suffix</dt>
+        <dd style={{ margin: 0 }}>
+          <div
+            style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px', flexWrap: 'wrap' }}
+          >
+            <Button suffixIcon={<BlankLinkIcon />}>ボタン</Button>
+            <Button suffixIcon={<BlankLinkIcon />} variant="secondary">
+              ボタン
+            </Button>
+            <Button suffixIcon={<BlankLinkIcon />} variant="accent">
+              ボタン
+            </Button>
+            <Button suffixIcon={<BlankLinkIcon />} variant="alert">
+              ボタン
+            </Button>
+            <Button suffixIcon={<BlankLinkIcon />} variant="text">
+              ボタン
+            </Button>
+            <Button suffixIcon={<TrashIcon />} variant="textAlert">
+              ボタン
+            </Button>
+          </div>
+        </dd>
+      </Stack>
+
+      <Stack spacing="lg" as="dl">
+        <dt style={{ fontWeight: 'bold' }}>Position Fixed</dt>
+        <dd style={{ margin: 0 }}>
+          <div
+            style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px', flexWrap: 'wrap' }}
+          >
+            <Button fixedIcon={<BlankLinkIcon />}>ボタン</Button>
+            <Button fixedIcon={<BlankLinkIcon />} variant="secondary">
+              ボタン
+            </Button>
+            <Button fixedIcon={<BlankLinkIcon />} variant="accent">
+              ボタン
+            </Button>
+            <Button fixedIcon={<BlankLinkIcon />} variant="alert">
+              ボタン
+            </Button>
+            <Button fixedIcon={<BlankLinkIcon />} variant="text">
+              ボタン
+            </Button>
+            <Button fixedIcon={<TrashIcon />} variant="textAlert">
+              ボタン
+            </Button>
+          </div>
+        </dd>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default Default;
diff --git a/src/components/react/examples/checkbox/Disabled.tsx b/src/components/react/examples/checkbox/Disabled.tsx
new file mode 100644
index 0000000..6383909
--- /dev/null
+++ b/src/components/react/examples/checkbox/Disabled.tsx
@@ -0,0 +1,18 @@
+import { Checkbox, Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Disabled: FC = () => {
+  return (
+    <Stack spacing="xs">
+      <Checkbox name="disabled" value="checked" checked disabled>
+        Checked
+      </Checkbox>
+
+      <Checkbox name="disabled" value="unchecked" disabled>
+        Unchecked
+      </Checkbox>
+    </Stack>
+  );
+};
+
+export default Disabled;
diff --git a/src/components/react/examples/checkbox/SingleUse.tsx b/src/components/react/examples/checkbox/SingleUse.tsx
new file mode 100644
index 0000000..fdb2283
--- /dev/null
+++ b/src/components/react/examples/checkbox/SingleUse.tsx
@@ -0,0 +1,17 @@
+import { Checkbox } from '@ubie/ubie-ui';
+import { useState, useCallback } from 'react';
+import type { FC, ChangeEventHandler } from 'react';
+
+const SingleUse: FC = () => {
+  const [checked, setChecked] = useState<boolean>(false);
+
+  const onChange: ChangeEventHandler<HTMLInputElement> = useCallback((event) => setChecked(event.target.checked), []);
+
+  return (
+    <Checkbox name="single-use" value="enable" checked={checked} onChange={onChange}>
+      Enable Option
+    </Checkbox>
+  );
+};
+
+export default SingleUse;
diff --git a/src/components/react/examples/checkbox/Size.tsx b/src/components/react/examples/checkbox/Size.tsx
new file mode 100644
index 0000000..c748f6d
--- /dev/null
+++ b/src/components/react/examples/checkbox/Size.tsx
@@ -0,0 +1,17 @@
+import { Checkbox, Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Size: FC = () => {
+  return (
+    <Stack spacing="xs">
+      <Checkbox name="size" value="medium">
+        Medium
+      </Checkbox>
+      <Checkbox name="size" value="small" size="small">
+        Small
+      </Checkbox>
+    </Stack>
+  );
+};
+
+export default Size;
diff --git a/src/components/react/examples/input/Disabled.tsx b/src/components/react/examples/input/Disabled.tsx
new file mode 100644
index 0000000..f8c5758
--- /dev/null
+++ b/src/components/react/examples/input/Disabled.tsx
@@ -0,0 +1,8 @@
+import { Input } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Disabled: FC = () => {
+  return <Input value="lorem ipsum" disabled />;
+};
+
+export default Disabled;
diff --git a/src/components/react/examples/input/IsInvalid.tsx b/src/components/react/examples/input/IsInvalid.tsx
new file mode 100644
index 0000000..f5cc7f1
--- /dev/null
+++ b/src/components/react/examples/input/IsInvalid.tsx
@@ -0,0 +1,8 @@
+import { Input } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const IsInvalid: FC = () => {
+  return <Input value="wrong value" isInvalid />;
+};
+
+export default IsInvalid;
diff --git a/src/components/react/examples/input/Types.tsx b/src/components/react/examples/input/Types.tsx
new file mode 100644
index 0000000..a52e186
--- /dev/null
+++ b/src/components/react/examples/input/Types.tsx
@@ -0,0 +1,81 @@
+import { Input, Stack } from '@ubie/ubie-ui';
+import { useState, useCallback } from 'react';
+import type { FC, ChangeEventHandler } from 'react';
+
+const Types: FC = () => {
+  const [textValue, setTextValue] = useState('lorem ipsum');
+  const [mailValue, setMailValue] = useState('test@example.com');
+  const [passwordValue, setPasswordValue] = useState('abcd1234');
+  const [telValue, setTelValue] = useState('000-0000-0000');
+  const [urlValue, setUrlValue] = useState('http://www.example.com');
+  const [numberValue, setNumberValue] = useState('10');
+
+  const onChangeText: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+    setTextValue(event.target.value);
+  }, []);
+  const onChangeMail: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+    setMailValue(event.target.value);
+  }, []);
+  const onPasswordValue: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+    setPasswordValue(event.target.value);
+  }, []);
+  const onTelValue: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+    setTelValue(event.target.value);
+  }, []);
+  const onUrlValue: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+    setUrlValue(event.target.value);
+  }, []);
+  const onNumberValue: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+    setNumberValue(event.target.value);
+  }, []);
+
+  const labelStyle = { display: 'inline-block', paddingBottom: '8px', fontSize: '13px' };
+
+  return (
+    <Stack spacing="md">
+      <div>
+        <label htmlFor="tv-text" style={labelStyle}>
+          text
+        </label>
+        <Input id="tv-text" value={textValue} onChange={onChangeText} />
+      </div>
+
+      <div>
+        <label htmlFor="tv-mail" style={labelStyle}>
+          mail
+        </label>
+        <Input type="email" id="tv-mail" value={mailValue} onChange={onChangeMail} />
+      </div>
+
+      <div>
+        <label htmlFor="tv-password" style={labelStyle}>
+          password
+        </label>
+        <Input type="password" id="tv-password" value={passwordValue} onChange={onPasswordValue} />
+      </div>
+
+      <div>
+        <label htmlFor="tv-tel" style={labelStyle}>
+          tel
+        </label>
+        <Input type="tel" id="tv-tel" value={telValue} onChange={onTelValue} />
+      </div>
+
+      <div>
+        <label htmlFor="tv-url" style={labelStyle}>
+          url
+        </label>
+        <Input type="url" id="tv-url" value={urlValue} onChange={onUrlValue} />
+      </div>
+
+      <div>
+        <label htmlFor="tv-number" style={labelStyle}>
+          number
+        </label>
+        <Input type="number" id="tv-number" value={numberValue} onChange={onNumberValue} />
+      </div>
+    </Stack>
+  );
+};
+
+export default Types;
diff --git a/src/components/react/examples/link-button/Block.tsx b/src/components/react/examples/link-button/Block.tsx
new file mode 100644
index 0000000..ef043b9
--- /dev/null
+++ b/src/components/react/examples/link-button/Block.tsx
@@ -0,0 +1,26 @@
+import { LinkButton } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Block: FC = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+      <div>
+        <LinkButton href="https://vitals.ubie.life/" size="small" variant="secondary" block>
+          ボタン
+        </LinkButton>
+      </div>
+      <div>
+        <LinkButton href="https://vitals.ubie.life/" size="medium" variant="secondary" block>
+          ボタン
+        </LinkButton>
+      </div>
+      <div>
+        <LinkButton href="https://vitals.ubie.life/" size="large" variant="secondary" block>
+          ボタン
+        </LinkButton>
+      </div>
+    </div>
+  );
+};
+
+export default Block;
diff --git a/src/components/react/examples/link-button/Default.tsx b/src/components/react/examples/link-button/Default.tsx
index 062f610..5709ef1 100644
--- a/src/components/react/examples/link-button/Default.tsx
+++ b/src/components/react/examples/link-button/Default.tsx
@@ -2,7 +2,26 @@ import { LinkButton } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Default: FC = () => {
-  return <LinkButton>ボタン</LinkButton>;
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px', flexWrap: 'wrap' }}>
+      <LinkButton href="https://vitals.ubie.life/">ボタン</LinkButton>
+      <LinkButton href="https://vitals.ubie.life/" variant="secondary">
+        ボタン
+      </LinkButton>
+      <LinkButton href="https://vitals.ubie.life/" variant="accent">
+        ボタン
+      </LinkButton>
+      <LinkButton href="https://vitals.ubie.life/" variant="alert">
+        ボタン
+      </LinkButton>
+      <LinkButton href="https://vitals.ubie.life/" variant="text">
+        ボタン
+      </LinkButton>
+      <LinkButton href="https://vitals.ubie.life/" variant="textAlert">
+        ボタン
+      </LinkButton>
+    </div>
+  );
 };
 
 export default Default;
diff --git a/src/components/react/examples/link-button/Disabled.tsx b/src/components/react/examples/link-button/Disabled.tsx
new file mode 100644
index 0000000..4fd5752
--- /dev/null
+++ b/src/components/react/examples/link-button/Disabled.tsx
@@ -0,0 +1,29 @@
+import { LinkButton } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Disabled: FC = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px', flexWrap: 'wrap' }}>
+      <LinkButton href="https://vitals.ubie.life/" disabled>
+        ボタン
+      </LinkButton>
+      <LinkButton href="https://vitals.ubie.life/" variant="secondary" disabled>
+        ボタン
+      </LinkButton>
+      <LinkButton href="https://vitals.ubie.life/" variant="accent" disabled>
+        ボタン
+      </LinkButton>
+      <LinkButton href="https://vitals.ubie.life/" variant="alert" disabled>
+        ボタン
+      </LinkButton>
+      <LinkButton href="https://vitals.ubie.life/" variant="text" disabled>
+        ボタン
+      </LinkButton>
+      <LinkButton href="https://vitals.ubie.life/" variant="textAlert" disabled>
+        ボタン
+      </LinkButton>
+    </div>
+  );
+};
+
+export default Disabled;
diff --git a/src/components/react/examples/link-button/Size.tsx b/src/components/react/examples/link-button/Size.tsx
new file mode 100644
index 0000000..dbcee8b
--- /dev/null
+++ b/src/components/react/examples/link-button/Size.tsx
@@ -0,0 +1,20 @@
+import { LinkButton } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Size: FC = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '48px' }}>
+      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px' }}>
+        <LinkButton href="https://vitals.ubie.life/" size="small">
+          Small
+        </LinkButton>
+        <LinkButton href="https://vitals.ubie.life/" size="medium">
+          Medium
+        </LinkButton>
+        <LinkButton href="https://vitals.ubie.life/">Large</LinkButton>
+      </div>
+    </div>
+  );
+};
+
+export default Size;
diff --git a/src/components/react/examples/link-button/WithIcon.tsx b/src/components/react/examples/link-button/WithIcon.tsx
new file mode 100644
index 0000000..20c800c
--- /dev/null
+++ b/src/components/react/examples/link-button/WithIcon.tsx
@@ -0,0 +1,100 @@
+import { UbieIcon, BlankLinkIcon, TrashIcon } from '@ubie/ubie-icons';
+import { LinkButton, Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const WithIcon: FC = () => {
+  return (
+    <Stack spacing="lg">
+      <Stack spacing="lg" as="dl">
+        <dt style={{ fontWeight: 'bold' }}>Default Position</dt>
+
+        <dd style={{ margin: 0 }}>
+          <div
+            style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px', flexWrap: 'wrap' }}
+          >
+            <LinkButton href="https://vitals.ubie.life/" icon={<UbieIcon />}>
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" icon={<UbieIcon />} variant="secondary">
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" icon={<UbieIcon />} variant="accent">
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" icon={<UbieIcon />} variant="alert">
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" icon={<UbieIcon />} variant="text">
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" icon={<TrashIcon />} variant="textAlert">
+              ボタン
+            </LinkButton>
+          </div>
+        </dd>
+      </Stack>
+
+      <Stack spacing="lg" as="dl">
+        <dt style={{ fontWeight: 'bold' }}>Position Suffix</dt>
+        <dd style={{ margin: 0 }}>
+          <div
+            style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px', flexWrap: 'wrap' }}
+          >
+            <LinkButton href="https://vitals.ubie.life/" suffixIcon={<BlankLinkIcon />}>
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" suffixIcon={<BlankLinkIcon />} variant="secondary">
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" suffixIcon={<BlankLinkIcon />} variant="accent">
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" suffixIcon={<BlankLinkIcon />} variant="alert">
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" suffixIcon={<BlankLinkIcon />} variant="text">
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" suffixIcon={<BlankLinkIcon />} variant="textAlert">
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" suffixIcon={<TrashIcon />} variant="textAlert">
+              ボタン
+            </LinkButton>
+          </div>
+        </dd>
+      </Stack>
+
+      <Stack spacing="lg" as="dl">
+        <dt style={{ fontWeight: 'bold' }}>Position Fixed</dt>
+
+        <dd style={{ margin: 0 }}>
+          <div
+            style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px', flexWrap: 'wrap' }}
+          >
+            <LinkButton href="https://vitals.ubie.life/" fixedIcon={<BlankLinkIcon />}>
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" fixedIcon={<BlankLinkIcon />} variant="secondary">
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" fixedIcon={<BlankLinkIcon />} variant="accent">
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" fixedIcon={<BlankLinkIcon />} variant="alert">
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" fixedIcon={<BlankLinkIcon />} variant="text">
+              ボタン
+            </LinkButton>
+            <LinkButton href="https://vitals.ubie.life/" fixedIcon={<TrashIcon />} variant="textAlert">
+              ボタン
+            </LinkButton>
+          </div>
+        </dd>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default WithIcon;
diff --git a/src/components/react/examples/link-card/Default.tsx b/src/components/react/examples/link-card/Default.tsx
index 6c5f62a..cc35323 100644
--- a/src/components/react/examples/link-card/Default.tsx
+++ b/src/components/react/examples/link-card/Default.tsx
@@ -1,24 +1,20 @@
-import { MedicalFormIcon } from '@ubie/ubie-icons';
-import { LinkCard } from '@ubie/ubie-ui';
+import { LinkCard, Stack } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Default: FC = () => {
   return (
-    <>
+    <Stack spacing="md">
       <LinkCard
         title="タイトル"
+        description="これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。"
         href="/"
+      />
+      <LinkCard
+        title="タイトル"
         description="これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。"
-        icon={MedicalFormIcon}
+        href="/"
       />
-      <div style={{ marginTop: '1rem' }}>
-        <LinkCard
-          title="タイトル"
-          href="/"
-          description="これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。"
-        />
-      </div>
-    </>
+    </Stack>
   );
 };
 
diff --git a/src/components/react/examples/link-card/WithIcon.tsx b/src/components/react/examples/link-card/WithIcon.tsx
new file mode 100644
index 0000000..909a1cd
--- /dev/null
+++ b/src/components/react/examples/link-card/WithIcon.tsx
@@ -0,0 +1,16 @@
+import { MedicalFormIcon } from '@ubie/ubie-icons';
+import { LinkCard } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const WithIcon: FC = () => {
+  return (
+    <LinkCard
+      title="タイトル"
+      href="/"
+      icon={MedicalFormIcon}
+      description="これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。"
+    />
+  );
+};
+
+export default WithIcon;
diff --git a/src/components/react/examples/message-modal/FixedHeight.tsx b/src/components/react/examples/message-modal/FixedHeight.tsx
new file mode 100644
index 0000000..dcdd9fc
--- /dev/null
+++ b/src/components/react/examples/message-modal/FixedHeight.tsx
@@ -0,0 +1,20 @@
+import { MessageModal } from '@ubie/ubie-ui';
+import { useState } from 'react';
+import type { FC } from 'react';
+
+const FixedHeight: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <MessageModal open={open} onClose={() => setOpen(false)} fixedHeight>
+        <p>Default</p>
+      </MessageModal>
+    </>
+  );
+};
+
+export default FixedHeight;
diff --git a/src/components/react/examples/message-modal/OverlayDarker.tsx b/src/components/react/examples/message-modal/OverlayDarker.tsx
new file mode 100644
index 0000000..e98d632
--- /dev/null
+++ b/src/components/react/examples/message-modal/OverlayDarker.tsx
@@ -0,0 +1,20 @@
+import { MessageModal } from '@ubie/ubie-ui';
+import { useState } from 'react';
+import type { FC } from 'react';
+
+const OverlayDarker: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <MessageModal open={open} onClose={() => setOpen(false)} overlayOpacity="darker">
+        <p>Default</p>
+      </MessageModal>
+    </>
+  );
+};
+
+export default OverlayDarker;
diff --git a/src/components/react/examples/message-modal/WithHeader.tsx b/src/components/react/examples/message-modal/WithHeader.tsx
new file mode 100644
index 0000000..67ca848
--- /dev/null
+++ b/src/components/react/examples/message-modal/WithHeader.tsx
@@ -0,0 +1,20 @@
+import { MessageModal } from '@ubie/ubie-ui';
+import { useState } from 'react';
+import type { FC } from 'react';
+
+const WithHeader: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <MessageModal header="メッセージ" open={open} onClose={() => setOpen(false)}>
+        <p>Default</p>
+      </MessageModal>
+    </>
+  );
+};
+
+export default WithHeader;
diff --git a/src/components/react/examples/radio-button/Disabled.tsx b/src/components/react/examples/radio-button/Disabled.tsx
new file mode 100644
index 0000000..f5e83be
--- /dev/null
+++ b/src/components/react/examples/radio-button/Disabled.tsx
@@ -0,0 +1,39 @@
+import { RadioButton, Stack } from '@ubie/ubie-ui';
+import { useState, useCallback } from 'react';
+import type { FC, ChangeEventHandler } from 'react';
+
+const Disabled: FC = () => {
+  const [selectedItem, setSelectedItem] = useState('checked');
+
+  const onChange: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+    setSelectedItem(event.target.value);
+  }, []);
+
+  return (
+    <Stack spacing="xs">
+      <RadioButton
+        name="disabled"
+        onChange={onChange}
+        checked={selectedItem === 'checked'}
+        value="checked"
+        id="checked"
+        disabled
+      >
+        Checked
+      </RadioButton>
+
+      <RadioButton
+        name="disabled"
+        onChange={onChange}
+        checked={selectedItem === 'unchecked'}
+        value="unchecked"
+        id="unchecked"
+        disabled
+      >
+        Unchecked
+      </RadioButton>
+    </Stack>
+  );
+};
+
+export default Disabled;
diff --git a/src/components/react/examples/radio-button/Size.tsx b/src/components/react/examples/radio-button/Size.tsx
new file mode 100644
index 0000000..2280f7c
--- /dev/null
+++ b/src/components/react/examples/radio-button/Size.tsx
@@ -0,0 +1,31 @@
+import { RadioButton, Stack } from '@ubie/ubie-ui';
+import { useState, useCallback } from 'react';
+import type { FC, ChangeEventHandler } from 'react';
+
+const Size: FC = () => {
+  const [selectedItem, setSelectedItem] = useState('medium');
+
+  const onChange: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+    setSelectedItem(event.target.value);
+  }, []);
+
+  return (
+    <Stack spacing="xs">
+      <RadioButton onChange={onChange} checked={selectedItem === 'medium'} name="size" value="medium" id="medium">
+        Medium
+      </RadioButton>
+      <RadioButton
+        onChange={onChange}
+        checked={selectedItem === 'small'}
+        name="size"
+        value="small"
+        id="small"
+        size="small"
+      >
+        Small
+      </RadioButton>
+    </Stack>
+  );
+};
+
+export default Size;
diff --git a/src/components/react/examples/radio-card/Block.tsx b/src/components/react/examples/radio-card/Block.tsx
new file mode 100644
index 0000000..242f98a
--- /dev/null
+++ b/src/components/react/examples/radio-card/Block.tsx
@@ -0,0 +1,25 @@
+import { RadioCard, Stack } from '@ubie/ubie-ui';
+import { useState, useCallback } from 'react';
+import type { FC, ChangeEventHandler } from 'react';
+
+const Block: FC = () => {
+  const options = ['option1', 'option2', 'option3'];
+
+  const [value, setValue] = useState<string>('option1');
+
+  const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>((event) => {
+    setValue(event.target.value);
+  }, []);
+
+  return (
+    <Stack spacing="sm">
+      {options.map((option) => (
+        <RadioCard block name="block" key={option} checked={value === option} value={option} onChange={onChange}>
+          {option}
+        </RadioCard>
+      ))}
+    </Stack>
+  );
+};
+
+export default Block;
diff --git a/src/components/react/examples/radio-card/Default.tsx b/src/components/react/examples/radio-card/Default.tsx
index a66dca4..869ef51 100644
--- a/src/components/react/examples/radio-card/Default.tsx
+++ b/src/components/react/examples/radio-card/Default.tsx
@@ -1,22 +1,36 @@
-import { LinkCard } from '@ubie/ubie-ui';
-import type { FC } from 'react';
+import { RadioCard, Stack } from '@ubie/ubie-ui';
+import { useState, useCallback } from 'react';
+import type { FC, ChangeEventHandler } from 'react';
 
 const Default: FC = () => {
+  const options = ['option1', 'option2', 'option3'];
+
+  const [selectedItem, setSelectedItem] = useState(options[0]);
+
+  const onChange: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+    setSelectedItem(event.target.value);
+  }, []);
+
   return (
-    <>
-      <LinkCard
-        title="タイトル"
-        href="/"
-        description="これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。"
-      />
-      <div style={{ marginTop: '1rem' }}>
-        <LinkCard
-          title="タイトル"
-          href="/"
-          description="これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。これはこのカードの遷移先の説明です。"
-        />
-      </div>
-    </>
+    <Stack spacing="md">
+      {options.map((option) => (
+        <RadioCard
+          name="options"
+          value={option}
+          onChange={onChange}
+          checked={selectedItem === option}
+          id={option}
+          key={option}
+        >
+          {option}
+        </RadioCard>
+      ))}
+
+      <dl>
+        <dt>Values</dt>
+        <dd>{selectedItem}</dd>
+      </dl>
+    </Stack>
   );
 };
 
diff --git a/src/components/react/examples/select/Disabled.tsx b/src/components/react/examples/select/Disabled.tsx
new file mode 100644
index 0000000..a84b3a4
--- /dev/null
+++ b/src/components/react/examples/select/Disabled.tsx
@@ -0,0 +1,16 @@
+import { Select } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Disabled: FC = () => {
+  const options = ['option1', 'option2', 'option3'];
+
+  return (
+    <Select disabled value={options[0]}>
+      {options.map((o) => (
+        <option key={o}>{o}</option>
+      ))}
+    </Select>
+  );
+};
+
+export default Disabled;
diff --git a/src/components/react/examples/select/IsInvalid.tsx b/src/components/react/examples/select/IsInvalid.tsx
new file mode 100644
index 0000000..6fb0683
--- /dev/null
+++ b/src/components/react/examples/select/IsInvalid.tsx
@@ -0,0 +1,16 @@
+import { Select } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const IsInvalid: FC = () => {
+  const options = ['option1', 'option2', 'option3'];
+
+  return (
+    <Select isInvalid value={options[0]}>
+      {options.map((o) => (
+        <option key={o}>{o}</option>
+      ))}
+    </Select>
+  );
+};
+
+export default IsInvalid;
diff --git a/src/components/react/examples/stack/BlockLevelElementsToFullWidth.tsx b/src/components/react/examples/stack/BlockLevelElementsToFullWidth.tsx
new file mode 100644
index 0000000..f805f81
--- /dev/null
+++ b/src/components/react/examples/stack/BlockLevelElementsToFullWidth.tsx
@@ -0,0 +1,29 @@
+import { Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const BlockLevelElementsToFullWidth: FC = () => {
+  return (
+    <Stack spacing="lg" alignItems="normal">
+      <Stack spacing="md" alignItems="normal">
+        <p style={{ margin: 0, backgroundColor: '#ccc' }}>Block Level Element</p>
+        <p style={{ margin: 0, backgroundColor: '#ccc' }}>Block Level Element</p>
+        <p style={{ margin: 0, backgroundColor: '#ccc' }}>Block Level Element</p>
+        <p style={{ margin: 0, backgroundColor: '#ccc' }}>Block Level Element</p>
+      </Stack>
+
+      <Stack spacing="xs">
+        <p style={{ margin: 0 }}>
+          If you do not use <code>alignItems=&quot;normal&quot;</code>:
+        </p>
+        <Stack spacing="md">
+          <p style={{ margin: 0, backgroundColor: '#ccc' }}>Block Level Element</p>
+          <p style={{ margin: 0, backgroundColor: '#ccc' }}>Block Level Element</p>
+          <p style={{ margin: 0, backgroundColor: '#ccc' }}>Block Level Element</p>
+          <p style={{ margin: 0, backgroundColor: '#ccc' }}>Block Level Element</p>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default BlockLevelElementsToFullWidth;
diff --git a/src/components/react/examples/stack/Centralized.tsx b/src/components/react/examples/stack/Centralized.tsx
new file mode 100644
index 0000000..4af4555
--- /dev/null
+++ b/src/components/react/examples/stack/Centralized.tsx
@@ -0,0 +1,24 @@
+import { Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Centralized: FC = () => {
+  return (
+    <Stack spacing="md" direction="row" justifyContent="center" alignItems="center">
+      <span>
+        Words
+        <br />
+        crowded
+      </span>
+      <span>in</span>
+      <span>
+        simply
+        <br />
+        dummy
+        <br />
+        text
+      </span>
+    </Stack>
+  );
+};
+
+export default Centralized;
diff --git a/src/components/react/examples/stack/Default.tsx b/src/components/react/examples/stack/Default.tsx
index 986a57c..e0e823d 100644
--- a/src/components/react/examples/stack/Default.tsx
+++ b/src/components/react/examples/stack/Default.tsx
@@ -4,10 +4,10 @@ import type { FC } from 'react';
 const Default: FC = () => {
   return (
     <Stack spacing="md">
-      <div>test</div>
-      <div>test</div>
-      <div>test</div>
-      <div>test</div>
+      <p style={{ margin: 0 }}>テスト</p>
+      <p style={{ margin: 0 }}>テスト</p>
+      <p style={{ margin: 0 }}>テスト</p>
+      <p style={{ margin: 0 }}>テスト</p>
     </Stack>
   );
 };
diff --git a/src/components/react/examples/stack/MarkupAsList.tsx b/src/components/react/examples/stack/MarkupAsList.tsx
new file mode 100644
index 0000000..0014595
--- /dev/null
+++ b/src/components/react/examples/stack/MarkupAsList.tsx
@@ -0,0 +1,15 @@
+import { Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const MarkupAsList: FC = () => {
+  return (
+    <Stack spacing="md" as="li">
+      <li>テスト</li>
+      <li>テスト</li>
+      <li>テスト</li>
+      <li>テスト</li>
+    </Stack>
+  );
+};
+
+export default MarkupAsList;
diff --git a/src/components/react/examples/stack/Nested.tsx b/src/components/react/examples/stack/Nested.tsx
new file mode 100644
index 0000000..bccc93c
--- /dev/null
+++ b/src/components/react/examples/stack/Nested.tsx
@@ -0,0 +1,28 @@
+import { Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Nested: FC = () => {
+  return (
+    <Stack spacing="xl">
+      <p style={{ margin: 0 }}>1</p>
+
+      <Stack spacing="lg">
+        <p style={{ margin: 0 }}>2</p>
+        <p style={{ margin: 0 }}>2</p>
+        <p style={{ margin: 0 }}>2</p>
+      </Stack>
+
+      <Stack spacing="lg">
+        <p style={{ margin: 0 }}>2</p>
+        <p style={{ margin: 0 }}>2</p>
+        <Stack spacing="xs">
+          <p style={{ margin: 0 }}>3</p>
+          <p style={{ margin: 0 }}>3</p>
+          <p style={{ margin: 0 }}>3</p>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default Nested;
diff --git a/src/components/react/examples/stack/PutOnTheEnd.tsx b/src/components/react/examples/stack/PutOnTheEnd.tsx
new file mode 100644
index 0000000..8d5c9ef
--- /dev/null
+++ b/src/components/react/examples/stack/PutOnTheEnd.tsx
@@ -0,0 +1,15 @@
+import { Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const PutOnTheEnd: FC = () => {
+  return (
+    <Stack spacing="md" alignItems="flex-end">
+      <p style={{ margin: 0 }}>テスト</p>
+      <p style={{ margin: 0 }}>テスト</p>
+      <p style={{ margin: 0 }}>テスト</p>
+      <p style={{ margin: 0 }}>テスト</p>
+    </Stack>
+  );
+};
+
+export default PutOnTheEnd;
diff --git a/src/components/react/examples/stack/Horizontal.tsx b/src/components/react/examples/stack/Vertical.tsx
similarity index 100%
rename from src/components/react/examples/stack/Horizontal.tsx
rename to src/components/react/examples/stack/Vertical.tsx
diff --git a/src/components/react/examples/text/Body.tsx b/src/components/react/examples/text/Body.tsx
new file mode 100644
index 0000000..a418d8e
--- /dev/null
+++ b/src/components/react/examples/text/Body.tsx
@@ -0,0 +1,82 @@
+import { Text, Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Body: FC = () => {
+  const bodyText =
+    '症状検索エンジン「ユビー」は「適切なタイミングでの適切な医療との出会い」の橋渡しによって、みなさんの健康・安全をサポートし、医療についての不安・悩み・苦痛を和らげます。';
+
+  return (
+    <Stack as="dl" spacing="md">
+      <div>
+        <dt>Default Leading</dt>
+        <dd>
+          <Stack spacing="md" direction="row" alignItems="center">
+            <Text type="body" size="sm">
+              sm
+              <br />
+              {`${bodyText}`}
+            </Text>
+            <Text type="body" size="md">
+              md
+              <br />
+              {`${bodyText}`}
+            </Text>
+            <Text type="body" size="lg">
+              lg
+              <br />
+              {`${bodyText}`}
+            </Text>
+          </Stack>
+        </dd>
+      </div>
+
+      <div>
+        <dt>Narrow Leading</dt>
+        <dd>
+          <Stack spacing="md" direction="row" alignItems="center">
+            <Text leading="narrow" type="body" size="sm">
+              sm
+              <br />
+              {`${bodyText}`}
+            </Text>
+            <Text leading="narrow" type="body" size="md">
+              md
+              <br />
+              {`${bodyText}`}
+            </Text>
+            <Text leading="narrow" type="body" size="lg">
+              lg
+              <br />
+              {`${bodyText}`}
+            </Text>
+          </Stack>
+        </dd>
+      </div>
+
+      <div>
+        <dt>Tight Leading</dt>
+        <dd>
+          <Stack spacing="md" direction="row" alignItems="center">
+            <Text leading="tight" type="body" size="sm">
+              sm
+              <br />
+              {`${bodyText}`}
+            </Text>
+            <Text leading="tight" type="body" size="md">
+              md
+              <br />
+              {`${bodyText}`}
+            </Text>
+            <Text leading="tight" type="body" size="lg">
+              lg
+              <br />
+              {`${bodyText}`}
+            </Text>
+          </Stack>
+        </dd>
+      </div>
+    </Stack>
+  );
+};
+
+export default Body;
diff --git a/src/components/react/examples/text/Button.tsx b/src/components/react/examples/text/Button.tsx
new file mode 100644
index 0000000..89d939d
--- /dev/null
+++ b/src/components/react/examples/text/Button.tsx
@@ -0,0 +1,28 @@
+import { Text, Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Button: FC = () => {
+  const buttonText = '同意して症状から調べる';
+
+  return (
+    <Stack spacing="md" direction="row" alignItems="center">
+      <Text type="button" size="sm">
+        sm
+        <br />
+        {`${buttonText}`}
+      </Text>
+      <Text type="button" size="md">
+        md
+        <br />
+        {`${buttonText}`}
+      </Text>
+      <Text type="button" size="lg">
+        lg
+        <br />
+        {`${buttonText}`}
+      </Text>
+    </Stack>
+  );
+};
+
+export default Button;
diff --git a/src/components/react/examples/text/Color.tsx b/src/components/react/examples/text/Color.tsx
new file mode 100644
index 0000000..3494b06
--- /dev/null
+++ b/src/components/react/examples/text/Color.tsx
@@ -0,0 +1,20 @@
+import { Text, Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Color: FC = () => (
+  <Stack spacing="md" direction="row">
+    <Text color="main">main</Text>
+    <Text color="sub">sub</Text>
+    <Text color="link">link</Text>
+    <Text color="linkSub">linkSub</Text>
+    <Text color="disabled">disabled</Text>
+    <Text color="primary">primary</Text>
+    <Text color="accent">accent</Text>
+    <Text color="alert">alert</Text>
+    <span style={{ background: 'black', padding: '0 0.5em' }}>
+      <Text color="white">white</Text>
+    </span>
+  </Stack>
+);
+
+export default Color;
diff --git a/src/components/react/examples/text/Default.tsx b/src/components/react/examples/text/Default.tsx
index 855f012..fdd2cf7 100644
--- a/src/components/react/examples/text/Default.tsx
+++ b/src/components/react/examples/text/Default.tsx
@@ -3,13 +3,9 @@ import type { FC } from 'react';
 
 const Default: FC = () => {
   return (
-    <>
-      <Text size="lg" type="heading" as="h1">
-        私の青春時代
-      </Text>
-      <Text>私が中学生に上がったすぐの頃、それはもう緊張した面持ちで……</Text>
-      <Text>彼は踵を返すと一目散に校庭を通り……</Text>
-    </>
+    <Text as="h1" type="heading" size="xl" leading="tight" color="primary">
+      Dummy Text
+    </Text>
   );
 };
 
diff --git a/src/components/react/examples/text/Heading.tsx b/src/components/react/examples/text/Heading.tsx
new file mode 100644
index 0000000..4f56ecb
--- /dev/null
+++ b/src/components/react/examples/text/Heading.tsx
@@ -0,0 +1,38 @@
+import { Text, Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Heading: FC = () => {
+  const headingText = '近くの医療機関から調べる';
+
+  return (
+    <Stack spacing="md" direction="row" alignItems="center">
+      <Text bold type="heading" size="xs">
+        xs
+        <br />
+        {`${headingText}`}
+      </Text>
+      <Text bold type="heading" size="sm">
+        sm
+        <br />
+        {`${headingText}`}
+      </Text>
+      <Text bold type="heading" size="md">
+        md
+        <br />
+        {`${headingText}`}
+      </Text>
+      <Text bold type="heading" size="lg">
+        lg
+        <br />
+        {`${headingText}`}
+      </Text>
+      <Text bold type="heading" size="xl">
+        xl
+        <br />
+        {`${headingText}`}
+      </Text>
+    </Stack>
+  );
+};
+
+export default Heading;
diff --git a/src/components/react/examples/text/Note.tsx b/src/components/react/examples/text/Note.tsx
new file mode 100644
index 0000000..3ca12ea
--- /dev/null
+++ b/src/components/react/examples/text/Note.tsx
@@ -0,0 +1,81 @@
+import { Text, Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Note: FC = () => {
+  const noteText =
+    '症状検索エンジン「ユビー」は「適切なタイミングでの適切な医療との出会い」の橋渡しによって、みなさんの健康・安全をサポートし、医療についての不安・悩み・苦痛を和らげます。';
+
+  return (
+    <Stack as="dl" spacing="md">
+      <div>
+        <dt>Default Leading</dt>
+        <dd>
+          <Stack spacing="md" direction="row" alignItems="center">
+            <Text type="note" size="sm">
+              sm
+              <br />
+              {`${noteText}`}
+            </Text>
+            <Text type="note" size="md">
+              md
+              <br />
+              {`${noteText}`}
+            </Text>
+            <Text type="note" size="lg">
+              lg
+              <br />
+              {`${noteText}`}
+            </Text>
+          </Stack>
+        </dd>
+      </div>
+
+      <div>
+        <dt>Narrow Leading</dt>
+        <dd>
+          <Stack spacing="md" direction="row" alignItems="center">
+            <Text leading="narrow" type="note" size="sm">
+              sm
+              <br />
+              {`${noteText}`}
+            </Text>
+            <Text leading="narrow" type="note" size="md">
+              md
+              <br />
+              {`${noteText}`}
+            </Text>
+            <Text leading="narrow" type="note" size="lg">
+              lg
+              <br />
+              {`${noteText}`}
+            </Text>
+          </Stack>
+        </dd>
+      </div>
+      <div>
+        <dt>Tight Leading</dt>
+        <dd>
+          <Stack spacing="md" direction="row" alignItems="center">
+            <Text leading="tight" type="note" size="sm">
+              sm
+              <br />
+              {`${noteText}`}
+            </Text>
+            <Text leading="tight" type="note" size="md">
+              md
+              <br />
+              {`${noteText}`}
+            </Text>
+            <Text leading="tight" type="note" size="lg">
+              lg
+              <br />
+              {`${noteText}`}
+            </Text>
+          </Stack>
+        </dd>
+      </div>
+    </Stack>
+  );
+};
+
+export default Note;
diff --git a/src/components/react/examples/text/Tag.tsx b/src/components/react/examples/text/Tag.tsx
new file mode 100644
index 0000000..cad0528
--- /dev/null
+++ b/src/components/react/examples/text/Tag.tsx
@@ -0,0 +1,28 @@
+import { Text, Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Tag: FC = () => {
+  const tagText = '循環器内科';
+
+  return (
+    <Stack spacing="md" direction="row" alignItems="center">
+      <Text type="tag" size="sm">
+        sm
+        <br />
+        {`${tagText}`}
+      </Text>
+      <Text type="tag" size="md">
+        md
+        <br />
+        {`${tagText}`}
+      </Text>
+      <Text type="tag" size="lg">
+        lg
+        <br />
+        {`${tagText}`}
+      </Text>
+    </Stack>
+  );
+};
+
+export default Tag;
diff --git a/src/components/react/examples/textarea/Disabled.tsx b/src/components/react/examples/textarea/Disabled.tsx
new file mode 100644
index 0000000..db7e672
--- /dev/null
+++ b/src/components/react/examples/textarea/Disabled.tsx
@@ -0,0 +1,8 @@
+import { TextArea } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Disabled: FC = () => {
+  return <TextArea value={'Lorem\nipsum'} disabled />;
+};
+
+export default Disabled;
diff --git a/src/components/react/examples/textarea/IsInvalid.tsx b/src/components/react/examples/textarea/IsInvalid.tsx
new file mode 100644
index 0000000..667a26d
--- /dev/null
+++ b/src/components/react/examples/textarea/IsInvalid.tsx
@@ -0,0 +1,8 @@
+import { TextArea } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const IsInvalid: FC = () => {
+  return <TextArea value={'wrong\nvalue'} isInvalid />;
+};
+
+export default IsInvalid;
diff --git a/src/pages/components/examples/accordion/small.astro b/src/pages/components/examples/accordion/small.astro
new file mode 100644
index 0000000..4c193f2
--- /dev/null
+++ b/src/pages/components/examples/accordion/small.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Small from '@components/react/examples/accordion/Small';
+---
+
+<ExampleLayout title="Small Example | Accordion">
+  <Small client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/action-half-modal/Customized.astro b/src/pages/components/examples/action-half-modal/Customized.astro
new file mode 100644
index 0000000..9a08d90
--- /dev/null
+++ b/src/pages/components/examples/action-half-modal/Customized.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Customized from '@components/react/examples/action-half-modal/Customized';
+---
+
+<ExampleLayout title="Customized Example | ActionHalfModal">
+  <Customized client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/action-half-modal/fullscreen.astro b/src/pages/components/examples/action-half-modal/fullscreen.astro
new file mode 100644
index 0000000..5dc92dc
--- /dev/null
+++ b/src/pages/components/examples/action-half-modal/fullscreen.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Fullscreen from '@components/react/examples/action-half-modal/Fullscreen';
+---
+
+<ExampleLayout title="Fullscreen Example | ActionHalfModal">
+  <Fullscreen client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/action-half-modal/no-close-button.astro b/src/pages/components/examples/action-half-modal/no-close-button.astro
new file mode 100644
index 0000000..06c5934
--- /dev/null
+++ b/src/pages/components/examples/action-half-modal/no-close-button.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import NoCloseButton from '@components/react/examples/action-half-modal/NoCloseButton';
+---
+
+<ExampleLayout title="NoCloseButton Example | ActionHalfModal">
+  <NoCloseButton client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/action-half-modal/secondary.astro b/src/pages/components/examples/action-half-modal/secondary.astro
new file mode 100644
index 0000000..1fb27d9
--- /dev/null
+++ b/src/pages/components/examples/action-half-modal/secondary.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Secondary from '@components/react/examples/action-half-modal/Secondary';
+---
+
+<ExampleLayout title="Secondary Example | ActionHalfModal">
+  <Secondary client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/action-modal/customized.astro b/src/pages/components/examples/action-modal/customized.astro
new file mode 100644
index 0000000..060950f
--- /dev/null
+++ b/src/pages/components/examples/action-modal/customized.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Customized from '@components/react/examples/action-modal/Customized';
+---
+
+<ExampleLayout title="Customized Example | ActionModal">
+  <Customized client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/action-modal/fixed-height.astro b/src/pages/components/examples/action-modal/fixed-height.astro
new file mode 100644
index 0000000..35ea45e
--- /dev/null
+++ b/src/pages/components/examples/action-modal/fixed-height.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import FixedHeight from '@components/react/examples/action-modal/FixedHeight';
+---
+
+<ExampleLayout title="FixedHeight Example | ActionModal">
+  <FixedHeight client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/action-modal/secondary.astro b/src/pages/components/examples/action-modal/secondary.astro
new file mode 100644
index 0000000..71968ff
--- /dev/null
+++ b/src/pages/components/examples/action-modal/secondary.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Secondary from '@components/react/examples/action-modal/Secondary';
+---
+
+<ExampleLayout title="Secondary Example | ActionModal">
+  <Secondary client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/button/block.astro b/src/pages/components/examples/button/block.astro
new file mode 100644
index 0000000..53856c0
--- /dev/null
+++ b/src/pages/components/examples/button/block.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Block from '@components/react/examples/button/Block';
+---
+
+<ExampleLayout title="Block Example | Button">
+  <Block client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/button/disabled.astro b/src/pages/components/examples/button/disabled.astro
new file mode 100644
index 0000000..a796afd
--- /dev/null
+++ b/src/pages/components/examples/button/disabled.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Disabled from '@components/react/examples/button/Disabled';
+---
+
+<ExampleLayout title="Disabled Example | Button">
+  <Disabled client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/button/size.astro b/src/pages/components/examples/button/size.astro
new file mode 100644
index 0000000..007a1a0
--- /dev/null
+++ b/src/pages/components/examples/button/size.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Size from '@components/react/examples/button/Size';
+---
+
+<ExampleLayout title="Size Example | Button">
+  <Size client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/button/with-icon.astro b/src/pages/components/examples/button/with-icon.astro
new file mode 100644
index 0000000..606f51b
--- /dev/null
+++ b/src/pages/components/examples/button/with-icon.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import WithIcon from '@components/react/examples/button/WithIcon';
+---
+
+<ExampleLayout title="WithIcon Example | Button">
+  <WithIcon client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/checkbox/disabled.astro b/src/pages/components/examples/checkbox/disabled.astro
new file mode 100644
index 0000000..155c863
--- /dev/null
+++ b/src/pages/components/examples/checkbox/disabled.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Disabled from '@components/react/examples/checkbox/Disabled';
+---
+
+<ExampleLayout title="Disabled Example | Checkbox">
+  <Disabled client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/checkbox/single-use.astro b/src/pages/components/examples/checkbox/single-use.astro
new file mode 100644
index 0000000..9f6890d
--- /dev/null
+++ b/src/pages/components/examples/checkbox/single-use.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import SingleUse from '@components/react/examples/checkbox/SingleUse';
+---
+
+<ExampleLayout title="SingleUse Example | Checkbox">
+  <SingleUse client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/checkbox/size.astro b/src/pages/components/examples/checkbox/size.astro
new file mode 100644
index 0000000..b4834fd
--- /dev/null
+++ b/src/pages/components/examples/checkbox/size.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Size from '@components/react/examples/checkbox/Size';
+---
+
+<ExampleLayout title="Size Example | Checkbox">
+  <Size client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/input/disabled.astro b/src/pages/components/examples/input/disabled.astro
new file mode 100644
index 0000000..deaf93f
--- /dev/null
+++ b/src/pages/components/examples/input/disabled.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Disabled from '@components/react/examples/input/Disabled';
+---
+
+<ExampleLayout title="Disabled Example | Input">
+  <Disabled client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/input/is-invalid.astro b/src/pages/components/examples/input/is-invalid.astro
new file mode 100644
index 0000000..7f2bf56
--- /dev/null
+++ b/src/pages/components/examples/input/is-invalid.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import IsInvalid from '@components/react/examples/input/IsInvalid';
+---
+
+<ExampleLayout title="IsInvalid Example | Input">
+  <IsInvalid client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/input/types.astro b/src/pages/components/examples/input/types.astro
new file mode 100644
index 0000000..85194a0
--- /dev/null
+++ b/src/pages/components/examples/input/types.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Types from '@components/react/examples/input/Types';
+---
+
+<ExampleLayout title="Types Example | Input">
+  <Types client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/link-button/block.astro b/src/pages/components/examples/link-button/block.astro
new file mode 100644
index 0000000..ee3e24f
--- /dev/null
+++ b/src/pages/components/examples/link-button/block.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Block from '@components/react/examples/link-button/Block';
+---
+
+<ExampleLayout title="Block Example | LinkButton">
+  <Block client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/link-button/disabled.astro b/src/pages/components/examples/link-button/disabled.astro
new file mode 100644
index 0000000..1938208
--- /dev/null
+++ b/src/pages/components/examples/link-button/disabled.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Disabled from '@components/react/examples/link-button/Disabled';
+---
+
+<ExampleLayout title="Disabled Example | LinkButton">
+  <Disabled client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/link-button/size.astro b/src/pages/components/examples/link-button/size.astro
new file mode 100644
index 0000000..fbb8688
--- /dev/null
+++ b/src/pages/components/examples/link-button/size.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Size from '@components/react/examples/link-button/Size';
+---
+
+<ExampleLayout title="Size Example | LinkButton">
+  <Size client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/link-button/with-icon.astro b/src/pages/components/examples/link-button/with-icon.astro
new file mode 100644
index 0000000..1960706
--- /dev/null
+++ b/src/pages/components/examples/link-button/with-icon.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import WithIcon from '@components/react/examples/link-button/WithIcon';
+---
+
+<ExampleLayout title="WithIcon Example | LinkButton">
+  <WithIcon client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/link-card/with-icon.astro b/src/pages/components/examples/link-card/with-icon.astro
new file mode 100644
index 0000000..df7c6f3
--- /dev/null
+++ b/src/pages/components/examples/link-card/with-icon.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import WithIcon from '@components/react/examples/link-card/WithIcon';
+---
+
+<ExampleLayout title="WithIcon Example | LinkCard">
+  <WithIcon client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/message-modal/fixed-height.astro b/src/pages/components/examples/message-modal/fixed-height.astro
new file mode 100644
index 0000000..b787b1d
--- /dev/null
+++ b/src/pages/components/examples/message-modal/fixed-height.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import FixedHeight from '@components/react/examples/message-modal/FixedHeight';
+---
+
+<ExampleLayout title="FixedHeight Example | MessageModal">
+  <FixedHeight client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/message-modal/overlay-darker.astro b/src/pages/components/examples/message-modal/overlay-darker.astro
new file mode 100644
index 0000000..77fd9f1
--- /dev/null
+++ b/src/pages/components/examples/message-modal/overlay-darker.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import OverlayDarker from '@components/react/examples/message-modal/OverlayDarker';
+---
+
+<ExampleLayout title="OverlayDarker Example | MessageModal">
+  <OverlayDarker client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/message-modal/with-header.astro b/src/pages/components/examples/message-modal/with-header.astro
new file mode 100644
index 0000000..b27a604
--- /dev/null
+++ b/src/pages/components/examples/message-modal/with-header.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import WithHeader from '@components/react/examples/message-modal/WithHeader';
+---
+
+<ExampleLayout title="WithHeader Example | MessageModal">
+  <WithHeader client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/radio-button/disabled.astro b/src/pages/components/examples/radio-button/disabled.astro
new file mode 100644
index 0000000..7ed286a
--- /dev/null
+++ b/src/pages/components/examples/radio-button/disabled.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Disabled from '@components/react/examples/radio-button/Disabled';
+---
+
+<ExampleLayout title="Disabled Example | RadioButton">
+  <Disabled client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/radio-button/size.astro b/src/pages/components/examples/radio-button/size.astro
new file mode 100644
index 0000000..b00dee8
--- /dev/null
+++ b/src/pages/components/examples/radio-button/size.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Size from '@components/react/examples/radio-button/Size';
+---
+
+<ExampleLayout title="Size Example | RadioButton">
+  <Size client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/radio-card/block.astro b/src/pages/components/examples/radio-card/block.astro
new file mode 100644
index 0000000..b819441
--- /dev/null
+++ b/src/pages/components/examples/radio-card/block.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Block from '@components/react/examples/radio-card/Block';
+---
+
+<ExampleLayout title="Block Example | RadioCard">
+  <Block client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/select/disabled.astro b/src/pages/components/examples/select/disabled.astro
new file mode 100644
index 0000000..b7cd3d2
--- /dev/null
+++ b/src/pages/components/examples/select/disabled.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Disabled from '@components/react/examples/select/Disabled';
+---
+
+<ExampleLayout title="Disabled Example | Select">
+  <Disabled client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/select/is-invalid.astro b/src/pages/components/examples/select/is-invalid.astro
new file mode 100644
index 0000000..5bfde02
--- /dev/null
+++ b/src/pages/components/examples/select/is-invalid.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import IsInvalid from '@components/react/examples/select/IsInvalid';
+---
+
+<ExampleLayout title="IsInvalid Example | Select">
+  <IsInvalid client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/stack/block-level-elements-to-full-width.astro b/src/pages/components/examples/stack/block-level-elements-to-full-width.astro
new file mode 100644
index 0000000..d2cb477
--- /dev/null
+++ b/src/pages/components/examples/stack/block-level-elements-to-full-width.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import BlockLevelElementsToFullWidth from '@components/react/examples/stack/BlockLevelElementsToFullWidth';
+---
+
+<ExampleLayout title="BlockLevelElementsToFullWidth Example | Stack">
+  <BlockLevelElementsToFullWidth client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/stack/centralized.astro b/src/pages/components/examples/stack/centralized.astro
new file mode 100644
index 0000000..41267cf
--- /dev/null
+++ b/src/pages/components/examples/stack/centralized.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Centralized from '@components/react/examples/stack/Centralized';
+---
+
+<ExampleLayout title="Centralized Example | Stack">
+  <Centralized client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/stack/markup-as-list.astro b/src/pages/components/examples/stack/markup-as-list.astro
new file mode 100644
index 0000000..a95bf0f
--- /dev/null
+++ b/src/pages/components/examples/stack/markup-as-list.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import MarkupAsList from '@components/react/examples/stack/MarkupAsList';
+---
+
+<ExampleLayout title="MarkupAsList Example | Stack">
+  <MarkupAsList client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/stack/nested.astro b/src/pages/components/examples/stack/nested.astro
new file mode 100644
index 0000000..c1c3edd
--- /dev/null
+++ b/src/pages/components/examples/stack/nested.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Nested from '@components/react/examples/stack/Nested';
+---
+
+<ExampleLayout title="Nested Example | Stack">
+  <Nested client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/stack/put-on-the-end.astro b/src/pages/components/examples/stack/put-on-the-end.astro
new file mode 100644
index 0000000..d7c3d21
--- /dev/null
+++ b/src/pages/components/examples/stack/put-on-the-end.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import PutOnTheEnd from '@components/react/examples/stack/PutOnTheEnd';
+---
+
+<ExampleLayout title="PutOnTheEnd Example | Stack">
+  <PutOnTheEnd client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/stack/horizontal.astro b/src/pages/components/examples/stack/vertical.astro
similarity index 55%
rename from src/pages/components/examples/stack/horizontal.astro
rename to src/pages/components/examples/stack/vertical.astro
index e9456d4..8d49b1b 100644
--- a/src/pages/components/examples/stack/horizontal.astro
+++ b/src/pages/components/examples/stack/vertical.astro
@@ -1,8 +1,8 @@
 ---
 import ExampleLayout from '@layouts/ExampleLayout.astro';
-import Horizontal from '@components/react/examples/stack/Horizontal';
+import Vertical from '@components/react/examples/stack/Vertical';
 ---
 
 <ExampleLayout title="Horizontal Example | Stack">
-  <Horizontal client:only="react" />
+  <Vertical client:only="react" />
 </ExampleLayout>
diff --git a/src/pages/components/examples/text/body.astro b/src/pages/components/examples/text/body.astro
new file mode 100644
index 0000000..fed50e2
--- /dev/null
+++ b/src/pages/components/examples/text/body.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Body from '@components/react/examples/text/Body';
+---
+
+<ExampleLayout title="Body Example | Text">
+  <Body client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/text/button.astro b/src/pages/components/examples/text/button.astro
new file mode 100644
index 0000000..384c773
--- /dev/null
+++ b/src/pages/components/examples/text/button.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Button from '@components/react/examples/text/Button';
+---
+
+<ExampleLayout title="Button Example | Text">
+  <Button client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/text/color.astro b/src/pages/components/examples/text/color.astro
new file mode 100644
index 0000000..855b4a7
--- /dev/null
+++ b/src/pages/components/examples/text/color.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Color from '@components/react/examples/text/Color';
+---
+
+<ExampleLayout title="Color Example | Text">
+  <Color client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/text/heading.astro b/src/pages/components/examples/text/heading.astro
new file mode 100644
index 0000000..bddae66
--- /dev/null
+++ b/src/pages/components/examples/text/heading.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Heading from '@components/react/examples/text/Heading';
+---
+
+<ExampleLayout title="Heading Example | Text">
+  <Heading client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/text/note.astro b/src/pages/components/examples/text/note.astro
new file mode 100644
index 0000000..66e2e57
--- /dev/null
+++ b/src/pages/components/examples/text/note.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Note from '@components/react/examples/text/Note';
+---
+
+<ExampleLayout title="Note Example | Text">
+  <Note client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/text/tag.astro b/src/pages/components/examples/text/tag.astro
new file mode 100644
index 0000000..6055433
--- /dev/null
+++ b/src/pages/components/examples/text/tag.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Tag from '@components/react/examples/text/Tag';
+---
+
+<ExampleLayout title="Tag Example | Text">
+  <Tag client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/textarea/disabled.astro b/src/pages/components/examples/textarea/disabled.astro
new file mode 100644
index 0000000..c630819
--- /dev/null
+++ b/src/pages/components/examples/textarea/disabled.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import Disabled from '@components/react/examples/textarea/Disabled';
+---
+
+<ExampleLayout title="Disabled Example | Textarea">
+  <Disabled client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/pages/components/examples/textarea/is-invalid.astro b/src/pages/components/examples/textarea/is-invalid.astro
new file mode 100644
index 0000000..ace07f8
--- /dev/null
+++ b/src/pages/components/examples/textarea/is-invalid.astro
@@ -0,0 +1,8 @@
+---
+import ExampleLayout from '@layouts/exampleLayout.astro';
+import IsInvalid from '@components/react/examples/textarea/IsInvalid';
+---
+
+<ExampleLayout title="IsInvalid Example | Textarea">
+  <IsInvalid client:only="react" />
+</ExampleLayout>
\ No newline at end of file
diff --git a/src/utils/server/example.ts b/src/utils/server/example.ts
index e4c76d8..961aeb7 100644
--- a/src/utils/server/example.ts
+++ b/src/utils/server/example.ts
@@ -19,6 +19,17 @@ const toCamelCase = (str: string): string => {
     .join('');
 };
 
+// defaultを先頭に持ってくるソート関数, Exampleの項目を受け取る
+const sortDefaultFirst = (a: Example, b: Example): number => {
+  if (a.name === 'default') {
+    return -1;
+  }
+  if (b.name === 'default') {
+    return 1;
+  }
+  return 0;
+};
+
 // expampleKeyとしてstackを投げると
 // src/pages/components/examples/stack/* を検索する
 export const getAllExample = (exampleKey: string): Example[] => {
@@ -28,17 +39,20 @@ export const getAllExample = (exampleKey: string): Example[] => {
 
   const files = fs.readdirSync(exampleDir);
 
-  return files.map((file) => {
-    const filePath = path.join(exapmleComponentDir, file).replace('.astro', '.tsx');
+  const examples = files.map((file) => {
+    const filePath = path.join(exapmleComponentDir, toCamelCase(file).replace('.astro', '.tsx'));
     const code = fs.readFileSync(filePath, 'utf-8');
 
     // .astroを外してURLに組み立てる
     const url = path.join(exampleUrl, file.replace('.astro', ''));
 
-    const name = file.replace('.astro', '');
+    const name = file.replace('.astro', '').replaceAll('-', ' ');
 
     return { name, url, code };
   });
+
+  // 'default'を先頭に持ってくる
+  return examples.sort(sortDefaultFirst);
 };
 
 // ubie-uiにおいて、LinkButtonはButtonと同一ディレクトリに存在する

From a7869636e8907a8c6b0f9d6af160f2d3bca2341f Mon Sep 17 00:00:00 2001
From: 8845musign <hiroki.yokouchi@dr-ubie.com>
Date: Thu, 19 Oct 2023 22:32:06 +0900
Subject: [PATCH 4/7] refactor name

Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
---
 .../react/examples/{textarea => text-area}/Default.tsx        | 0
 .../react/examples/{textarea => text-area}/Disabled.tsx       | 0
 .../react/examples/{textarea => text-area}/IsInvalid.tsx      | 0
 .../components/examples/{textarea => text-area}/default.astro | 4 ++--
 .../examples/{textarea => text-area}/disabled.astro           | 4 ++--
 .../examples/{textarea => text-area}/is-invalid.astro         | 4 ++--
 src/pages/components/{textarea.mdx => text-area.mdx}          | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)
 rename src/components/react/examples/{textarea => text-area}/Default.tsx (100%)
 rename src/components/react/examples/{textarea => text-area}/Disabled.tsx (100%)
 rename src/components/react/examples/{textarea => text-area}/IsInvalid.tsx (100%)
 rename src/pages/components/examples/{textarea => text-area}/default.astro (64%)
 rename src/pages/components/examples/{textarea => text-area}/disabled.astro (63%)
 rename src/pages/components/examples/{textarea => text-area}/is-invalid.astro (63%)
 rename src/pages/components/{textarea.mdx => text-area.mdx} (94%)

diff --git a/src/components/react/examples/textarea/Default.tsx b/src/components/react/examples/text-area/Default.tsx
similarity index 100%
rename from src/components/react/examples/textarea/Default.tsx
rename to src/components/react/examples/text-area/Default.tsx
diff --git a/src/components/react/examples/textarea/Disabled.tsx b/src/components/react/examples/text-area/Disabled.tsx
similarity index 100%
rename from src/components/react/examples/textarea/Disabled.tsx
rename to src/components/react/examples/text-area/Disabled.tsx
diff --git a/src/components/react/examples/textarea/IsInvalid.tsx b/src/components/react/examples/text-area/IsInvalid.tsx
similarity index 100%
rename from src/components/react/examples/textarea/IsInvalid.tsx
rename to src/components/react/examples/text-area/IsInvalid.tsx
diff --git a/src/pages/components/examples/textarea/default.astro b/src/pages/components/examples/text-area/default.astro
similarity index 64%
rename from src/pages/components/examples/textarea/default.astro
rename to src/pages/components/examples/text-area/default.astro
index 63d0de0..a3811ab 100644
--- a/src/pages/components/examples/textarea/default.astro
+++ b/src/pages/components/examples/text-area/default.astro
@@ -1,8 +1,8 @@
 ---
 import ExampleLayout from '@layouts/exampleLayout.astro';
-import Default from '@components/react/examples/textarea/Default';
+import Default from '@components/react/examples/text-area/Default';
 ---
 
 <ExampleLayout title="Default Example | Textarea">
   <Default client:only="react" />
-</ExampleLayout>
\ No newline at end of file
+</ExampleLayout>
diff --git a/src/pages/components/examples/textarea/disabled.astro b/src/pages/components/examples/text-area/disabled.astro
similarity index 63%
rename from src/pages/components/examples/textarea/disabled.astro
rename to src/pages/components/examples/text-area/disabled.astro
index c630819..14000e1 100644
--- a/src/pages/components/examples/textarea/disabled.astro
+++ b/src/pages/components/examples/text-area/disabled.astro
@@ -1,8 +1,8 @@
 ---
 import ExampleLayout from '@layouts/exampleLayout.astro';
-import Disabled from '@components/react/examples/textarea/Disabled';
+import Disabled from '@components/react/examples/text-area/Disabled';
 ---
 
 <ExampleLayout title="Disabled Example | Textarea">
   <Disabled client:only="react" />
-</ExampleLayout>
\ No newline at end of file
+</ExampleLayout>
diff --git a/src/pages/components/examples/textarea/is-invalid.astro b/src/pages/components/examples/text-area/is-invalid.astro
similarity index 63%
rename from src/pages/components/examples/textarea/is-invalid.astro
rename to src/pages/components/examples/text-area/is-invalid.astro
index ace07f8..2f75366 100644
--- a/src/pages/components/examples/textarea/is-invalid.astro
+++ b/src/pages/components/examples/text-area/is-invalid.astro
@@ -1,8 +1,8 @@
 ---
 import ExampleLayout from '@layouts/exampleLayout.astro';
-import IsInvalid from '@components/react/examples/textarea/IsInvalid';
+import IsInvalid from '@components/react/examples/text-area/IsInvalid';
 ---
 
 <ExampleLayout title="IsInvalid Example | Textarea">
   <IsInvalid client:only="react" />
-</ExampleLayout>
\ No newline at end of file
+</ExampleLayout>
diff --git a/src/pages/components/textarea.mdx b/src/pages/components/text-area.mdx
similarity index 94%
rename from src/pages/components/textarea.mdx
rename to src/pages/components/text-area.mdx
index b554e9b..3834f2b 100644
--- a/src/pages/components/textarea.mdx
+++ b/src/pages/components/text-area.mdx
@@ -1,6 +1,6 @@
 ---
 title: 'TextArea'
-exampleKey: 'textarea'
+exampleKey: 'text-area'
 layout: '@layouts/ComponentLayout.astro'
 description: '複数行のテキスト入力が可能なフィールドです'
 ---

From fbecae23d4453ab4afce2ddf009103ee1ff483df Mon Sep 17 00:00:00 2001
From: 8845musign <hiroki.yokouchi@dr-ubie.com>
Date: Thu, 26 Oct 2023 10:30:07 +0900
Subject: [PATCH 5/7] Make <code> blend in with its surroundings

Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
---
 src/styles/global.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 69a0ff7..7e00e31 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -44,15 +44,14 @@ h6 {
 
 code {
     display: inline-block;
-    padding-right: 0.4ch;
-    padding-left: 0.4ch;
+    padding: 0.2ch 0.4ch;
     margin: 0 2px;
     font-family: SFMono-Medium, "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, Consolas, Courier, monospace;
     font-size: 0.85em;
+    font-weight: bold;
     line-height: 1.1;
     color: var(--color-ubie-black-700);
-    background-color: var(--color-background-gray);
-    border: 1px solid var(--color-border);
+    background-color: var(--color-ubie-black-100);
     border-radius: var(--radius-sm);
 }
 

From 29065919f58605eaaac60aa23320bd24f82b5cbc Mon Sep 17 00:00:00 2001
From: 8845musign <hiroki.yokouchi@dr-ubie.com>
Date: Thu, 26 Oct 2023 10:44:53 +0900
Subject: [PATCH 6/7] <code>, bold is too loud.

Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
---
 src/styles/global.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 7e00e31..fb3732f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -44,11 +44,10 @@ h6 {
 
 code {
     display: inline-block;
-    padding: 0.2ch 0.4ch;
+    padding: 0.2ch 0.4ch 0.1ch;
     margin: 0 2px;
     font-family: SFMono-Medium, "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, Consolas, Courier, monospace;
     font-size: 0.85em;
-    font-weight: bold;
     line-height: 1.1;
     color: var(--color-ubie-black-700);
     background-color: var(--color-ubie-black-100);

From bb82cf2c5d98b7229fc522b2140d2cb1f2f00ef9 Mon Sep 17 00:00:00 2001
From: 8845musign <hiroki.yokouchi@dr-ubie.com>
Date: Thu, 26 Oct 2023 10:50:39 +0900
Subject: [PATCH 7/7] use semantic color

Signed-off-by: 8845musign <hiroki.yokouchi@dr-ubie.com>
---
 src/styles/global.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index fb3732f..ad8890c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -50,7 +50,7 @@ code {
     font-size: 0.85em;
     line-height: 1.1;
     color: var(--color-ubie-black-700);
-    background-color: var(--color-ubie-black-100);
+    background-color: var(--color-background-gray);
     border-radius: var(--radius-sm);
 }