feat(docs): start writing Customization docs section

Author: Norbiros

docs/content/1.getting-started/3.usage.md

@@ -39,14 +39,4 @@ Make sure the schema is available in your component’s setup scope.
 
 ## Customization
 
-Zod v4 introduced support for `meta` data, which allows you to annotate fields:
-
-```ts
-export interface GlobalMeta {
-  title?: string
-  description?: string
-  example?: unknown
-}
-```
-
-`nuxt-auto-form` extends this with its own custom meta fields under `autoForm`. This allows you to define things like UI widgets, visibility conditions, or custom rendering behavior.
+If you want to learn how to customize your forms, check out the [Customization](/customization) section.

docs/content/2.customization/.navigation.yml

@@ -0,0 +1,2 @@
+title: Customization
+icon: i-lucide-sparkles

docs/content/2.customization/1.index.md

@@ -0,0 +1,69 @@
+---
+title: Basics
+description: One of the key features of Nuxt Auto Form is customization, allowing each form to be unique.
+---
+
+There are 3 levels where you can customize a form:
+
+## Global Configuration
+
+Want to change the default submit button or input styles?
+
+In `app.config.ts`, you can define global configuration:
+
+```ts
+export default defineAppConfig({
+  autoForm: {
+    submitButtonComponent: 'SubmitButton',
+  },
+})
+```
+
+## Per-Form Configuration
+
+You can override the [global configuration](#global-configuration) for individual forms using the `ui` prop in the `<AutoForm>` component:
+
+```vue
+<template>
+  <AutoForm
+    :schema="schema"
+    :ui="{
+      submitButtonComponent: 'CustomSubmitButton',
+    }"
+  />
+</template>
+```
+
+The configuration is merged using \[defu].
+
+## Per-Field Configuration
+
+Zod v4 introduced support for `meta` data, allowing you to annotate fields:
+
+```ts
+export interface GlobalMeta {
+  title?: string
+  description?: string
+  example?: unknown
+}
+```
+
+`nuxt-auto-form` extends this with a custom `autoForm` field inside `meta`. This lets you define UI widgets, visibility conditions, or custom rendering behavior.
+
+Example:
+
+```ts
+const schema = z.object({
+  text: z.string()
+    .nonempty()
+    .meta({ title: 'Text Input' }),
+  bool: z.boolean()
+    .default(true)
+    .meta({
+      title: 'Boolean Input with floatRight',
+      autoForm: { floatRight: true },
+    })
+})
+```
+
+This configuration is fully type-safe.