diff --git a/apps/landing/src/app/(detail)/components/[component]/button/demo/Variants.tsx b/apps/landing/src/app/(detail)/components/[component]/button/demo/1_Variants.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/button/demo/Variants.tsx
rename to apps/landing/src/app/(detail)/components/[component]/button/demo/1_Variants.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/button/demo/Icon.tsx b/apps/landing/src/app/(detail)/components/[component]/button/demo/2_Icon.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/button/demo/Icon.tsx
rename to apps/landing/src/app/(detail)/components/[component]/button/demo/2_Icon.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/button/demo/Danger.tsx b/apps/landing/src/app/(detail)/components/[component]/button/demo/3_Danger.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/button/demo/Danger.tsx
rename to apps/landing/src/app/(detail)/components/[component]/button/demo/3_Danger.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/button/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/button/demo/4_Disabled.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/button/demo/Disabled.tsx
rename to apps/landing/src/app/(detail)/components/[component]/button/demo/4_Disabled.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/button/demo/Colors.tsx b/apps/landing/src/app/(detail)/components/[component]/button/demo/5_Colors.tsx
similarity index 100%
rename from apps/landing/src/app/(detail)/components/[component]/button/demo/Colors.tsx
rename to apps/landing/src/app/(detail)/components/[component]/button/demo/5_Colors.tsx
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/checkbox/Api.mdx
index e69de29b..9ad52408 100644
--- a/apps/landing/src/app/(detail)/components/[component]/checkbox/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/Api.mdx
@@ -0,0 +1,46 @@
+import { PropsTable } from '@/components/PropsTable'
+
+###### API
+
+`Checkbox` props extends the input HTML attributes (except `type` and `onChange`).
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'children',
+      description: 'The label content of the checkbox',
+      type: '`React.ReactNode`',
+      default: '-',
+    },
+    {
+      property: 'checked',
+      description: 'Whether the checkbox is checked (controlled)',
+      type: '`boolean`',
+      default: '`undefined`',
+    },
+    {
+      property: 'defaultChecked',
+      description: 'Whether the checkbox is checked by default (uncontrolled)',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'disabled',
+      description: 'Whether the checkbox is disabled',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'onChange',
+      description: 'Callback when the checked state changes',
+      type: '`(checked: boolean) => void`',
+      default: '`undefined`',
+    },
+    {
+      property: 'colors',
+      description: 'Custom color variables for the checkbox',
+      type: '```{<br>  primary?: string<br>  border?: string<br>  text?: string<br>  inputBg?: string<br>  checkIcon?: string<br>}```',
+      default: '`undefined`',
+    },
+  ]}
+/>
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/1_Default.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/1_Default.tsx
new file mode 100644
index 00000000..a4947e25
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/1_Default.tsx
@@ -0,0 +1,9 @@
+import { Checkbox } from '@devup-ui/components'
+
+/**
+ * **Default**
+ * Basic checkbox with a label. Users can click to toggle the checked state.
+ */
+export default function Default() {
+  return <Checkbox>Agree to terms and conditions</Checkbox>
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/2_Checked.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/2_Checked.tsx
new file mode 100644
index 00000000..cd7f042b
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/2_Checked.tsx
@@ -0,0 +1,9 @@
+import { Checkbox } from '@devup-ui/components'
+
+/**
+ * **Checked**
+ * Use `defaultChecked` prop to set the initial checked state for uncontrolled usage, or use `checked` prop for controlled state management.
+ */
+export default function Checked() {
+  return <Checkbox defaultChecked>Checked by default</Checkbox>
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/3_Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/3_Disabled.tsx
new file mode 100644
index 00000000..a60cc500
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/3_Disabled.tsx
@@ -0,0 +1,17 @@
+import { Checkbox } from '@devup-ui/components'
+import { VStack } from '@devup-ui/react'
+
+/**
+ * **Disabled**
+ * Use `disabled` prop to prevent user interaction. The checkbox will have a muted appearance and cannot be toggled.
+ */
+export default function Disabled() {
+  return (
+    <VStack gap="8px">
+      <Checkbox disabled>Disabled unchecked</Checkbox>
+      <Checkbox defaultChecked disabled>
+        Disabled checked
+      </Checkbox>
+    </VStack>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/4_Colors.tsx b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/4_Colors.tsx
new file mode 100644
index 00000000..d58363d1
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/checkbox/demo/4_Colors.tsx
@@ -0,0 +1,22 @@
+import { Checkbox } from '@devup-ui/components'
+import { Flex } from '@devup-ui/react'
+
+/**
+ * **Colors**
+ * Pass in an object containing color tokens into `colors` prop. You can customize the checkbox appearance using `primary`, `border`, `text`, `inputBg`, and `checkIcon` color values.
+ */
+export default function Colors() {
+  return (
+    <Flex flexWrap="wrap" gap="16px">
+      <Checkbox colors={{ primary: '#10B981' }} defaultChecked>
+        Green
+      </Checkbox>
+      <Checkbox colors={{ primary: 'orange' }} defaultChecked>
+        Orange
+      </Checkbox>
+      <Checkbox colors={{ primary: 'steelblue' }} defaultChecked>
+        Steel Blue
+      </Checkbox>
+    </Flex>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx
index e69de29b..402349c9 100644
--- a/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/Api.mdx
@@ -0,0 +1,135 @@
+import { PropsTable } from '@/components/PropsTable'
+
+###### API
+
+`Radio` props extends the input HTML attributes (except `type`).
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'children',
+      description: 'The label content of the radio',
+      type: '`React.ReactNode`',
+      default: '`undefined`',
+    },
+    {
+      property: 'checked',
+      description: 'Whether the radio is checked',
+      type: '`boolean`',
+      default: '`undefined`',
+    },
+    {
+      property: 'disabled',
+      description: 'Whether the radio is disabled',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'variant',
+      description: 'The visual variant of the radio',
+      type: "`'default' | 'button'`",
+      default: "`'default'`",
+    },
+    {
+      property: 'firstButton',
+      description:
+        'Whether this is the first button in a button group (only for button variant)',
+      type: '`boolean`',
+      default: '`undefined`',
+    },
+    {
+      property: 'lastButton',
+      description:
+        'Whether this is the last button in a button group (only for button variant)',
+      type: '`boolean`',
+      default: '`undefined`',
+    },
+    {
+      property: 'classNames',
+      description: 'Custom class names for inner elements',
+      type: '```{<br>  label?: string<br>}```',
+      default: '`undefined`',
+    },
+    {
+      property: 'styles',
+      description: 'Custom inline styles for inner elements',
+      type: '```{<br>  label?: React.CSSProperties<br>}```',
+      default: '`undefined`',
+    },
+    {
+      property: 'colors',
+      description: 'Custom color variables for the radio',
+      type: '```{<br>  primary?: string<br>  border?: string<br>  text?: string<br>  bg?: string<br>  hoverBg?: string<br>  hoverBorder?: string<br>  hoverColor?: string<br>  checkedBg?: string<br>  checkedBorder?: string<br>  checkedColor?: string<br>  disabledBg?: string<br>  disabledColor?: string<br>}```',
+      default: '`undefined`',
+    },
+  ]}
+/>
+
+###### RadioGroup API
+
+`RadioGroup` component for managing a group of radio buttons.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'options',
+      description: 'Array of options for the radio group',
+      type: '```{ value: string | number | boolean; label: React.ReactNode }[]```',
+      default: '-',
+    },
+    {
+      property: 'value',
+      description: 'The controlled value of the radio group',
+      type: '`string | number | boolean`',
+      default: '`undefined`',
+    },
+    {
+      property: 'defaultValue',
+      description: 'The default value of the radio group (uncontrolled)',
+      type: '`string | number | boolean`',
+      default: '`undefined`',
+    },
+    {
+      property: 'onChange',
+      description: 'Callback when the selected value changes',
+      type: '`(value: string | number | boolean) => void`',
+      default: '`undefined`',
+    },
+    {
+      property: 'disabled',
+      description: 'Whether all radios in the group are disabled',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'direction',
+      description: 'The layout direction of the radio group',
+      type: "`'row' | 'column'`",
+      default: "`'row'`",
+    },
+    {
+      property: 'variant',
+      description: 'The visual variant of the radio buttons',
+      type: "`'default' | 'button'`",
+      default: "`'default'`",
+    },
+    {
+      property: 'colors',
+      description: 'Custom color variables (same as Radio colors)',
+      type: '`RadioColors`',
+      default: '`undefined`',
+    },
+    {
+      property: 'classNames',
+      description: 'Custom class names for inner elements',
+      type: '```{<br>  label?: string<br>  container?: string<br>}```',
+      default: '`undefined`',
+    },
+    {
+      property: 'styles',
+      description: 'Custom inline styles for inner elements',
+      type: '```{<br>  label?: React.CSSProperties<br>  container?: React.CSSProperties<br>}```',
+      default: '`undefined`',
+    },
+  ]}
+/>
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/1_Default.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/1_Default.tsx
new file mode 100644
index 00000000..43793e54
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/1_Default.tsx
@@ -0,0 +1,18 @@
+import { RadioGroup } from '@devup-ui/components'
+
+/**
+ * **Default**
+ * Use `RadioGroup` with an `options` array to create a group of radio buttons. Only one option can be selected at a time.
+ */
+export default function Default() {
+  return (
+    <RadioGroup
+      defaultValue="option1"
+      options={[
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' },
+      ]}
+    />
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/2_Variant.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/2_Variant.tsx
new file mode 100644
index 00000000..b590abf2
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/2_Variant.tsx
@@ -0,0 +1,19 @@
+import { RadioGroup } from '@devup-ui/components'
+
+/**
+ * **Variant**
+ * Use `variant="button"` to display radio options as a segmented button group. Options are displayed inline with connected borders.
+ */
+export default function ButtonVariant() {
+  return (
+    <RadioGroup
+      defaultValue="option1"
+      options={[
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' },
+      ]}
+      variant="button"
+    />
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/3_Direction.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/3_Direction.tsx
new file mode 100644
index 00000000..8a3dacb1
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/3_Direction.tsx
@@ -0,0 +1,19 @@
+import { RadioGroup } from '@devup-ui/components'
+
+/**
+ * **Direction**
+ * Use `direction="column"` to stack radio buttons vertically. Default direction is `"row"` which displays options horizontally.
+ */
+export default function Column() {
+  return (
+    <RadioGroup
+      defaultValue="option1"
+      direction="column"
+      options={[
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' },
+      ]}
+    />
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/radio/demo/4_Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/radio/demo/4_Disabled.tsx
new file mode 100644
index 00000000..e354b5c4
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/radio/demo/4_Disabled.tsx
@@ -0,0 +1,19 @@
+import { RadioGroup } from '@devup-ui/components'
+
+/**
+ * **Disabled**
+ * Use `disabled` prop to prevent user interaction with all radio options. All radios will have a muted appearance and cannot be selected.
+ */
+export default function Disabled() {
+  return (
+    <RadioGroup
+      defaultValue="option1"
+      disabled
+      options={[
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' },
+      ]}
+    />
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx
index e69de29b..d8623731 100644
--- a/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/select/Api.mdx
@@ -0,0 +1,184 @@
+import { PropsTable } from '@/components/PropsTable'
+
+###### API
+
+The Select component is a compound component that consists of multiple parts.
+
+###### Select
+
+The root component that provides context for the select.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'children',
+      description: 'The select content (Trigger, Container, Options)',
+      type: '`React.ReactNode`',
+      default: '-',
+    },
+    {
+      property: 'value',
+      description: 'The controlled value of the select',
+      type: '`string | string[]`',
+      default: '`undefined`',
+    },
+    {
+      property: 'defaultValue',
+      description: 'The default value of the select (uncontrolled)',
+      type: '`string | string[]`',
+      default: '`undefined`',
+    },
+    {
+      property: 'onChange',
+      description: 'Callback when the selected value changes',
+      type: '`(value: string) => void`',
+      default: '`undefined`',
+    },
+    {
+      property: 'open',
+      description: 'Whether the select dropdown is open (controlled)',
+      type: '`boolean`',
+      default: '`undefined`',
+    },
+    {
+      property: 'defaultOpen',
+      description: 'Whether the select dropdown is open by default',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'onOpenChange',
+      description: 'Callback when the open state changes',
+      type: '`(open: boolean) => void`',
+      default: '`undefined`',
+    },
+    {
+      property: 'type',
+      description: 'The selection mode of the select',
+      type: "`'default' | 'radio' | 'checkbox'`",
+      default: "`'default'`",
+    },
+    {
+      property: 'typography',
+      description: 'Typography style key from the theme',
+      type: '`DevupThemeTypographyKeys`',
+      default: '`undefined`',
+    },
+    {
+      property: 'options',
+      description:
+        'Shorthand for defining options without using compound components',
+      type: '```{ label?: string; disabled?: boolean; value: string; showCheck?: boolean; onClick?: (value, e) => void }[]```',
+      default: '`undefined`',
+    },
+    {
+      property: 'colors',
+      description: 'Custom color variables for the select',
+      type: '```{<br>  primary?: string<br>  border?: string<br>  inputBackground?: string<br>  inputDisabledBackground?: string<br>  inputDisabledText?: string<br>  base10?: string<br>  title?: string<br>  selectDisabled?: string<br>  primaryBg?: string<br>}```',
+      default: '`undefined`',
+    },
+  ]}
+/>
+
+###### SelectTrigger
+
+The button that triggers the dropdown to open/close.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'children',
+      description: 'The trigger content',
+      type: '`React.ReactNode`',
+      default: '-',
+    },
+    {
+      property: 'asChild',
+      description: 'Render as the child element instead of a Button',
+      type: '`boolean`',
+      default: '`false`',
+    },
+  ]}
+/>
+
+###### SelectContainer
+
+The dropdown container that holds the options.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'children',
+      description: 'The container content (Options)',
+      type: '`React.ReactNode`',
+      default: '-',
+    },
+    {
+      property: 'showConfirmButton',
+      description: 'Whether to show a confirm button (for checkbox type)',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'confirmButtonText',
+      description: 'Text for the confirm button',
+      type: '`string`',
+      default: "`'D�'`",
+    },
+    {
+      property: 'x',
+      description: 'Horizontal offset for the dropdown position',
+      type: '`number`',
+      default: '`0`',
+    },
+    {
+      property: 'y',
+      description: 'Vertical offset for the dropdown position',
+      type: '`number`',
+      default: '`0`',
+    },
+  ]}
+/>
+
+###### SelectOption
+
+An individual option within the select dropdown.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'children',
+      description: 'The option content',
+      type: '`React.ReactNode`',
+      default: '-',
+    },
+    {
+      property: 'value',
+      description: 'The value of the option',
+      type: '`string`',
+      default: '`undefined`',
+    },
+    {
+      property: 'disabled',
+      description: 'Whether the option is disabled',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'showCheck',
+      description: 'Whether to show a check icon when selected',
+      type: '`boolean`',
+      default: '`true`',
+    },
+    {
+      property: 'onClick',
+      description: 'Custom click handler for the option',
+      type: '`(value: string | undefined, e?: React.MouseEvent) => void`',
+      default: '`undefined`',
+    },
+  ]}
+/>
+
+###### SelectDivider
+
+A visual divider between options.
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/1_Default.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/1_Default.tsx
new file mode 100644
index 00000000..adcd7e2f
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/1_Default.tsx
@@ -0,0 +1,23 @@
+import {
+  Select,
+  SelectContainer,
+  SelectOption,
+  SelectTrigger,
+} from '@devup-ui/components'
+
+/**
+ * **Default**
+ * Compound component with trigger and dropdown. Use `SelectTrigger` to create the button, `SelectContainer` for the dropdown, and `SelectOption` for each option.
+ */
+export default function Default() {
+  return (
+    <Select>
+      <SelectTrigger>Select an option</SelectTrigger>
+      <SelectContainer>
+        <SelectOption value="option1">Option 1</SelectOption>
+        <SelectOption value="option2">Option 2</SelectOption>
+        <SelectOption value="option3">Option 3</SelectOption>
+      </SelectContainer>
+    </Select>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/2_Radio.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/2_Radio.tsx
new file mode 100644
index 00000000..a7e4af88
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/2_Radio.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import {
+  Select,
+  SelectContainer,
+  SelectOption,
+  SelectTrigger,
+} from '@devup-ui/components'
+import { useState } from 'react'
+
+/**
+ * **Radio Type**
+ * Use `type="radio"` for single selection mode. The selected option is highlighted with a check icon, and the dropdown closes after selection.
+ */
+export default function Radio() {
+  const [value, setValue] = useState('')
+
+  return (
+    <Select onChange={setValue} type="radio" value={value}>
+      <SelectTrigger>{value || 'Select an option'}</SelectTrigger>
+      <SelectContainer>
+        <SelectOption value="option1">Option 1</SelectOption>
+        <SelectOption value="option2">Option 2</SelectOption>
+        <SelectOption value="option3">Option 3</SelectOption>
+      </SelectContainer>
+    </Select>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/3_Checkbox.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/3_Checkbox.tsx
new file mode 100644
index 00000000..5d801786
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/3_Checkbox.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import {
+  Select,
+  SelectContainer,
+  SelectOption,
+  SelectTrigger,
+} from '@devup-ui/components'
+import { useState } from 'react'
+
+/**
+ * **Checkbox Type**
+ * Use `type="checkbox"` for multiple selection mode. Users can select multiple options, and use `showConfirmButton` on the container to add a confirm button.
+ */
+export default function Checkbox() {
+  const [value, setValue] = useState<string[]>([])
+
+  const handleChange = (nextValue: string) => {
+    if (value.includes(nextValue)) {
+      setValue(value.filter((v) => v !== nextValue))
+    } else {
+      setValue([...value, nextValue])
+    }
+  }
+
+  return (
+    <Select onChange={handleChange} type="checkbox" value={value}>
+      <SelectTrigger>
+        {value.length > 0 ? value.join(', ') : 'Select options'}
+      </SelectTrigger>
+      <SelectContainer showConfirmButton>
+        <SelectOption value="option1">Option 1</SelectOption>
+        <SelectOption value="option2">Option 2</SelectOption>
+        <SelectOption value="option3">Option 3</SelectOption>
+      </SelectContainer>
+    </Select>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/select/demo/4_Options.tsx b/apps/landing/src/app/(detail)/components/[component]/select/demo/4_Options.tsx
new file mode 100644
index 00000000..bee969e9
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/select/demo/4_Options.tsx
@@ -0,0 +1,19 @@
+import { Select } from '@devup-ui/components'
+
+/**
+ * **Options**
+ * Use the `options` prop as a shorthand to define options without compound components. Each option can have `label`, `value`, `disabled`, and `onClick` properties.
+ */
+export default function WithOptions() {
+  return (
+    <Select
+      options={[
+        { label: 'Option 1', value: 'option1' },
+        { label: 'Option 2', value: 'option2' },
+        { label: 'Option 3', value: 'option3', disabled: true },
+      ]}
+    >
+      Select with options prop
+    </Select>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx
index e69de29b..ab4c9205 100644
--- a/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/Api.mdx
@@ -0,0 +1,73 @@
+import { PropsTable } from '@/components/PropsTable'
+
+###### API
+
+The Stepper component is a compound component that consists of multiple parts.
+
+###### Stepper
+
+The root component that provides context for the stepper.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'children',
+      description: 'The stepper content (Container, Buttons, Input)',
+      type: '`React.ReactNode`',
+      default: '`undefined`',
+    },
+    {
+      property: 'value',
+      description: 'The controlled value of the stepper',
+      type: '`number`',
+      default: '`undefined`',
+    },
+    {
+      property: 'defaultValue',
+      description: 'The default value of the stepper (uncontrolled)',
+      type: '`number`',
+      default: '`0`',
+    },
+    {
+      property: 'onValueChange',
+      description: 'Callback when the stepper value changes',
+      type: '`(value: number) => void`',
+      default: '`undefined`',
+    },
+    {
+      property: 'min',
+      description: 'The minimum value allowed',
+      type: '`number`',
+      default: '`0`',
+    },
+    {
+      property: 'max',
+      description: 'The maximum value allowed',
+      type: '`number`',
+      default: '`100`',
+    },
+    {
+      property: 'type',
+      description:
+        'Whether the value is editable via input or displayed as text',
+      type: "`'input' | 'text'`",
+      default: "`'input'`",
+    },
+  ]}
+/>
+
+###### StepperContainer
+
+A flex container that wraps the stepper elements.
+
+###### StepperDecreaseButton
+
+Button to decrease the stepper value by 1. Automatically disabled when value reaches min.
+
+###### StepperIncreaseButton
+
+Button to increase the stepper value by 1. Automatically disabled when value reaches max.
+
+###### StepperInput
+
+Displays the current value. When type is 'input', users can edit the value directly.
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/1_Default.tsx b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/1_Default.tsx
new file mode 100644
index 00000000..4b64d9ba
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/1_Default.tsx
@@ -0,0 +1,23 @@
+import {
+  Stepper,
+  StepperContainer,
+  StepperDecreaseButton,
+  StepperIncreaseButton,
+  StepperInput,
+} from '@devup-ui/components'
+
+/**
+ * **Default**
+ * Compound component with editable input. Use `StepperContainer` to wrap the buttons and input, and compose with `StepperDecreaseButton`, `StepperInput`, and `StepperIncreaseButton`.
+ */
+export default function Default() {
+  return (
+    <Stepper>
+      <StepperContainer>
+        <StepperDecreaseButton />
+        <StepperInput />
+        <StepperIncreaseButton />
+      </StepperContainer>
+    </Stepper>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/2_Type.tsx b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/2_Type.tsx
new file mode 100644
index 00000000..325f8915
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/2_Type.tsx
@@ -0,0 +1,23 @@
+import {
+  Stepper,
+  StepperContainer,
+  StepperDecreaseButton,
+  StepperIncreaseButton,
+  StepperInput,
+} from '@devup-ui/components'
+
+/**
+ * **Type**
+ * Use `type="text"` to display the value as read-only text instead of an editable input. Users can only change the value using the increase/decrease buttons.
+ */
+export default function TextType() {
+  return (
+    <Stepper defaultValue={5} type="text">
+      <StepperContainer>
+        <StepperDecreaseButton />
+        <StepperInput />
+        <StepperIncreaseButton />
+      </StepperContainer>
+    </Stepper>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/stepper/demo/3_MinMax.tsx b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/3_MinMax.tsx
new file mode 100644
index 00000000..4be36b10
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/stepper/demo/3_MinMax.tsx
@@ -0,0 +1,23 @@
+import {
+  Stepper,
+  StepperContainer,
+  StepperDecreaseButton,
+  StepperIncreaseButton,
+  StepperInput,
+} from '@devup-ui/components'
+
+/**
+ * **Min & Max**
+ * Use `min` and `max` props to limit the value range. The decrease button is disabled at min value, and the increase button is disabled at max value.
+ */
+export default function MinMax() {
+  return (
+    <Stepper defaultValue={5} max={10} min={0}>
+      <StepperContainer>
+        <StepperDecreaseButton />
+        <StepperInput />
+        <StepperIncreaseButton />
+      </StepperContainer>
+    </Stepper>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/textbox/Api.mdx
index e69de29b..fb136c57 100644
--- a/apps/landing/src/app/(detail)/components/[component]/textbox/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/Api.mdx
@@ -0,0 +1,70 @@
+import { PropsTable } from '@/components/PropsTable'
+
+###### API
+
+`Input` props extends the input HTML attributes (except `type`).
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'type',
+      description: 'The type of the input (excludes file type)',
+      type: "`Exclude<InputType, 'file'>`",
+      default: '`undefined`',
+    },
+    {
+      property: 'typography',
+      description: 'Typography style key from the theme',
+      type: '`keyof DevupThemeTypography`',
+      default: '`undefined`',
+    },
+    {
+      property: 'error',
+      description: 'Whether the input is in an error state',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'errorMessage',
+      description: 'Error message to display below the input',
+      type: '`string`',
+      default: '`undefined`',
+    },
+    {
+      property: 'allowClear',
+      description: 'Whether to show a clear button when input has value',
+      type: '`boolean`',
+      default: '`true`',
+    },
+    {
+      property: 'onClear',
+      description: 'Callback when the clear button is clicked',
+      type: '`() => void`',
+      default: '`undefined`',
+    },
+    {
+      property: 'icon',
+      description: 'Icon to display on the left side of the input',
+      type: '`React.ReactNode`',
+      default: '`undefined`',
+    },
+    {
+      property: 'disabled',
+      description: 'Whether the input is disabled',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'classNames',
+      description: 'Custom class names for inner elements',
+      type: '```{<br>  container?: string<br>  input?: string<br>  icon?: string<br>  errorMessage?: string<br>}```',
+      default: '`undefined`',
+    },
+    {
+      property: 'colors',
+      description: 'Custom color variables for the input',
+      type: '```{<br>  primary?: string<br>  error?: string<br>  text?: string<br>  base?: string<br>  iconBold?: string<br>  border?: string<br>  inputBackground?: string<br>  primaryFocus?: string<br>  negative20?: string<br>}```',
+      default: '`undefined`',
+    },
+  ]}
+/>
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/1_Default.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/1_Default.tsx
new file mode 100644
index 00000000..e2c71cb6
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/1_Default.tsx
@@ -0,0 +1,9 @@
+import { Input } from '@devup-ui/components'
+
+/**
+ * **Default**
+ * Basic text input with placeholder. Includes a clear button that appears when the input has value.
+ */
+export default function Default() {
+  return <Input placeholder="Enter text here" />
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/2_Error.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/2_Error.tsx
new file mode 100644
index 00000000..234dcf8d
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/2_Error.tsx
@@ -0,0 +1,15 @@
+import { Input } from '@devup-ui/components'
+
+/**
+ * **Error**
+ * Use `error` prop to display the input in an error state with a red border. Use `errorMessage` prop to show a validation message below the input.
+ */
+export default function Error() {
+  return (
+    <Input
+      error
+      errorMessage="This field is required"
+      placeholder="Enter text"
+    />
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/3_Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/3_Disabled.tsx
new file mode 100644
index 00000000..3debcb0e
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/3_Disabled.tsx
@@ -0,0 +1,9 @@
+import { Input } from '@devup-ui/components'
+
+/**
+ * **Disabled**
+ * Use `disabled` prop to prevent user interaction. The input will have a muted appearance and the clear button will be hidden.
+ */
+export default function Disabled() {
+  return <Input disabled placeholder="Disabled input" />
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/textbox/demo/4_Icon.tsx b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/4_Icon.tsx
new file mode 100644
index 00000000..9e8997cc
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/textbox/demo/4_Icon.tsx
@@ -0,0 +1,29 @@
+import { Input } from '@devup-ui/components'
+
+function SearchIcon() {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  )
+}
+
+/**
+ * **Icon**
+ * Pass a React node to the `icon` prop to display an icon on the left side of the input. Useful for search fields or inputs with visual context.
+ */
+export default function WithIcon() {
+  return <Input icon={<SearchIcon />} placeholder="Search..." />
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/Api.mdx b/apps/landing/src/app/(detail)/components/[component]/toggle/Api.mdx
index e69de29b..87d813ee 100644
--- a/apps/landing/src/app/(detail)/components/[component]/toggle/Api.mdx
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/Api.mdx
@@ -0,0 +1,70 @@
+import { PropsTable } from '@/components/PropsTable'
+
+###### API
+
+`Toggle` component props.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'value',
+      description: 'The controlled value of the toggle',
+      type: '`boolean | null`',
+      default: '`null`',
+    },
+    {
+      property: 'defaultValue',
+      description: 'The default value of the toggle (uncontrolled)',
+      type: '`boolean | null`',
+      default: '`null`',
+    },
+    {
+      property: 'onChange',
+      description: 'Callback when the toggle value changes',
+      type: '`(value: boolean) => void`',
+      default: '`undefined`',
+    },
+    {
+      property: 'disabled',
+      description: 'Whether the toggle is disabled',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'variant',
+      description: 'The visual variant of the toggle',
+      type: "`'default' | 'switch'`",
+      default: "`'default'`",
+    },
+    {
+      property: 'className',
+      description: 'Additional class name for the toggle container',
+      type: '`string`',
+      default: '`undefined`',
+    },
+    {
+      property: 'style',
+      description: 'Inline styles for the toggle container',
+      type: '`React.CSSProperties`',
+      default: '`undefined`',
+    },
+    {
+      property: 'classNames',
+      description: 'Custom class names for inner elements',
+      type: '```{<br>  toggle?: string<br>}```',
+      default: '`undefined`',
+    },
+    {
+      property: 'styles',
+      description: 'Custom inline styles for inner elements',
+      type: '```{<br>  toggle?: React.CSSProperties<br>}```',
+      default: '`undefined`',
+    },
+    {
+      property: 'colors',
+      description: 'Custom color variables for the toggle',
+      type: '```{<br>  primary?: string<br>  bg?: string<br>  hoverBg?: string<br>  primaryHoverBg?: string<br>  disabledBg?: string<br>  switchHoverOutline?: string<br>  switchShadow?: string<br>}```',
+      default: '`undefined`',
+    },
+  ]}
+/>
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/1_Default.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/1_Default.tsx
new file mode 100644
index 00000000..24328a79
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/1_Default.tsx
@@ -0,0 +1,9 @@
+import { Toggle } from '@devup-ui/components'
+
+/**
+ * **Default**
+ * Basic toggle switch. Click to toggle between on and off states. Use `value` or `defaultValue` to control the toggle state.
+ */
+export default function Default() {
+  return <Toggle />
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/2_Variant.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/2_Variant.tsx
new file mode 100644
index 00000000..fd29a3a2
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/2_Variant.tsx
@@ -0,0 +1,9 @@
+import { Toggle } from '@devup-ui/components'
+
+/**
+ * **Variant**
+ * Use `variant="switch"` for an alternative visual style with a smaller track and a floating knob with hover outline effect.
+ */
+export default function Switch() {
+  return <Toggle variant="switch" />
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/3_Disabled.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/3_Disabled.tsx
new file mode 100644
index 00000000..20147152
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/3_Disabled.tsx
@@ -0,0 +1,15 @@
+import { Toggle } from '@devup-ui/components'
+import { Flex } from '@devup-ui/react'
+
+/**
+ * **Disabled**
+ * Use `disabled` prop to prevent user interaction. The toggle will have a muted appearance and cannot be toggled.
+ */
+export default function Disabled() {
+  return (
+    <Flex gap="16px">
+      <Toggle disabled />
+      <Toggle defaultValue disabled />
+    </Flex>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/[component]/toggle/demo/4_Colors.tsx b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/4_Colors.tsx
new file mode 100644
index 00000000..6596dedf
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/[component]/toggle/demo/4_Colors.tsx
@@ -0,0 +1,16 @@
+import { Toggle } from '@devup-ui/components'
+import { Flex } from '@devup-ui/react'
+
+/**
+ * **Colors**
+ * Pass in an object containing color tokens into `colors` prop. Customize the toggle appearance using `primary`, `bg`, `hoverBg`, `primaryHoverBg`, `disabledBg`, and more.
+ */
+export default function Colors() {
+  return (
+    <Flex gap="16px">
+      <Toggle colors={{ primary: '#10B981' }} defaultValue />
+      <Toggle colors={{ primary: 'orange' }} defaultValue />
+      <Toggle colors={{ primary: 'steelblue' }} defaultValue />
+    </Flex>
+  )
+}