diff --git a/packages/docs/pages/core/form.mdx b/packages/docs/pages/core/form.mdx
new file mode 100644
index 0000000..7e8590c
--- /dev/null
+++ b/packages/docs/pages/core/form.mdx
@@ -0,0 +1,59 @@
+import Preview from '@/helper/preview.vue'
+import PreviewFrame from '@/helper/preview-frame.vue'
+import CodeHighlight from '@/helper/code-highlight.vue'
+import Form from '@vue-material/core/Form'
+import Input from '@vue-material/core/Input'
+import Button from '@vue-material/core/Button'
+import Flex from '@vue-material/core/Box/Flex'
+
+export const meta = {
+ title: 'Form',
+ description: 'A form component that provides form values to its children.',
+ source: 'packages/lib/src/components/Form',
+ inherits: []
+}
+
+## Usage
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+ ```
+
+
+
+
+## Props
+
+`modelValue?`: any
+
+- The form data object. It provides values to child components based on their `name` prop.
diff --git a/packages/docs/pages/core/frame.mdx b/packages/docs/pages/core/frame.mdx
new file mode 100644
index 0000000..566a37d
--- /dev/null
+++ b/packages/docs/pages/core/frame.mdx
@@ -0,0 +1,120 @@
+import Preview from '@/helper/preview.vue'
+import PreviewFrame from '@/helper/preview-frame.vue'
+import CodeHighlight from '@/helper/code-highlight.vue'
+import Frame from '@vue-material/core/Frame'
+import Flex from '@vue-material/core/Box/Flex'
+
+export const meta = {
+ title: 'Frame',
+ description: 'A shaped container component.',
+ source: 'packages/lib/src/components/Frame',
+ inherits: ['core/Box']
+}
+
+## Usage
+
+
+
+
+
+ Frame
+
+
+
+
+
+ ```vue
+
+
+
+
+ Frame
+
+
+ ```
+
+
+
+
+## Themes
+
+
+
+
+ Primary
+ Secondary
+ Tertiary
+ Error
+
+
+
+
+ ```vue
+
+
+
+
+ Primary
+ Secondary
+ Tertiary
+ Error
+
+
+ ```
+
+
+
+
+## Shapes
+
+
+
+
+ Circle
+ Flower
+ Clover
+ Hexagon
+
+
+
+
+ ```vue
+
+
+
+
+ Circle
+ Flower
+ Clover
+ Hexagon
+
+
+ ```
+
+
+
+
+## Props
+
+> #### Inherits `BoxProps`
+
+`size?`: SizesString
+
+- The size of the frame
+- Default: `96`
+
+`frame?`: 'circle' | 'flower' | 'clover' | 'hexagon' | 'none'
+
+- The shape of the frame
+- Default: `'none'`
+
+`theme?`: 'primary' | 'secondary' | 'tertiary' | 'error' | 'none'
+
+- The color theme of the frame
+- Default: `'none'`
diff --git a/packages/docs/pages/core/paper.mdx b/packages/docs/pages/core/paper.mdx
new file mode 100644
index 0000000..25e4389
--- /dev/null
+++ b/packages/docs/pages/core/paper.mdx
@@ -0,0 +1,79 @@
+import Preview from '@/helper/preview.vue'
+import PreviewFrame from '@/helper/preview-frame.vue'
+import CodeHighlight from '@/helper/code-highlight.vue'
+import Paper from '@vue-material/core/Paper'
+import Flex from '@vue-material/core/Box/Flex'
+
+export const meta = {
+ title: 'Paper',
+ description: 'A surface that displays content and actions on a single topic.',
+ source: 'packages/lib/src/components/Paper',
+ inherits: ['core/Box']
+}
+
+## Usage
+
+
+
+
+ Neutral (Default)
+
+
+
+
+ ```vue
+
+
+
+ Neutral (Default)
+
+ ```
+
+
+
+
+## Variants
+
+
+
+
+ Primary
+ Secondary
+ Tertiary
+ Error
+ Neutral
+ Outlined
+
+
+
+
+ ```vue
+
+
+
+
+ Primary
+ Secondary
+ Tertiary
+ Error
+ Neutral
+ Outlined
+
+
+ ```
+
+
+
+
+## Props
+
+> #### Inherits `BoxProps`
+
+`variant?`: 'primary' | 'secondary' | 'tertiary' | 'error' | 'neutral' | 'outlined'
+
+- The variant of the paper
+- Default: `"neutral"`
diff --git a/packages/docs/pages/core/select.mdx b/packages/docs/pages/core/select.mdx
new file mode 100644
index 0000000..babb4d8
--- /dev/null
+++ b/packages/docs/pages/core/select.mdx
@@ -0,0 +1,152 @@
+import Preview from '@/helper/preview.vue'
+import PreviewFrame from '@/helper/preview-frame.vue'
+import CodeHighlight from '@/helper/code-highlight.vue'
+import Select from '@vue-material/core/Select'
+import Flex from '@vue-material/core/Box/Flex'
+
+export const meta = {
+ title: 'Select',
+ description: 'Select component allow users to choose one or multiple values from a list of options.',
+ source: 'packages/lib/src/components/Select',
+ inherits: []
+}
+
+## Usage
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+ ```
+
+
+
+
+## Multiple Selection
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+ ```
+
+
+
+
+## Object Values
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+ ```
+
+
+
+
+## Props
+
+> #### Inherits `HTMLAttributes`
+
+`value?`: (string | number)[]
+
+- The selected values
+
+`defaultValue?`: (string | number)[]
+
+- The initial selected values
+
+`items?`: (string | number | { value: string | number, label: any })[]
+
+- The list of options to display. Can be an array of strings/numbers or objects with `value` and `label`.
+
+`placeholder?`: string
+
+- The placeholder text
+
+`multiple?`: boolean
+
+- Whether to allow multiple selection
+
+`required?`: boolean
+
+- Whether the selection is required
+
+`variant?`: 'filled' | 'outlined'
+
+- The visual variant of the select input
+- Default: `filled`
+
+`prefix?`: string
+
+- Prefix text
+
+`icon?`: string | Component
+
+- Icon component or name
+
+## Events
+
+`change`: (value: (string | number)[]) => void
+
+- Emitted when the selection changes
diff --git a/packages/docs/pages/core/skeleton.mdx b/packages/docs/pages/core/skeleton.mdx
new file mode 100644
index 0000000..aa23d1f
--- /dev/null
+++ b/packages/docs/pages/core/skeleton.mdx
@@ -0,0 +1,73 @@
+import Preview from '@/helper/preview.vue'
+import PreviewFrame from '@/helper/preview-frame.vue'
+import CodeHighlight from '@/helper/code-highlight.vue'
+import Skeleton from '@vue-material/core/Skeleton'
+import Flex from '@vue-material/core/Box/Flex'
+
+export const meta = {
+ title: 'Skeleton',
+ description: 'Display a placeholder for content that is loading.',
+ source: 'packages/lib/src/components/Skeleton',
+ inherits: ['core/Box']
+}
+
+## Usage
+
+
+
+
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+
+
+
+
+ ```
+
+
+
+
+## Wrapping Content
+
+Skeleton can wrap content to mimic its shape while loading.
+
+
+
+
+ Content Loaded
+
+
+
+
+ ```vue
+
+
+
+
+ Content Loaded
+
+
+ ```
+
+
+
+
+
+## Props
+
+> #### Inherits `BoxProps`
diff --git a/packages/docs/pages/core/switch.mdx b/packages/docs/pages/core/switch.mdx
new file mode 100644
index 0000000..7f1a18d
--- /dev/null
+++ b/packages/docs/pages/core/switch.mdx
@@ -0,0 +1,128 @@
+import Preview from '@/helper/preview.vue'
+import PreviewFrame from '@/helper/preview-frame.vue'
+import CodeHighlight from '@/helper/code-highlight.vue'
+import Switch from '@vue-material/core/Switch'
+import Flex from '@vue-material/core/Box/Flex'
+
+export const meta = {
+ title: 'Switch',
+ description: 'A toggle switch component.',
+ source: 'packages/lib/src/components/Switch',
+ inherits: []
+}
+
+## Usage
+
+
+
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+
+ ```
+
+
+
+
+## Variants
+
+
+
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+
+
+
+ ```
+
+
+
+
+## Sizes
+
+
+
+
+
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+
+
+
+
+
+ ```
+
+
+
+
+## Props
+
+> #### Inherits `InputHTMLAttributes`
+
+`variant?`: 'outline' | 'filled'
+
+- The variant of the switch
+- Default: `"outline"`
+
+`size?`: SizesString
+
+- The size of the switch
+- Default: `"#xs"`
+
+`length?`: number
+
+- The length multiplier of the switch relative to its height
+- Default: `1.9`
+
+`checked?`: boolean
+
+- Whether the switch is checked
+
+`defaultChecked?`: boolean
+
+- The initial checked state
+
+## Events
+
+`change`: (value: boolean) => void
+
+- Emitted when the switch state changes