20260720172840

2026-07-20 17:28:47 +08:00
1 parent cda7f16d3a
commit 94207c77ff
@@ -0,0 +1,12 @@
+---
+title: Common Props
+---
+
+> Tips: The following generic properties apply to most antdv-next components; those not supported are described separately.
+
+| Property      | Description | Type | Default |
+|---------------| --- | --- | --- |
+| style         | The additional style | CSSProperties | - |
+| class         | The additional css class | string | - |
+| rootClass | ClassName on the root element | string | - |
+| autoFocus     | Auto focus when component mounted, only effective for focusable elements like forms, links, etc. | boolean | false |
@@ -0,0 +1,362 @@
+---
+title: CSS Compatible
+---
+
+## Default Style Compatibility
+
+Antdv Next supports the [last 2 versions of modern browsers](https://browsersl.ist/#q=defaults). By default, we use some modern CSS features to improve style maintainability and extensibility. These features may not be supported in older browsers, but we can solve this through some compatibility solutions.
+
+| Feature | antdv-next version | Compatibility | Minimum Chrome Version | Compatibility workaround |
+| --- |-------------------| --- | --- | --- |
+| [:where Selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) | `>=1.0.0`         | [caniuse](https://caniuse.com/?search=%3Awhere) | Chrome 88 | `<StyleProvider hashPriority="high">` |
+| [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) | `>=1.0.0`         | [caniuse](https://caniuse.com/css-logical-props) | Chrome 89 | `<StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>` |
+
+If you need to support older browsers, please use `@antdv-next/cssinjs` [StyleProvider](https://github.com/ant-design/cssinjs#styleprovider) for degradation handling according to your actual requirements.
+
+## `:where` Selector
+
+- Support Version: `>=1.0.0`
+- MDN: [:where](https://developer.mozilla.org/en-US/docs/Web/CSS/:where)
+- Browser Compatibility: [caniuse](https://caniuse.com/?search=%3Awhere)
+- Minimum Chrome Version Supported: 88
+- Default Enabled: Yes
+
+The CSS-in-JS feature of Antdv Next uses the ":where" selector by default to lower the CSS selector specificity, reducing the additional cost of adjusting custom styles when upgrading for users. However, the compatibility of the ":where" syntax is relatively poor in older browsers ([compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)). In certain scenarios, if you need to support older browsers, you can use `@antdv-next/cssinjs` to disable the default lowering of specificity (please ensure version consistency with antd).
+
+```vue
+<template>
+  <!-- `hashPriority` defaults to `low`, when set to `high`, -->
+  <!-- it will remove the `:where` selector wrapper -->
+  <a-style-provider hash-priority="high">
+    <MyApp />
+  </a-style-provider>
+</template>
+```
+
+It will turn `:where` to class selector:
+
+```diff
+--  :where(.css-bAMboO).ant-btn {
++  .css-bAMboO.ant-btn {
+      color: #fff;
+    }
+```
+
+Note: After turning off the `:where` downgrade, you may need to manually adjust the priority of some styles. Or you can **use PostCSS plugin** to raise application css selector priority. PostCSS provides many plugins can help on this. e.g:
+
+- [postcss-scopify](https://www.npmjs.com/package/postcss-scopify)
+- [postcss-increase-specificity](https://www.npmjs.com/package/postcss-increase-specificity)
+- [postcss-add-root-selector](https://www.npmjs.com/package/postcss-add-root-selector)
+
+Raise priority through plugin:
+
+```diff
+--  .my-btn {
++  #root .my-btn {
+      background: red;
+    }
+```
+
+## CSS Logical Properties
+
+- Support Version: `>=1.0.0`
+- MDN: [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
+- Browser Compatibility: [caniuse](https://caniuse.com/css-logical-props)
+- Minimum Chrome Version Supported: 89
+- Default Enabled: Yes
+
+To unify LTR and RTL styles, Antdv Next uses CSS logical properties. For example, the original `margin-left` is replaced by `margin-inline-start`, so that it is the starting position spacing under both LTR and RTL. If you need to be compatible with older browsers (such as 360 Browser, QQ Browser, etc.), you can configure `transformers` through the `StyleProvider` of `@antdv-next/cssinjs`:
+
+```vue
+<script lang="ts" setup>
+import { legacyLogicalPropertiesTransformer } from '@antdv-next/cssinjs'
+</script>
+
+<template>
+  <!-- `transformers` provides preprocessing to transform styles -->
+  <a-style-provider :transformers="[legacyLogicalPropertiesTransformer]">
+    <MyApp />
+  </a-style-provider>
+</template>
+```
+
+When toggled, styles will downgrade CSS logical properties:
+
+```diff
+.ant-modal-root {
+-- inset: 0;
++ top: 0;
++ right: 0;
++ bottom: 0;
++ left: 0;
+}
+```
+
+## `@layer` Specificity Lowering
+
+- Support Version: `>=1.0.0`
+- MDN: [@layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer)
+- Browser Compatibility: [caniuse](https://caniuse.com/?search=%40layer)
+- Minimum Chrome Version Supported: 99
+- Default Enabled: No
+
+Antdv Next supports configuring `@layer` for unified specificity lowering since `1.0.0`. After the downgrade, the style of antd will always be lower than the default CSS selector priority, so that users can override the style (please be sure to check the browser compatibility of `@layer`). When enable `layer`, the child element **must** wrap ConfigProvider to update the icon-related styles:
+
+```vue
+<template>
+  <a-style-provider layer>
+    <a-config-provider>
+      <MyApp />
+    </a-config-provider>
+  </a-style-provider>
+</template>
+```
+
+antd styles will be encapsulated in `@layer` to lower the priority:
+
+```diff
++  @layer antd {
+      :where(.css-bAMboO).ant-btn {
+        color: #fff;
+      }
++  }
+```
+
+⚠️ zeroRuntime Scenario Notes
+
+When `zeroRuntime` is enabled, Antdv Next’s styles are precompiled into a standalone `antd.css` file. If you also enable the `@layer` specificity–lowering mechanism, you must ensure that `antd.css` is placed inside the same layer (e.g., `layer(antd)`). Otherwise, its specificity will be higher than the styles injected by StyleProvider, causing the lowering mechanism to fail or resulting in unexpected override behavior.
+
+```css
+/* global.css / app.css */
+@layer theme, base, antd, components, utilities;
+
+/* The precompiled antd.css output by zeroRuntime must explicitly specify a layer */
+@import url(antd.css) layer(antd);
+```
+
+If you cannot use the `@import ... layer()` syntax, you may wrap the content during your build process instead:
+
+```css
+@layer antd {
+  /* contents of antd.css */
+}
+```
+
+## autoPrefixer
+
+- Support Version: `>=1.0.0`
+- Browser Compatibility: Automatically adds browser prefixes for wider browser support
+- Default Enabled: No
+
+Some styles rely on browser prefixes for compatibility. The `autoPrefixer` transformer can automatically add browser prefixes to styles, ensuring they work properly across different browsers.
+
+```vue
+<script lang="ts" setup>
+import { autoPrefixTransformer } from '@antdv-next/cssinjs'
+</script>
+
+<template>
+  <a-style-provider :transformers="[autoPrefixTransformer]">
+    <MyApp />
+  </a-style-provider>
+</template>
+```
+
+The final transformed styles:
+
+```diff
+  .sample-box {
+--  user-select: none;
++  -webkit-user-select: none;
++  -moz-user-select: none;
++  -ms-user-select: none;
++  user-select: none;
+  }
+```
+
+## Rem Adaptation
+
+In responsive web development, there is a need for a convenient and flexible way to achieve page adaptation and responsive design. The `px2remTransformer` transformer can quickly and accurately convert pixel units in style sheets to rem units relative to the root element (HTML tag), enabling the implementation of adaptive and responsive layouts.
+
+```vue
+<script lang="ts" setup>
+import { px2remTransformer } from '@antdv-next/cssinjs'
+
+const px2rem = px2remTransformer({
+  rootValue: 32, // 32px = 1rem; @default 16
+})
+</script>
+
+<template>
+  <a-style-provider :transformers="[px2rem]">
+    <MyApp />
+  </a-style-provider>
+</template>
+```
+
+The resulting transformed styles:
+
+```diff
+ .px2rem-box {
+-  width: 400px;
+  width: 12.5rem;
+   background-color: green;
+-  font-size: 32px;
+  font-size: 1rem;
+   border: 10PX solid #f0f;
+ }
+
+ @media only screen and (max-width: 600px) {
+   .px2rem-box {
+     background-color: red;
+-    margin: 10px;
+    margin: 0.3125rem;
+   }
+ }
+```
+
+### Options
+
+<!-- prettier-ignore -->
+| Parameter | Description  | Type | Default |
+| --- | --- | --- | --- |
+| rootValue | Font size of the root element | `number` | 16 |
+| precision | Decimal places for the converted value | `number` | 5 |
+| mediaQuery | Whether to convert px in media queries | `boolean` | false |
+
+For more details, please refer to: [px2rem.ts#Options](https://github.com/ant-design/cssinjs/blob/master/src/transformers/px2rem.ts)
+
+## Shadow DOM Usage
+
+Since `<style />` tag insertion is different from normal DOM in Shadow DOM scenario, you need to use `StyleProvider` of `@antdv-next/cssinjs` to configure the `container` property to set the insertion position:
+
+```tsx
+import { StyleProvider } from '@antdv-next/cssinjs'
+import { render } from 'vue'
+
+const shadowRoot = someEle.attachShadow({ mode: 'open' })
+const container = document.createElement('div')
+shadowRoot.appendChild(container)
+
+render(
+  <StyleProvider container={shadowRoot}>
+    <MyApp />
+  </StyleProvider>,
+  container
+)
+```
+
+## Compatible with Third-party Style Libraries
+
+In some cases, you may need antd to coexist with other style libraries, such as `Tailwind CSS`, `Emotion`, `styled-components`, etc. Unlike traditional CSS solutions, these third-party libraries are often not easy to override antd styles by increasing CSS selector priority. You can configure `@layer` for antd to lower its CSS selector weight, and arrange `@layer` order to solve style override problems:
+
+### antd config `@layer`
+
+As mentioned earlier, when using StyleProvider, you must wrap ConfigProvider to update icon-related styles:
+
+```vue
+<template>
+  <a-style-provider layer>
+    <a-config-provider>
+      <MyApp />
+    </a-config-provider>
+  </a-style-provider>
+</template>
+```
+
+### TailwindCSS Arrange `@layer`
+
+Before starting the following configuration, you need to enable [`@layer`](#layer) feature.
+
+#### TailwindCSS v3
+
+In global.css, adjust `@layer` to control the order of style override. Place `tailwind-base` before `antd`:
+
+```less
+@layer tailwind-base, antd;
+
+@layer tailwind-base {
+  @tailwind base;
+}
+@tailwind components;
+@tailwind utilities;
+```
+
+#### TailwindCSS v4
+
+In global.css, adjust `@layer` to control the order of style override. Place `antd` in the right position:
+
+```less
+@layer theme, base, antd, components, utilities;
+
+@import 'tailwindcss';
+```
+
+### reset.css and antd.css
+
+If you are using Antdv Next’s `reset.css`, you need to assign it to a specific `@layer` to prevent it from overriding the lowered-specificity antd styles. Similarly, in the `zeroRuntime` scenario, if you import `antd.css` separately, you must also place it inside `layer(antd)` to keep the layer hierarchy consistent:
+
+```css
+/* Both reset.css and antd.css must specify a layer */
+@layer reset, antd;
+
+/* reset styles */
+@import url(reset.css) layer(reset);
+
+/* antd styles */
+@import url(antd.css) layer(antd);
+```
+
+This ensures that:
+
+- reset.css will not override Antdv Next styles that have been lowered via @layer
+- antd.css (in zeroRuntime mode) stays aligned with the layer injected by StyleProvider
+- Layer order still works correctly with third-party styling systems such as Tailwind, Emotion, or other CSS-in-JS libraries
+
+### With other CSS-in-JS libraries
+
+After configuring `@layer` for antd, you don't need to do any additional configuration for other CSS-in-JS libraries. Your CSS-in-JS can completely override antd styles.
+
+### SSR Scene
+
+When using SSR, styles are often rendered inline in HTML through `<style />`. At this time, please make sure that the styles with the specified `@layer` priority order are loaded before `@layer` is used.
+
+#### ❌ Wrong
+
+```html
+<head>
+  <!-- SSR Injection style -->
+  <style>
+    @layer antd {
+      /** ... */
+    }
+  </style>
+
+  <!-- css file contains @layer xxx, antd; -->
+  <link rel="stylesheet" href="/b9a0m0b9o0o3.css" />
+  <!-- or write @layer xxx, antd; in html directly -->
+  <style>
+    @layer xxx, antd;
+  </style>
+</head>
+```
+
+#### ✅ Correct
+
+```html
+<head>
+  <!-- css file contains @layer xxx, antd; -->
+  <link rel="stylesheet" href="/b9a0m0b9o0o3.css" />
+  <!-- or write @layer xxx, antd; in html directly -->
+  <style>
+    @layer xxx, antd;
+  </style>
+
+  <!-- SSR Injection style -->
+  <style>
+    @layer antd {
+      /** ... */
+    }
+  </style>
+</head>
+```
@@ -0,0 +1,418 @@
+---
+title: Customize Theme
+---
+
+We provide a new way to customize themes. With CSS-in-JS, the ability of theming has also been enhanced, including but not limited to:
+
+1. Switching theme dynamically;
+2. Multiple themes;
+3. Customizing theme variables for some components;
+4. ...
+
+## Configure Theme
+
+:::warning
+`ConfigProvider` will not take effect on static methods such as `message.xxx`, `Modal.xxx`, `notification.xxx`, because in these methods, antdv-next will dynamically create new Vue entities through `render`. Its context is not the same as the context of the current code, so context information cannot be obtained.
+
+When you need context information (such as the content configured by ConfigProvider), you can use the `Modal.useModal` method to return the modal entity and the contextHolder node. Just insert it where you need to get the context, or you can use [App Component](../../components/app/docs.md) to simplify the problem of using Modal and other methods that need to manually implant the contextHolder.
+:::
+
+<template>
+  <a-config-provider
+    :theme="{
+      token: {
+        colorPrimary: '#00b96b',
+        borderRadius: 2,
+        colorBgContainer: '#f6ffed',
+      },
+    }"
+  >
+    <a-space>
+      <a-button type="primary">Primary</a-button>
+      <a-button>Default</a-button>
+    </a-space>
+  </a-config-provider>
+</template>
+```
+
+### Use Preset Algorithms
+
+Themes with different styles can be quickly generated by modifying `algorithm`. We provide three sets of preset algorithms by default:
+
+- default algorithm `theme.defaultAlgorithm`
+- dark algorithm `theme.darkAlgorithm`
+- compact algorithm `theme.compactAlgorithm`
+
+You can switch algorithms by modifying the `algorithm` property of `theme` in ConfigProvider, and multiple algorithms can be configured to take effect in sequence.
+
+```stackblitz {title="Use Preset Algorithms"}
+<template>
+  <a-config-provider
+    :theme="{
+      algorithm: theme.darkAlgorithm,
+      // Or combine algorithms:
+      // algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
+    }"
+  >
+    <a-space>
+      <a-input placeholder="Please Input" />
+      <a-button type="primary">Submit</a-button>
+    </a-space>
+  </a-config-provider>
+</template>
+
+<script setup lang="ts">
+import { theme } from 'antdv-next'
+</script>
+```
+
+### Customize Component Token
+
+:::info Algorithm of Component Token
+By default, all component tokens can only override global token and will not be derived based on Seed Token.
+
+In version `>= 1.0.0`, component tokens support the `algorithm` property, which can be used to enable algorithm or pass in other algorithms.
+:::
+
+```stackblitz {title="Customize Component Token"}
+<template>
+  <a-config-provider
+    :theme="{
+      components: {
+        Button: {
+          colorPrimary: '#00b96b',
+          algorithm: true,
+        },
+        Input: {
+          colorPrimary: '#eb2f96',
+          algorithm: true,
+        },
+      },
+    }"
+  >
+    <a-space>
+      <div style="font-size: 14px">Enable algorithm: </div>
+      <a-input placeholder="Please Input" />
+      <a-button type="primary">Submit</a-button>
+    </a-space>
+  </a-config-provider>
+
+  <a-divider />
+
+  <a-config-provider
+    :theme="{
+      components: {
+        Button: {
+          colorPrimary: '#00b96b',
+        },
+        Input: {
+          colorPrimary: '#eb2f96',
+        },
+      },
+    }"
+  >
+    <a-space>
+      <div style="font-size: 14px">Disable algorithm: </div>
+      <a-input placeholder="Please Input" />
+      <a-button type="primary">Submit</a-button>
+    </a-space>
+  </a-config-provider>
+</template>
+```
+
+### Disable Motion
+
+antdv-next has built-in interaction animations to make enterprise-level pages more detailed. In some extreme scenarios, it may affect the performance of page interaction. If you need to turn off the animation, try setting `motion` of `token` to `false`:
+
+```stackblitz {title="Disable Motion"}
+<template>
+  <a-row :gutter="[24, 24]">
+    <a-col :span="24">
+      <a-flex gap="small">
+        <a-checkbox :checked="checked">Checkbox</a-checkbox>
+        <a-radio :checked="checked">Radio</a-radio>
+        <a-switch :checked="checked" />
+      </a-flex>
+    </a-col>
+
+    <a-col :span="24">
+      <a-config-provider :theme="{ token: { motion: false } }">
+        <a-flex gap="small">
+          <a-checkbox :checked="checked">Checkbox</a-checkbox>
+          <a-radio :checked="checked">Radio</a-radio>
+          <a-switch :checked="checked" />
+        </a-flex>
+      </a-config-provider>
+    </a-col>
+  </a-row>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, ref } from 'vue'
+
+const checked = ref(false)
+
+let timer: ReturnType<typeof setInterval> | undefined
+
+onMounted(() => {
+  timer = setInterval(() => {
+    checked.value = !checked.value
+  }, 500)
+})
+
+onBeforeUnmount(() => {
+  if (timer) clearInterval(timer)
+})
+</script>
+```
+
+## Advanced
+
+### Zero Runtime 
+We provide `zeroRuntime` mode to further improve application performance. When enabled, Antdv Next will no longer generate component styles at runtime, so you need to manually import the style files.
+
+:::warning Notice
+This configuration is static and cannot be dynamically configured through `ConfigProvider`!
+:::
+
+Import the style file in `main.ts`:
+
+```ts
+import 'antdv-next/dist/antd.css'
+```
+
+Configure the theme in `App.vue`:
+```vue
+<template>
+  <a-config-provider :theme="{ zeroRuntime: true }">
+    <MyApp />
+  </a-config-provider>
+</template>
+```
+
+`antdv-next/dist/antd.css` contains all antdv-next component styles, but does not include hashed className.
+
+### Switch Themes Dynamically
+
+Dynamically switching themes is very simple for users. You can dynamically switch themes at any time through the `theme` property of `ConfigProvider` without any additional configuration.
+
+```stackblitz {title="Switch Themes Dynamically"}
+<template>
+  <a-color-picker
+    show-text
+    v-model:value="primary"
+  />
+  <a-divider />
+  <a-config-provider
+    :theme="{
+      token: {
+        colorPrimary: typeof primary === 'string' ? primary : primary?.toHexString()
+      },
+    }"
+  >
+    <a-space>
+      <a-input placeholder="Please Input" />
+      <a-button type="primary">Submit</a-button>
+    </a-space>
+  </a-config-provider>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const primary = ref('#1677ff')
+</script>
+```
+
+### Nested Theme
+
+```stackblitz {title="Nested Theme"}
+<template>
+  <a-config-provider
+    :theme="{
+      token: {
+        colorPrimary: '#1677ff',
+      },
+    }"
+  >
+    <a-space>
+      <a-button type="primary">Theme 1</a-button>
+
+      <a-config-provider
+        :theme="{
+          token: {
+            colorPrimary: '#00b96b',
+          },
+        }"
+      >
+        <a-button type="primary">Theme 2</a-button>
+      </a-config-provider>
+    </a-space>
+  </a-config-provider>
+</template>
+
+```
+
+<template>
+  <div
+    :style="{
+      backgroundColor: token.colorPrimaryBg,
+      padding: token.padding + 'px',
+      borderRadius: token.borderRadius + 'px',
+      color: token.colorPrimaryText,
+      fontSize: token.fontSize + 'px',
+    }"
+  >
+  </div>
+</template>
+
+<script setup lang="ts">
+import { theme } from 'antdv-next' // or ant-design-vue
+
+const { useToken } = theme
+const { token } = useToken()
+</script>
+```
+
+### Static Consume (e.g. Atomic CSS)
+
+#### Installation
+
+```shell
+npm install -D @antdv-next/unocss
+
+# or
+pnpm add -D @antdv-next/unocss
+
+```
+
+#### Configuration
+
+Import the plugin in `uno.config.ts`:
+```ts
+import { presetAntd } from '@antdv-next/unocss'
+
+export default defineConfig({
+  presets: [
+    presetAntd(),
+  ]
+})
+```
+
+#### Usage
+
+Please install the `unocss` extension in `vscode` or `webstorm` for better hints.
+
+By default, we have added some configurations on top of `unocss`. If you want to distinguish between `unocss` and `antdv-next` tokens, you can use the `a-` prefix for class names:
+
+```vue
+<template>
+  <div class="a-c-primary">
+  </div>
+  <div class="c-primary">
+  </div>
+</template>
+```
+
+We support both usages. Since we provide completion in the plugin, we won't go into details here.
+
+![token](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*uF3kTrY4InUAAAAAAAAAAAAAARQnAQ)
+
+### Seed Token
+
+Seed Token means the origin of all design intent. For example, we can change the theme color by changing `colorPrimary`, and the algorithm inside antd will automatically calculate and apply a series of corresponding colors according to the Seed Token:
+
+```tsx
+const theme = {
+  token: {
+    colorPrimary: '#1890ff',
+  },
+}
+```
+
+### Map Token
+
+Map Token is a gradient variable derived from Seed. It is recommended to implement custom Map Token through `theme.algorithm`, which can ensure the gradient relationship between Map Tokens. It can also be overridden by `theme.token` to modify the value of some map tokens individually.
+
+```tsx
+const theme = {
+  token: {
+    colorPrimaryBg: '#e6f7ff',
+  },
+}
+```
+
+### Alias Token
+
+Alias Token is used to control the style of some common components in batches, which is basically a Map Token alias, or a specially processed Map Token.
+
+```tsx
+const theme = {
+  token: {
+    colorLink: '#1890ff',
+  },
+}
+```
+
+### Algorithm
+
+The basic algorithm is used to expand the Seed Token into a Map Token, such as calculating a gradient color palette from a basic color, or calculating rounded corners of various sizes from a basic rounded corner. Algorithms can be used alone or in any combination, for example, dark and compact algorithms can be combined to get a dark and compact theme.
+
+```tsx
+import { theme } from 'antdv-next'
+
+const { darkAlgorithm, compactAlgorithm } = theme
+
+const theme = {
+  algorithm: [darkAlgorithm, compactAlgorithm],
+}
+```
+
+## API
+
+### Theme
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- |----|
+| inherit | Inherit theme configured in upper ConfigProvider | boolean | true |    |
+| algorithm | Modify the algorithms of theme | `(token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]` | `defaultAlgorithm` |    |
+| components | Modify Component Token and Alias Token applied to components | `ComponentsConfig` | - |    |
+| cssVar | CSS Variables Configuration | [cssVar](#css-var) | - |    |
+| hashed | Style patch on the hash className | boolean | true |    |
+| zeroRuntime | Enable zero-runtime mode, which will not generate style at runtime, need to import additional CSS file | boolean | true | -  |
+
+### ComponentsConfig
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `Component` (Can be any antd Component name like `Button`) | Modify Component Token or override Component used Alias Token | `ComponentToken & AliasToken & { algorithm: boolean \| (token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]}` | - |
+
+> `algorithm` of component is `false` by default, which means tokens of component will only override global token. When it is set with `true`, the algorithm will be the same as global. You can also pass algorithm or Array of algorithm, and it will override algorithm of global.
+
+### cssVar 
+| Property | Description | Type | Default              | Version |
+| --- | --- | --- |----------------------| --- |
+| prefix | Prefix of CSS variables, same as `prefixCls` configured on ConfigProvider by default | string | `ant`                |  |
+| key | Unique key for current theme, filled with `useId` by default | string | `useId` in Vue 3 |  |
+
+### SeedToken
+
+<TokenTable type="seed"></TokenTable>
+
+### MapToken
+
+> Inherit all SeedToken properties
+
+<TokenTable type="map"></TokenTable>
+
+### AliasToken
+
+> Inherit all SeedToken and MapToken properties
+
+<TokenTable type="alias"></TokenTable>
+
+## FAQ
+
+### Why component re-mounted when `theme` changed from `undefined` to some object or to `undefined`?
+
+In ConfigProvider, we pass context through `DesignTokenContext`. When `theme` is `undefined`, a layer of Provider will not be set, so Vue VirtualDOM structure changes from scratch or from existence to nothing, causing components to be re-mounted. Solution: Replace `undefined` with an empty object `{}`.
@@ -0,0 +1,27 @@
+---
+title: FAQ
+---
+
+## Components are not vertically aligned when placed in single row.
+
+Try [Space](https://ant.design../../components/space/docs.md/) component to make them aligned.
+
+## Date-related components locale is not working?
+
+Please check whether you have imported dayjs locale correctly.
+
+```jsx
+import dayjs from 'dayjs';
+
+import 'dayjs/locale/zh-cn';
+
+dayjs.locale('zh-cn');
+```
+
+Please check whether there are two versions of dayjs installed.
+
+```jsx
+npm ls dayjs
+```
+
+If you are using a mismatched version of dayjs with antdv-next dependent dayjs in your project. That would be a problem cause locale not working.
@@ -0,0 +1,80 @@
+---
+title: Getting Started
+---
+
+Antdv Next is dedicated to providing a **good development experience** for programmers.
+
+> Before starting, it is recommended to learn [Vue](https://vuejs.dev) first, and correctly install and configure [Node.js](https://nodejs.org/) v20 or above. The official guide assumes that you have intermediate knowledge about HTML, CSS, and JavaScript, and have fully mastered the correct development approach with the Vue ecosystem. If you are just starting to learn front-end or Vue, it may not be the best idea to use the UI framework as your first step.
+
+---
+
+## Your First Example
+
+Here is a simple online stackblitz demo of an Antdv Next component to show the usage of Antdv Next.
+
+<iframe src="https://stackblitz.com/edit/vitejs-vite-stk21cho?embed=1&file=src%2FApp.vue&hideExplorer=1&hideNavigation=1" width="100%" height="500px" frameborder="0"></iframe>
+
+### 1. Create a stackblitz
+
+Visit [Antdv Next Start Template](https://stackblitz.com/edit/vitejs-vite-stk21cho?file=src%2FApp.vue) to create an online stackblitz example -- don't forget to save to create a new instance.
+
+### 2. Use a Component
+
+Replace the contents of `App.vue` with the following code. As you can see, you can directly use `antdv-next` components with the SFC approach.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref()
+</script>
+
+<template>
+  <a-date-picker v-model:value="value" need-confirm />
+</template>
+```
+
+### 3. Explore More Components
+
+You can view the list of components in the side menu of the Components page, such as the [Alert](../../components/alert/docs.md) component. Plenty of examples are also provided in the component pages and API documentation at the bottom.
+
+Find the first example in the code demo section and click the icon in the bottom right corner to expand the code. You can copy the code directly to your stackblitz to try and adjust it yourself.
+
+## Import on Demand
+
+### Tree Shaking Import
+
+`antdv-next` supports tree shaking of ES modules by default, so using `import { Button } from 'antdv-next';` would drop js code you didn't use.
+
+### Auto Import with `unplugin-vue-components`
+
+You can use [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) to achieve automatic on-demand import.
+
+We provide a library adapter `@antdv-next/auto-import-resolver`.
+
+#### Installation
+
+<InstallDependencies
+  npm='$ npm i @antdv-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D'
+  yarn='$ yarn add @antdv-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D'
+  pnpm='$ pnpm add @antdv-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D'
+  bun='$ bun add @antdv-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D'
+/>
+
+#### Usage
+
+> This section only introduces usage with Vite. For more details, please refer to [@antdv-next/auto-import-resolver](https://www.npmjs.com/package/@antdv-next/auto-import-resolver).
+
+```ts
+import { AntdvNextResolver } from '@antdv-next/auto-import-resolver'
+// vite.config.ts
+import Components from 'unplugin-vue-components/vite'
+
+export default defineConfig({
+  plugins: [
+    Components({
+      resolvers: [AntdvNextResolver()],
+    }),
+  ],
+})
+```
@@ -0,0 +1,104 @@
+---
+title: Internationalization
+---
+
+The default language of `antdv-next` is currently English. If you wish to use other languages, follow the instructions below.
+
+## ConfigProvider
+
+`antdv-next` provides a Vue Component [ConfigProvider](../../components/config-provider/docs.md) for configuring antd locale text globally.
+
+```vue
+<script lang="ts" setup>
+import frFR from 'antdv-next/locale/fr_FR'
+</script>
+
+<template>
+  <a-config-provider :locale="frFR">
+    <App />
+  </a-config-provider>
+</template>
+```
+
+You can see the complete configuration here: [ConfigProvider](../../components/config-provider/docs.md).
+
+Note: `fr_FR` is the filename, the following table also follows the same rules.
+
+The following languages are currently supported:
+
+### Supported languages:
+
+| Language                 | Filename |
+| ------------------------ | -------- |
+| Arabic                   | ar_EG    |
+| Azerbaijani              | az_AZ    |
+| Bulgarian                | bg_BG    |
+| Bangla (Bangladesh)      | bn_BD    |
+| Belarusian               | by_BY    |
+| Catalan                  | ca_ES    |
+| Czech                    | cs_CZ    |
+| Danish                   | da_DK    |
+| German                   | de_DE    |
+| Greek                    | el_GR    |
+| English (United Kingdom) | en_GB    |
+| English                  | en_US    |
+| Spanish                  | es_ES    |
+| Basque                   | eu_ES    |
+| Estonian                 | et_EE    |
+| Persian                  | fa_IR    |
+| Finnish                  | fi_FI    |
+| French (Belgium)         | fr_BE    |
+| French (Canada)          | fr_CA    |
+| French (France)          | fr_FR    |
+| Irish (Ireland)          | ga_IE    |
+| Galician (Spain)         | gl_ES    |
+| Hebrew                   | he_IL    |
+| Hindi                    | hi_IN    |
+| Croatian                 | hr_HR    |
+| Hungarian                | hu_HU    |
+| Armenian                 | hy_AM    |
+| Indonesian               | id_ID    |
+| Italian                  | it_IT    |
+| Icelandic                | is_IS    |
+| Japanese                 | ja_JP    |
+| Georgian                 | ka_GE    |
+| Kurdish (Kurmanji)       | kmr_IQ   |
+| Kannada                  | kn_IN    |
+| Kazakh                   | kk_KZ    |
+| Khmer                    | km_KH    |
+| Korean                   | ko_KR    |
+| Lithuanian               | lt_LT    |
+| Latvian                  | lv_LV    |
+| Macedonian               | mk_MK    |
+| Malayalam (India)        | ml_IN    |
+| Marathi (India)          | mr_IN    |
+| Mongolian                | mn_MN    |
+| Malay (Malaysia)         | ms_MY    |
+| Burmese                  | my_MM    |
+| Norwegian                | nb_NO    |
+| Nepali                   | ne_NP    |
+| Dutch (Belgium)          | nl_BE    |
+| Dutch                    | nl_NL    |
+| Polish                   | pl_PL    |
+| Portuguese (Brazil)      | pt_BR    |
+| Portuguese               | pt_PT    |
+| Romanian                 | ro_RO    |
+| Russian                  | ru_RU    |
+| Sinhalese / Sinhala      | si_LK    |
+| Slovak                   | sk_SK    |
+| Serbian                  | sr_RS    |
+| Slovenian                | sl_SI    |
+| Swedish                  | sv_SE    |
+| Tamil                    | ta_IN    |
+| Thai                     | th_TH    |
+| Turkish                  | tr_TR    |
+| Turkmen                  | tk_TK    |
+| Urdu (Pakistan)          | ur_PK    |
+| Ukrainian                | uk_UA    |
+| Uzbek(latn)              | uz_UZ    |
+| Vietnamese               | vi_VN    |
+| Chinese (Simplified)     | zh_CN    |
+| Chinese (Traditional)    | zh_HK    |
+| Chinese (Traditional)    | zh_TW    |
+
+See more usage at [ConfigProvider](../../components/config-provider/docs.md).
@@ -0,0 +1,388 @@
+---
+title: Migrating from Ant Design Vue to Antdv Next
+---
+
+This document will help you migrate from `ant-design-vue` to `antdv-next`.
+
+`antdv-next` originally implemented some compatibility measures for `ant-design-vue`, but there are still some `API` incompatibilities that cannot be directly adapted. Before upgrading, you need to ensure that your environment meets the new requirements.
+
+## Upgrade Preparation
+
+1. Please upgrade to the latest version of `ant-design-vue@4` to ensure you are using the latest antdv `API`.
+2. It is recommended to upgrade Vue 3 to version `3.5.x`.
+
+```shell
+pnpm add antdv-next
+
+# or
+npm install antdv-next
+
+# or
+yarn add antdv-next
+```
+
+## What are the Incompatible Changes
+
+### Replacing @ant-design/icons-vue
+
+-  ⚠️ **Important:** `@ant-design/icons-vue` is not adapted for `antdv-next`, which may cause theme switching and `layer` mode to not work properly. Please ensure you install and use `@antdv-next/icons`.
+
+```shell
+pnpm add @antdv-next/icons
+# or
+npm install @antdv-next/icons
+# or
+yarn add @antdv-next/icons
+```
+
+### DOM Structure Adjustments
+
+- antdv-next has upgraded and optimized the DOM structure of many components to improve maintainability and consistency.
+- For most projects that normally use `ant-design-vue` styles, this will not have a significant impact.
+- ⚠️ If your project has custom styles targeting internal DOM nodes of components (such as relying on specific selectors or hierarchical structures), you may need to manually check and adjust styles after upgrading.
+
+### API Adjustments
+
+⚠️ The following APIs have been marked as **Deprecated**. Although these properties can still be used currently, the console will show deprecation warnings, and they will be removed in 2.0. To maintain code maintainability and compatibility, **it is recommended to migrate to the corresponding replacement properties as soon as possible**.
+
+- `Alert`
+    - `closeText` deprecated, changed to `closable.closeIcon`.
+    - `message` deprecated, changed to `title`.
+
+- `Anchor`
+    - `Anchor children` deprecated, changed to `items`.
+
+- `AutoComplete`
+    - `dropdownMatchSelectWidth` deprecated, changed to `popupMatchSelectWidth`.
+    - `dropdownStyle` deprecated, changed to `styles.popup.root`.
+    - `dropdownClassName` deprecated, changed to `classes.popup.root`.
+    - `popupClassName` deprecated, changed to `classes.popup.root`.
+    - `dropdownRender` deprecated, changed to `popupRender`.
+    - `onDropdownVisibleChange` deprecated, changed to `onOpenChange`.
+    - `dataSource` deprecated, changed to `options`.
+
+- `Avatar.Group`
+    - `maxCount` deprecated, changed to `:max="{count: number}"`.
+    - `maxStyle` deprecated, changed to `:max="{style: CSSProperties}"`.
+    - `maxPopoverPlacement` deprecated, changed to `:max="{popover: PopoverProps}"`.
+    - `maxPopoverTrigger` deprecated, changed to `:max="{popover: PopoverProps}"`.
+
+- `BackTop`
+    - `FloatButton.BackTop` deprecated, changed to `FloatButton.BackTop`.
+
+- `Breadcrumb`
+    - `routes` deprecated, changed to `items`.
+    - `routes.children` deprecated, changed to `items.menu`.
+    - `itemRender="props"` deprecated, changed to `itemRender="item"`.
+    - `Breadcrumb.Item` and `Breadcrumb.Separator` deprecated, changed to `items`.
+
+- `Button.Group`
+    - `BackTop` deprecated, changed to `FloatButton.BackTop`.
+
+- `Button`
+    - `iconPosition` deprecated, changed to `iconPlacement`.
+
+- `Calendar`
+    - `dateFullCellRender` deprecated, changed to `fullCellRender`.
+    - `dateCellRender` deprecated, changed to `cellRender`.
+    - `monthFullCellRender` deprecated, changed to `fullCellRender`.
+    - `monthCellRender` deprecated, changed to `cellRender`.
+
+- `Card`
+    - `headStyle` deprecated, changed to `styles.header`.
+    - `bodyStyle` deprecated, changed to `styles.body`.
+    - `bordered` deprecated, changed to `variant`.
+
+- `Carousel`
+    - `dotPosition` deprecated, changed to `dotPlacement`.
+
+- `Cascader`
+    - `dropdownClassName` deprecated, changed to `classes.popup.root`.
+    - `dropdownStyle` deprecated, changed to `styles.popup.root`.
+    - `dropdownRender` deprecated, changed to `popupRender`.
+    - `dropdownMenuColumnStyle` deprecated, changed to `popupMenuColumnStyle`.
+    - `onDropdownVisibleChange` deprecated, changed to `onOpenChange`.
+    - `onPopupVisibleChange` deprecated, changed to `onOpenChange`.
+    - `bordered` deprecated, changed to `variant`.
+
+- `Collapse`
+    - `destroyInactivePanel` deprecated, changed to `destroyOnHidden`.
+    - `expandIconPosition` deprecated, changed to `expandIconPlacement`.
+
+- `Collapse.Panel`
+    - `disabled` deprecated, changed to `collapsible="disabled"`.
+
+- `ConfigProvider`
+    - `dropdownMatchSelectWidth` deprecated, changed to `popupMatchSelectWidth`.
+
+- `DatePicker.RangePicker`
+    - `dropdownClassName` deprecated, changed to `classes.popup.root`.
+    - `popupClassName` deprecated, changed to `classes.popup.root`.
+    - `popupStyle` deprecated, changed to `styles.popup.root`.
+    - `bordered` deprecated, changed to `variant`.
+    - `onSelect` deprecated, changed to `onCalendarChange`.
+
+- `DatePicker`
+    - `dropdownClassName` deprecated, changed to `classes.popup.root`.
+    - `popupClassName` deprecated, changed to `classes.popup.root`.
+    - `popupStyle` deprecated, changed to `styles.popup.root`.
+    - `bordered` deprecated, changed to `variant`.
+    - `onSelect` deprecated, changed to `onCalendarChange`.
+
+- `Descriptions`
+    - `labelStyle` deprecated, changed to `styles.label`.
+    - `contentStyle` deprecated, changed to `styles.content`.
+
+- `Divider`
+    - `type` deprecated, changed to `orientation`.
+    - `orientationMargin` deprecated, changed to `styles.content.margin`.
+
+- `Drawer`
+    - `headerStyle` deprecated, changed to `styles.header`.
+    - `bodyStyle` deprecated, changed to `styles.body`.
+    - `footerStyle` deprecated, changed to `styles.footer`.
+    - `contentWrapperStyle` deprecated, changed to `styles.wrapper`.
+    - `destroyOnClose` deprecated, changed to `destroyOnHidden`.
+    - `maskStyle` deprecated, changed to `styles.mask`.
+    - `drawerStyle` deprecated, changed to `styles.section`.
+    - `destroyInactivePanel` deprecated, changed to `destroyOnHidden`.
+    - `width` deprecated, changed to `size`.
+    - `height` deprecated, changed to `size`.
+
+- `Dropdown.Button`
+    - `Dropdown.Button` deprecated, changed to `Space.Compact + Dropdown + Button`.
+
+- `Dropdown`
+    - `dropdownRender` deprecated, changed to `popupRender`.
+    - `destroyPopupOnHide` deprecated, changed to `destroyOnHidden`.
+    - `overlay(v-slot)` deprecated, changed to `popupRender`.
+    - `overlayClassName` deprecated, changed to `classes.root`.
+    - `overlayStyle` deprecated, changed to `styles.root`.
+    - `placement: xxxCenter` deprecated, changed to `placement: xxx`.
+    - `<Dropdown class="xx"></Dropdown>` deprecated, changed to `<Dropdown><span class="xx"></span></Dropdown>`.
+
+- `Empty`
+    - `imageStyle` deprecated, changed to `styles.image`.
+
+- `FloatButton`
+    - `description` deprecated, changed to `content`.
+
+- `Image`
+    - `wrapperStyle` deprecated, changed to `styles.root`.
+    - `visible` deprecated, changed to `open`.
+    - `onVisibleChange` deprecated, changed to `onOpenChange`.
+    - `maskClassName` deprecated, changed to `classes.cover`.
+    - `rootClassName` deprecated, changed to `classes.root`.
+    - `toolbarRender` deprecated, changed to `actionsRender`.
+
+- `Input`
+    - `addonAfter` deprecated, changed to `SpaceCompact`.
+    - `addonBefore` deprecated, changed to `SpaceCompact`.
+
+- `Input.Group`
+    - `Input.Group` deprecated, changed to `Space.Compact`.
+
+- `InputNumber`
+    - `bordered` deprecated, changed to `variant`.
+    - `addonAfter` deprecated, changed to `Space.Compact`.
+    - `addonBefore` deprecated, changed to `Space.Compact`.
+
+- `Mentions`
+    - `Mentions.Option` deprecated, changed to `options`.
+
+- `Menu`
+    - `value` deprecated, changed to `key`.
+    - `children` deprecated, changed to `items`.
+    - `select` event, changed to `(value: string | number, option: Option) => void`.
+
+- `Modal`
+    - `bodyStyle` deprecated, changed to `styles.body`.
+    - `maskStyle` deprecated, changed to `styles.mask`.
+    - `destroyOnClose` deprecated, changed to `destroyOnHidden`.
+
+- `Notification`
+    - `btn` deprecated, changed to `actions`.
+    - `message` deprecated, changed to `title`.
+
+- `Progress`
+    - `strokeWidth` deprecated, changed to `size`.
+    - `width` deprecated, changed to `size`.
+    - `trailColor` deprecated, changed to `railColor`.
+    - `gapPosition` deprecated, changed to `gapPlacement`.
+
+- `Select`
+    - `dropdownMatchSelectWidth` deprecated, changed to `popupMatchSelectWidth`.
+    - `dropdownStyle` deprecated, changed to `styles.popup.root`.
+    - `dropdownClassName` deprecated, changed to `classes.popup.root`.
+    - `popupClassName` deprecated, changed to `classes.popup.root`.
+    - `dropdownRender` deprecated, changed to `popupRender`.
+    - `onDropdownVisibleChange` deprecated, changed to `onOpenChange`.
+    - `bordered` deprecated, changed to `variant`.
+
+- `Slider`
+    - `tooltipPrefixCls` deprecated, changed to `tooltip.prefixCls`.
+    - `getTooltipPopupContainer` deprecated, changed to `tooltip.getPopupContainer`.
+    - `tipFormatter` deprecated, changed to `tooltip.formatter`.
+    - `tooltipPlacement` deprecated, changed to `tooltip.placement`.
+    - `tooltipVisible` deprecated, changed to `tooltip.open`.
+
+- `SpaceCompact`
+    - `direction` deprecated, changed to `orientation`.
+
+- `Space`
+    - `direction` deprecated, changed to `orientation`.
+    - `split` deprecated, changed to `separator`.
+
+- `Spin`
+    - `tip` deprecated, changed to `description`.
+    - `wrapperClassName` deprecated, changed to `classes.root`.
+
+- `Splitter`
+    - `layout` deprecated, changed to `orientation`.
+
+- `Countdown`
+    - `<a-statistic-countdown />` deprecated, changed to `<a-statistic-timer type="countdown" />`.
+
+- `Statistic`
+    - `valueStyle` deprecated, changed to `styles.content`.
+
+- `Steps`
+    - `labelPlacement` deprecated, changed to `titlePlacement`.
+    - `progressDot` deprecated, changed to `type="dot"`.
+    - `direction` deprecated, changed to `orientation`.
+    - `items.description` deprecated, changed to `items.content`.
+
+- `Table`
+    - `pagination.position` deprecated, changed to `pagination.placement`.
+    - `onSelectInvert` deprecated, changed to `onChange`.
+    - `filterDropdownOpen` deprecated, changed to `filterDropdownProps.open`.
+    - `onFilterDropdownOpenChange` deprecated, changed to `filterDropdownProps.onOpenChange`.
+    - `filterCheckall` deprecated, changed to `locale.filterCheckAll`.
+    - `customRender` deprecated, changed to `render`.
+    - `customRow` deprecated, changed to `onRow`.
+    - `onResizeColumn` deprecated, changed to `onResize`.
+    - `customFilterIcon` deprecated, changed to `filterIcon`.
+    - `customFilterDropdown` deprecated, changed to `filterDropdown`.
+    - `customCell` deprecated, changed to `onCell`.
+
+- `Tabs`
+    - `popupClassName` deprecated, changed to `classes.popup`.
+    - `tabPosition` deprecated, changed to `tabPlacement`.
+    - `destroyInactiveTabPane` deprecated, changed to `destroyOnHidden`.
+    - `Tabs.TabPane` deprecated, changed to `items`.
+
+- `Tag`
+    - `bordered={false}` deprecated, changed to `variant="filled"`.
+    - `color="xxx-inverse"` deprecated, changed to `variant="solid"`.
+
+- `TimePicker`
+    - `addon` deprecated, changed to `renderExtraFooter`.
+
+- `Timeline`
+    - `Timeline.Item` deprecated, changed to `items`.
+    - `pending` deprecated, changed to `items`.
+    - `pendingDot` deprecated, changed to `items`.
+    - `mode=left|right` deprecated, changed to `mode=start|end`.
+
+- `Tooltip`
+    - `overlayStyle` deprecated, changed to `styles.root`.
+    - `overlayInnerStyle` deprecated, changed to `styles.container`.
+    - `overlayClassName` deprecated, changed to `classes.root`.
+    - `destroyTooltipOnHide` deprecated, changed to `destroyOnHidden`.
+
+- `Popover`
+    - `overlayClassName` deprecated, changed to `classes.container`.
+
+- `Transfer`
+    - `listStyle` deprecated, changed to `styles.section`.
+    - `operationStyle` deprecated, changed to `styles.actions`.
+    - `operations` deprecated, changed to `actions`.
+
+- `TreeSelect`
+    - `dropdownMatchSelectWidth` deprecated, changed to `popupMatchSelectWidth`.
+    - `dropdownStyle` deprecated, changed to `styles.popup.root`.
+    - `dropdownClassName` deprecated, changed to `classes.popup.root`.
+    - `popupClassName` deprecated, changed to `classes.popup.root`.
+    - `dropdownRender` deprecated, changed to `popupRender`.
+    - `onDropdownVisibleChange` deprecated, changed to `onOpenChange`.
+    - `bordered` deprecated, changed to `variant`.
+
+- `Tree`
+    - `tree.dataRef` deprecated, changed to `tree`.
+    - `treeData.title(v-slot)` deprecated, changed to `titleRender`.
+
+- `notification`
+    - `message` deprecated, changed to `title`.
+    - `btn` deprecated, changed to `actions`.
+    - `close` deprecated, changed to `destroy`.
+
+### Overlay Components (Modal, Drawer, etc.)
+
+- Added `mask` overlay functionality with blur effect support.
+- Enabled by default, can be disabled with the following configuration:
+
+```vue
+<template>
+  <a-config-provider
+    :modal="{
+      mask: {
+        blur: false,
+      },
+    }"
+    :drawer="{
+      mask: {
+        blur: false,
+      },
+    }"
+  >
+    <a-modal />
+    <a-drawer />
+  </a-config-provider>
+</template>
+```
+
+### Tag Margin Adjustment
+
+`antdv-next` removes the default margin at the end of the `Tag` component (previously, Tag had an additional `margin-inline-end` at the end). If your layout or custom styles depend on this behavior, please use the `tag.styles` option in `ConfigProvider` to supplement it:
+
+```vue
+<template>
+  <a-config-provider
+    :tag="{
+      styles: {
+        root: {
+          marginInlineEnd: '8px',
+        },
+      },
+    }"
+  >
+    <a-tag>Tag A</a-tag>
+    <a-tag>Tag B</a-tag>
+    <a-tag>Tag C</a-tag>
+  </a-config-provider>
+</template>
+```
+
+### Tooltip Adjustments
+
+The `overlay` slot has been removed. Use `popupRender` instead.
+
+### Form Adjustments
+
+- Removed `a-form-rest` to cancel passive collection of components. By default, we do not actively collect components inside `a-form-item` as form fields, and you need to manually specify them through the `name` attribute.
+
+## Upgrade Impact Investigation Checklist
+
+To ensure that your project runs normally after upgrading to `antdv-next`, please refer to the following checklist and confirm each item:
+
+- **Vue Version**: It is recommended to use `vue@3.5.x`.
+- **@ant-design/icons Upgrade**: Confirm that the `@ant-design/icons` version has been upgraded to `@antdv-next/icons` to match `antdv-next`.
+- **Browser Compatibility**: Confirm that the target user browsers are modern browsers and support CSS variables.
+- **Custom Style Check**: If you have CSS customizations targeting internal DOM nodes of components, verify that they still work under `antdv-next`.
+- **Overlay Mask Configuration**: Check if Modal, Drawer, and other overlay components need to disable the `mask` blur effect. If not needed, keep the default.
+- **Build Tool Configuration**: Confirm that there are no errors after the upgrade build, and that CSS variables and CSS-in-JS work properly.
+- **Console Warnings**: Run the application and observe the console, handling all `legacy API` prompts.
+
+## Encountering Issues
+
+If you encounter problems during the upgrade process, please provide feedback on [GitHub issues](https://github.com/antdv-next/antdv-next/issues/). We will respond as soon as possible and improve the relevant documentation.
@@ -0,0 +1,110 @@
+---
+title: Nuxt
+---
+
+`@antdv-next/nuxt` is the official Nuxt module for `antdv-next`.
+
+## Version Requirements
+
+- Nuxt >= 4.0.0
+- Vue >= 3.5.0
+- antdv-next >= 1.0.4
+- @antdv-next/icons >= 1.0.1
+
+## Installation
+
+```shell
+npx nuxi@latest module add @antdv-next/nuxt
+```
+
+Or install dependencies manually:
+
+<InstallDependencies
+  npm='$ npm i -D @antdv-next/nuxt antdv-next @antdv-next/icons'
+  yarn='$ yarn add -D @antdv-next/nuxt antdv-next @antdv-next/icons'
+  pnpm='$ pnpm add -D @antdv-next/nuxt antdv-next @antdv-next/icons'
+  bun='$ bun add -D @antdv-next/nuxt antdv-next @antdv-next/icons'
+/>
+
+## Configuration
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@antdv-next/nuxt'],
+  antd: {
+    icon: true,
+  },
+})
+```
+
+The module config key is `antd`.
+
+## Usage
+
+```vue
+<template>
+  <a-button type="primary">Primary</a-button>
+  <HomeOutlined />
+</template>
+```
+
+By default, components are registered with prefix `A`, for example `AButton`, `ATable`, and `AQrcode`.
+
+## Styles
+
+Add reset styles:
+
+```ts
+export default defineNuxtConfig({
+  css: ['antdv-next/dist/reset.css'],
+})
+```
+
+If you use zero-runtime theme mode (recommended), also include:
+
+```ts
+export default defineNuxtConfig({
+  css: [
+    'antdv-next/dist/reset.css',
+    'antdv-next/dist/antd.css',
+  ],
+})
+```
+
+## Options
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `icon` | `boolean` | `false` | Enable auto-registration for `@antdv-next/icons`. |
+| `prefix` | `string` | `'A'` | Prefix for all auto-registered components. |
+| `include` | `ComponentName[]` | `undefined` | Only register listed components. Higher priority than `exclude`. |
+| `exclude` | `ComponentName[]` | `undefined` | Exclude listed components when `include` is not set. |
+| `includeIcons` | `IconName[]` | `undefined` | Only register listed icons. Higher priority than `excludeIcons`. |
+| `excludeIcons` | `IconName[]` | `undefined` | Exclude listed icons when `includeIcons` is not set. |
+
+Notes:
+
+- `includeIcons` and `excludeIcons` work only when `icon` is enabled.
+- `ComponentName` and `IconName` are exported from the module type definitions.
+
+## Full Example
+
+`assets/entry.css`
+
+```css
+@import "antdv-next/dist/reset.css";
+
+```
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@antdv-next/nuxt'],
+  css: ['~/assets/entry.css'],
+  antd: {
+    prefix: 'A',
+    icon: true,
+    include: ['Button', 'Table', 'QRCode'],
+    includeIcons: ['HomeOutlined', 'SearchOutlined'],
+  },
+})
+```
@@ -0,0 +1,147 @@
+---
+title: Secondary Development
+---
+
+If you want to build your own business component library, documentation site, and demo system on top of `antdv-next`, we provide a ready-to-use starter repository: [docs-base](https://github.com/antdv-next/docs-base).
+
+This template is more than a basic scaffold. It combines component source code, documentation pages, a Markdown demo pipeline, and library build outputs in one project, making it suitable for teams that want to evolve and publish internal or public component libraries continuously.
+
+## Template Repository
+
+- GitHub: [https://github.com/antdv-next/docs-base](https://github.com/antdv-next/docs-base)
+- Chinese README: [README.zh-CN.md](https://github.com/antdv-next/docs-base/blob/main/README.zh-CN.md)
+- English README: [README.md](https://github.com/antdv-next/docs-base/blob/main/README.md)
+
+## When to use it
+
+Use this template when you want to:
+
+- build a business-oriented component library based on `antdv-next`
+- keep component source, demos, and documentation in one place
+- ship typed Vue 3 components
+- write docs in Markdown while embedding real Vue demos
+- maintain Chinese and English docs with the same structure
+- create your own theme system instead of inheriting a fixed visual style
+
+## What is included
+
+- Vue 3 + TypeScript + Vite
+- `antdv-next` as the UI foundation
+- preserved module output, bundled ESM, and UMD builds
+- generated type declarations
+- a custom Markdown-to-Vue docs pipeline
+- live demo rendering, source extraction, and hot updates
+- UnoCSS, Vue Router, Pinia, and Vue I18n integration
+- sample components and documentation pages that you can extend directly
+
+## One thing to do before you start
+
+The template uses `@org/components` as a placeholder package name. Before secondary development, do a global search and replace for `@org/components` and switch it to your actual package name.
+
+## Quick Start
+
+### 1. Clone the template
+
+```bash
+git clone https://github.com/antdv-next/docs-base.git
+cd docs-base
+```
+
+### 2. Install dependencies
+
+```bash
+pnpm install
+```
+
+### 3. Run the docs app
+
+```bash
+pnpm docs:dev
+```
+
+The local development site runs at [http://localhost:6878](http://localhost:6878) by default.
+
+### 4. Build the library
+
+```bash
+pnpm build
+```
+
+Other useful commands:
+
+```bash
+pnpm docs:build
+pnpm docs:preview
+pnpm type-check
+pnpm test:unit
+```
+
+## Recommended Workflow
+
+### 1. Rename the package and publishing metadata
+
+- replace `@org/components` globally
+- update the package name and publish metadata in `package.json`
+
+### 2. Build your business components
+
+Create or adapt components under `components/`, and export them from `components/index.ts` so the public API stays explicit and stable.
+
+### 3. Write documentation pages
+
+Add Markdown pages under `docs/src/pages/`. The template auto-registers `.md` files as routes through `import.meta.glob`.
+
+Recommended locale naming:
+
+- `*.zh-CN.md`
+- `*.en-US.md`
+
+### 4. Add demos next to docs pages
+
+Place demo files in a sibling `demo/` directory and reference them like this:
+
+```md
+
+## Demos
+
+| Demo | Path |
+| --- | --- |
+| Basic example | demo/basic.md |
+
+```
+
+The docs pipeline will automatically:
+
+- render the live Vue demo
+- extract the source code
+- generate highlighted code blocks
+- hot-update demo metadata during development
+
+## Project Structure
+
+```text
+.
+├─ components/                 # Business component source
+├─ docs/                       # Documentation app
+│  ├─ src/pages/               # Markdown pages and home page
+│  ├─ src../../components/demo/docs.md/     # Demo renderer and source viewer
+│  └─ plugins/markdown/        # Markdown / demo transform pipeline
+├─ vite.build.config.ts        # Preserve-module build
+├─ vite.esm.config.ts          # Bundled ESM build
+├─ vite.umd.config.ts          # UMD build
+└─ global.d.ts                 # Global component typings
+```
+
+## Theme Notes
+
+## Who this template is for
+
+If you do not want to maintain demos in a separate repo and prefer to keep:
+
+- component implementation
+- documentation pages
+- live examples
+- multilingual content
+- build outputs
+
+in a single codebase, `docs-base` is a practical starting point.
@@ -0,0 +1,255 @@
+---
+title: Tailwind CSS
+---
+
+Before anything else, wrap the `App.vue` entry with `a-app` so the runtime has a parent style container:
+
+```vue
+<template>
+  <a-app>
+    <router-view />
+  </a-app>
+</template>
+```
+
+This plugin maps Ant Design CSS variables into Tailwind's theme system, so utilities like `bg-primary`, `shadow-card`, and `text-h1` can still follow `antdv-next` runtime theming.
+
+## Version Compatibility
+
+`@antdv-next/tailwind` ships in lockstep with `antdv-next`. Pick the matching version from the table below:
+
+| `antdv-next` | `@antdv-next/tailwind` | Notes |
+| --- | --- | --- |
+| `>=1.3.0` | `^1.1.0` | **Current recommended.** Spacing tokens are aligned with antdv 1.3.0 (`p-xxl`, `p-xxxl`, `m-xxxl` are removed) and many new semantic tokens are added (`primary-text`, `success-bg-hover`, `text-placeholder`, `bg-solid`, …). Also introduces the v4 namespace-safe entry `compat.css`. |
+| `<1.3.0` | `<1.1.0` | antdv before 1.3.0 still exposes the old spacing tokens. Pinning `@antdv-next/tailwind@<1.1.0` avoids referencing variables that no longer exist. |
+
+> When you bump `antdv-next` to 1.3.0, bump `@antdv-next/tailwind` to `>=1.1.0` together. If you are still on antdv-next 1.2.x or earlier, pin `@antdv-next/tailwind` to the 1.0.x line.
+
+## Package Info
+
+- Package: `@antdv-next/tailwind`
+- `peerDependencies`: `tailwindcss >= 3.0.0`
+
+## Installation
+
+For antdv-next 1.3.0+:
+
+```bash
+pnpm add -D tailwindcss @antdv-next/tailwind@^1.1.0
+```
+
+For antdv-next 1.2.x and earlier:
+
+```bash
+pnpm add -D tailwindcss @antdv-next/tailwind@~1.0
+```
+
+## When to use it
+
+This package is a good fit when:
+
+- your project already uses Tailwind CSS
+- you want to keep the Tailwind workflow while integrating `antdv-next` theme variables
+- you need runtime theme switching instead of fixed build-time colors
+
+If you prefer an UnoCSS-based approach, see the [UnoCSS](unocss.md) guide.
+
+## Tailwind CSS v4 (Recommended)
+
+Tailwind CSS v4 wires the theme through the `@theme` mechanism. Starting from 1.1.0, `@antdv-next/tailwind` ships **two parallel entries**:
+
+| Entry | Utility example | When to use |
+| --- | --- | --- |
+| `theme.css` (classic) | `bg-primary`, `p-lg`, `text-lg`, `shadow-card` | Existing projects; accept antdv tokens occupying Tailwind's native utility namespace |
+| `compat.css` (**recommended**) | `bg-ant-primary`, `p-ant-lg`, `text-ant-lg`, `shadow-ant-card` (plus optional `a-bg-primary` etc. shortcuts) | New projects; avoid clashes with Tailwind built-in tokens or project-level custom tokens |
+
+> For the design rationale, see [css-plugin Issue #7 (RFC)](https://github.com/antdv-next/css-plugin/issues/7).
+
+### Option 1: Import the theme file directly
+
+```css
+@import "tailwindcss";
+
+/* Pick one — classic entry */
+@import "@antdv-next/tailwind/theme.css";
+
+/* Or — namespace-safe entry (recommended) */
+@import "@antdv-next/tailwind/compat.css";
+```
+
+### Option 2: Generate theme CSS dynamically
+
+If you need a custom CSS variable prefix or namespace, use the generators exported from the `v4` entry:
+
+```ts
+import {
+  generateCompatThemeCSS,
+  generateThemeCSS,
+} from '@antdv-next/tailwind/v4'
+
+// Classic entry (default antPrefix='ant')
+const css = generateThemeCSS({
+  antPrefix: 'my-app',
+})
+
+// Namespace-safe entry
+const compatCss = generateCompatThemeCSS({
+  antPrefix: 'ant',             // antdv CSS variable prefix
+  tokenPrefix: 'ant',           // produces --color-ant-primary, @utility p-ant-lg
+  prefix: 'a',                  // also emits @utility a-bg-primary shortcuts
+  allowPrefixedUtilities: true, // toggle the shortcuts above
+})
+```
+
+### compat.css options
+
+- `antPrefix`: the antdv-next CSS variable prefix (must match your `ConfigProvider` `prefixCls`)
+- `tokenPrefix`: namespace injected into every Tailwind v4 theme token, e.g. `--color-ant-primary`, `--padding-ant-lg`, `--text-ant-lg`. Also emits `@utility p-ant-lg { padding: var(--padding-ant-lg) }` style safe directional utilities so Tailwind's native `p-*` is not overridden
+- `prefix`: extra prefixed utility shortcuts (e.g. `a-bg-primary`, `a-p-lg`) bound directly to antdv variables — they do not depend on `tokenPrefix`
+- `allowPrefixedUtilities`: toggle the prefixed shortcuts. Disable it to keep only the namespaced tokens in `@theme inline`
+
+## Tailwind CSS v3
+
+If you are still on Tailwind CSS v3, use the plugin form.
+
+### Basic setup
+
+```ts
+import antdPlugin from '@antdv-next/tailwind'
+
+export default {
+  content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
+  plugins: [antdPlugin],
+}
+```
+
+### Custom setup
+
+```ts
+import { createAntdPlugin } from '@antdv-next/tailwind'
+
+export default {
+  content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
+  plugins: [
+    createAntdPlugin({
+      antPrefix: 'ant',
+    }),
+  ],
+}
+```
+
+## Usage Example
+
+```vue
+<template>
+  <!-- Classic theme.css writing -->
+  <div class="bg-primary text-white p-lg rounded-lg shadow-card">
+    <h1 class="text-h1 text-primary">Classic theme.css</h1>
+    <p class="text-text-secondary mt-sm">
+      Tailwind utilities powered by Ant Design theme variables
+    </p>
+  </div>
+
+  <!-- compat.css recommended writing (namespace-safe) -->
+  <div class="bg-ant-primary text-ant-light-solid p-ant-lg rounded-ant-lg shadow-ant-card">
+    <h1 class="text-ant-h1 color-ant-primary">Namespace safe</h1>
+    <p class="color-ant-text-secondary mt-ant-sm">
+      Doesn't collide with Tailwind built-in tokens
+    </p>
+  </div>
+
+  <!-- compat.css also emits a-* prefixed shortcuts -->
+  <div class="a-bg-primary a-color-white a-p-lg a-rounded-lg a-shadow-card">
+    <h1 class="a-text-h1">Prefixed shortcut</h1>
+  </div>
+</template>
+```
+
+## Tailwind v4 Utility Mapping
+
+| Category | Classic `theme.css` | Recommended `compat.css` | Shortcut |
+| --- | --- | --- | --- |
+| Color | `bg-primary`, `text-blue-5` | `bg-ant-primary`, `text-ant-blue-5` | `a-bg-primary`, `a-c-primary` |
+| Padding | `p-lg`, `px-sm` | `p-ant-lg`, `px-ant-sm` | `a-p-lg`, `a-px-sm` |
+| Margin | `m-lg`, `my-sm` | `m-ant-lg`, `my-ant-sm` | `a-m-lg`, `a-my-sm` |
+| Radius | `rounded-lg` | `rounded-ant-lg` | `a-rounded-lg`, `a-rd-lg` |
+| Font size | `text-h1` | `text-ant-h1` | `a-text-h1` |
+| Shadow | `shadow-card` | `shadow-ant-card` | `a-shadow-card` |
+
+## Common Utility Reference
+
+### Colors and Backgrounds
+
+| Classic `theme.css` | Namespace-safe `compat.css` | Description |
+| --- | --- | --- |
+| `bg-primary` | `bg-ant-primary` | Primary background color |
+| `text-primary` | `color-ant-primary` | Primary text color |
+| `bg-success` | `bg-ant-success` | Success background color |
+| `text-text-secondary` | `color-ant-text-secondary` | Secondary text color |
+| `bg-container` | `bg-ant-container` | Container background color |
+| `border-border` | `border-ant-border` | Default border color |
+
+### Spacing and Layout
+
+| Classic | Namespace-safe | Description |
+| --- | --- | --- |
+| `p-lg` | `p-ant-lg` | Large padding |
+| `px-md` | `px-ant-md` | Medium horizontal padding |
+| `py-sm` | `py-ant-sm` | Small vertical padding |
+| `m-md` | `m-ant-md` | Medium margin |
+| `mt-sm` | `mt-ant-sm` | Small top margin |
+| `rounded-lg` | `rounded-ant-lg` | Large border radius |
+
+### Typography and Shadows
+
+| Classic | Namespace-safe | Description |
+| --- | --- | --- |
+| `text-h1` | `text-ant-h1` | H1 title size |
+| `text-lg` | `text-ant-lg` | Large text |
+| `text-sm` | `text-ant-sm` | Small text |
+| `shadow-card` | `shadow-ant-card` | Card shadow |
+| `shadow-sec` | `shadow-ant-sec` | Secondary shadow |
+| `shadow-ter` | `shadow-ant-ter` | Tertiary shadow |
+
+## Spacing Tokens (aligned with antdv 1.3.0)
+
+- Padding: `xxs`, `xs`, `sm`, `md`, `lg`, `xl`
+- Margin: `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`
+
+> Starting from 1.1.0, `p-xxl`, `p-xxxl`, and `m-xxxl` are no longer generated because antdv 1.3.0 removed the underlying CSS variables. If you are still on antdv-next 1.2.x or earlier, pin `@antdv-next/tailwind` to the 1.0.x line.
+
+## New Tokens Added in 1.3.0 (available since 1.1.0)
+
+The semantic token set is now fully aligned with antdv 1.3.0:
+
+- Primary / Success / Warning / Error / Info each provide ten steps: `*-bg`, `*-bg-hover`, `*-border`, `*-border-hover`, `*-hover`, `*`, `*-active`, `*-text`, `*-text-hover`, `*-text-active`
+- Error extras: `error-bg-filled-hover`, `error-bg-active`, `error-affix`
+- Warning extras: `warning-affix`
+- Text: `text-placeholder`, `text-disabled`, `text-heading`, `text-label`, `text-description`, `text-light-solid`
+- Fill: `fill-content`, `fill-content-hover`, `fill-alter`
+- Background: `container-disabled`, `spotlight`, `blur`, `solid`, `solid-hover`, `solid-active`
+- Border: `border-disabled`, `border-bg`
+- Icon: `icon`, `icon-hover`
+- Misc: `highlight`, `white`
+
+## Relation to Theming
+
+```vue
+<script setup lang="ts">
+import { ConfigProvider } from 'antdv-next'
+</script>
+
+<template>
+  <ConfigProvider>
+    <RouterView />
+  </ConfigProvider>
+</template>
+```
+
+## Notes
+
+- For v4 the recommended path is importing `compat.css`: namespace-safe, no collisions with Tailwind built-in utilities. You can keep `theme.css` for existing projects.
+- Starting from 1.1.0, `theme.css` no longer emits `p-xxl` / `p-xxxl` / `m-xxxl` so it stays consistent with antdv 1.3.0's actual CSS variables.
+- Both v3 and v4 keep Tailwind global spacing behavior intact, so classes like `gap-*` and `max-w-*` still follow Tailwind defaults.
+- If you change the CSS variable prefix, keep `antPrefix` aligned in the plugin / generator config.
+- `compat.css`'s namespace defaults to `ant` (i.e. `bg-ant-primary`). Override it via `generateCompatThemeCSS({ tokenPrefix: 'antd' })` to get `bg-antd-primary` style utilities.
@@ -0,0 +1,284 @@
+---
+title: UnoCSS
+---
+
+Before anything else, wrap the `App.vue` entry with `a-app` so the runtime has a parent style container:
+
+```vue
+<template>
+  <a-app>
+    <router-view />
+  </a-app>
+</template>
+```
+
+If you want to use atomic utility classes in an `antdv-next` project and have those classes map directly to Ant Design CSS variables, use `@antdv-next/unocss`.
+
+## Version Compatibility
+
+`@antdv-next/unocss` ships in lockstep with `antdv-next`. Pick the matching version from the table below:
+
+| `antdv-next` | `@antdv-next/unocss` | Notes |
+| --- | --- | --- |
+| `>=1.3.0` | `^1.1.0` | **Current recommended.** Spacing tokens are aligned with antdv 1.3.0 (`p-xxl`, `p-xxxl`, `m-xxxl` are removed) and many new semantic tokens are added (`primary-text`, `success-bg-hover`, `text-placeholder`, `bg-solid`, …). Also introduces the namespace-safe mode (`bg-ant-primary`). |
+| `<1.3.0` | `<1.1.0` | antdv before 1.3.0 still exposes the old spacing tokens. Pinning `@antdv-next/unocss@<1.1.0` avoids generating utilities that point at variables which no longer exist. |
+
+> When you bump `antdv-next` to 1.3.0, bump `@antdv-next/unocss` to `>=1.1.0` together. If you are still on antdv-next 1.2.x or earlier, pin `@antdv-next/unocss` to the 1.0.x line.
+
+## Package Info
+
+- Package: `@antdv-next/unocss`
+- `peerDependencies`: `unocss >= 66.0.0`
+
+## Installation
+
+For antdv-next 1.3.0+:
+
+```bash
+pnpm add -D unocss @antdv-next/unocss@^1.1.0
+```
+
+For antdv-next 1.2.x and earlier:
+
+```bash
+pnpm add -D unocss @antdv-next/unocss@~1.0
+```
+
+## When to use it
+
+This package fits well when:
+
+- you are already using UnoCSS
+- you want to keep UnoCSS / Wind-style utility syntax
+- you want colors, radius, shadows, and typography utilities to follow `antdv-next` CSS variables
+- you need runtime theme switching instead of build-time fixed values
+
+If you are using Tailwind CSS, see the [Tailwind CSS](tailwindcss.md) guide.
+
+## Available Presets
+
+### `presetAntd`
+
+The default preset. It follows the regular UnoCSS Wind3-style structure and works for most UnoCSS projects.
+
+```ts
+// uno.config.ts
+import { defineConfig } from 'unocss'
+import { presetAntd } from '@antdv-next/unocss'
+
+export default defineConfig({
+  presets: [
+    presetAntd({
+      prefix: 'a',                  // class prefix, default: 'a'
+      allowPrefixedUtilities: true, // keep a-* utilities, default: true
+      allowUnprefixed: true,        // keep legacy bare classes like bg-primary, default: true
+      antPrefix: 'ant',             // CSS variable prefix, default: 'ant'
+      tokenPrefix: 'ant',           // namespace prefix, default: 'ant' (empty disables)
+    }),
+  ],
+})
+```
+
+Theme keys:
+
+- `colors`
+- `borderRadius`
+- `fontSize`
+- `boxShadow`
+
+### `presetAntdTailwind4`
+
+If you want to keep UnoCSS but prefer Tailwind CSS v4-style theme key naming, use this preset.
+
+```ts
+// uno.config.ts
+import { defineConfig } from 'unocss'
+import { presetAntdTailwind4 } from '@antdv-next/unocss'
+
+export default defineConfig({
+  presets: [
+    presetAntdTailwind4({
+      prefix: 'a',
+      allowPrefixedUtilities: true,
+      allowUnprefixed: true,
+      antPrefix: 'ant',
+      tokenPrefix: 'ant',
+    }),
+  ],
+})
+```
+
+Theme keys:
+
+- `colors`
+- `radius`
+- `text`
+- `shadow`
+- `defaults`
+
+## Which one should you choose
+
+### Choose `presetAntd`
+
+- when you already have an UnoCSS setup
+- when you want to keep the standard UnoCSS theme structure
+- when you are combining it with presets like Wind3 or Attributify
+
+### Choose `presetAntdTailwind4`
+
+- when you prefer Tailwind CSS v4-style naming
+- when you are migrating from Tailwind v4 to UnoCSS or mixing both approaches
+- when you want theme keys such as `radius`, `shadow`, and `text`
+
+## Three Utility Patterns (since 1.1.0)
+
+Both presets emit three parallel utility forms that can be toggled independently:
+
+| Mode | Example | Control | Use when |
+| --- | --- | --- | --- |
+| **Prefixed (stable)** | `a-bg-primary`, `a-p-lg` | `allowPrefixedUtilities` (default `true`) | Most projects; clearly isolates antdv utilities |
+| **Namespace-safe (preferred replacement for the legacy bare form)** | `bg-ant-primary`, `p-ant-lg` | `tokenPrefix` (default `'ant'`, empty disables) | You want short class names without polluting UnoCSS native tokens |
+| **Legacy bare (back-compat)** | `bg-primary`, `p-lg` | `allowUnprefixed` (default `true`; will flip to `false` next major) | Existing projects only |
+
+Example:
+
+```vue
+<template>
+  <!-- Stable prefixed API -->
+  <div class="a-bg-primary a-color-white a-p-lg a-rounded-lg a-shadow-card">
+    Prefixed
+  </div>
+
+  <!-- Namespace-safe API (recommended) -->
+  <div class="bg-ant-primary color-ant-white p-ant-lg rounded-ant-lg shadow-ant-card">
+    Namespace safe
+  </div>
+
+  <!-- Legacy bare form (still works, but risks collisions) -->
+  <div class="bg-primary color-white p-lg rounded-lg shadow-card">
+    Legacy bare
+  </div>
+</template>
+```
+
+Important details:
+
+- Text color uses `color-primary` or `c-primary` (or `color-ant-primary` / `c-ant-primary` in namespace mode)
+- `text-*` is primarily for font size, e.g. `text-lg`, `text-h1` (in namespace mode: `text-ant-lg`)
+
+If you want to allow only `a-*` and `*-ant-*` utilities while disabling the legacy bare form:
+
+```ts
+// uno.config.ts
+import { defineConfig } from 'unocss'
+import { presetAntd } from '@antdv-next/unocss'
+
+export default defineConfig({
+  presets: [
+    presetAntd({
+      allowUnprefixed: false, // disables bg-primary / text-sm style classes
+      // allowPrefixedUtilities: true and tokenPrefix: 'ant' remain in effect
+    }),
+  ],
+})
+```
+
+> `allowUnprefixed: false` only disables legacy bare classes — it **does not** rewrite theme keys. `a-bg-primary` and `bg-ant-primary` continue to work.
+
+## Spacing Tokens (aligned with antdv 1.3.0)
+
+- Padding: `xxs`, `xs`, `sm`, `md`, `lg`, `xl`
+- Margin: `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`
+
+> Starting from 1.1.0, `p-xxl`, `p-xxxl`, and `m-xxxl` are no longer generated because antdv 1.3.0 removed the underlying CSS variables. If you are still on antdv-next 1.2.x or earlier, pin `@antdv-next/unocss` to the 1.0.x line.
+
+## Utility Examples
+
+```vue
+<template>
+  <div class="a-bg-primary a-color-white a-p-lg a-rounded-lg a-shadow-card">
+    Primary card
+  </div>
+
+  <div class="a-bg-container a-color-text a-px-md a-py-sm a-border-border a-rounded-sm">
+    Container content
+  </div>
+
+  <div class="a-text-lg a-color-primary a-mt-sm">
+    Heading text
+  </div>
+</template>
+```
+
+Common utility groups (each has `a-*`, `*-ant-*`, and bare forms):
+
+- colors: `color-*`, `bg-*`, `border-*` (plus shorthand `b-*` and directional `bt-`, `bx-`, etc.)
+- spacing: `m-*`, `p-*`, `mx-*`, `py-*`
+- radius: `rounded-*`, `rd-*`
+- shadows: `shadow-*`
+- typography: `text-*`
+
+## Common Utility Reference
+
+### Colors and Backgrounds
+
+| Prefixed | Namespace-safe | Description |
+| --- | --- | --- |
+| `a-bg-primary` | `bg-ant-primary` | Primary background |
+| `a-bg-container` | `bg-ant-container` | Container background |
+| `a-bg-success-bg` | `bg-ant-success-bg` | Light success background |
+| `a-color-primary` | `color-ant-primary` | Primary text color |
+| `a-color-text` | `color-ant-text` | Default text color |
+| `a-color-text-secondary` | `color-ant-text-secondary` | Secondary text |
+| `a-border-border` | `border-ant-border` | Default border |
+| `a-border-t-primary` | `border-t-ant-primary` | Top primary border |
+
+### Spacing and Layout
+
+| Prefixed | Namespace-safe | Description |
+| --- | --- | --- |
+| `a-p-lg` | `p-ant-lg` | 24px padding |
+| `a-px-md` | `px-ant-md` | 20px horizontal padding |
+| `a-py-sm` | `py-ant-sm` | 12px vertical padding |
+| `a-mt-sm` | `mt-ant-sm` | 12px top margin |
+| `a-mx-lg` | `mx-ant-lg` | 24px horizontal margin |
+| `a-my-xs` | `my-ant-xs` | 8px vertical margin |
+
+### Radius, Shadow, Typography
+
+| Prefixed | Namespace-safe | Description |
+| --- | --- | --- |
+| `a-rounded-sm` | `rounded-ant-sm` | Small radius |
+| `a-rounded-lg` | `rounded-ant-lg` | Large radius |
+| `a-rounded` | `rounded-ant` | Default radius |
+| `a-shadow-card` | `shadow-ant-card` | Card shadow |
+| `a-shadow` | `shadow-ant` | Default shadow |
+| `a-text-lg` | `text-ant-lg` | Large text |
+| `a-text-h1` | `text-ant-h1` | H1 title size |
+
+## New Tokens Added in 1.3.0 (available since 1.1.0)
+
+The semantic token set is now fully aligned with antdv 1.3.0:
+
+- Primary / Success / Warning / Error / Info each provide ten steps: `*-bg`, `*-bg-hover`, `*-border`, `*-border-hover`, `*-hover`, `*`, `*-active`, `*-text`, `*-text-hover`, `*-text-active`
+- Error extras: `error-bg-filled-hover`, `error-bg-active`, `error-affix`
+- Warning extras: `warning-affix`
+- Text: `text-placeholder`, `text-disabled`, `text-heading`, `text-label`, `text-description`, `text-light-solid`
+- Fill: `fill-content`, `fill-content-hover`, `fill-alter`
+- Background: `container-disabled`, `spotlight`, `blur`, `solid`, `solid-hover`, `solid-active`
+- Border: `border-disabled`, `border-bg`
+- Icon: `icon`, `icon-hover`
+- Misc: `highlight`, `white`
+
+## Theme and Variables
+
+These presets map utilities to Ant Design CSS variables, so colors, radius, shadows, and typography follow the active theme automatically.
+
+## Notes
+
+- The preset mainly customizes `m-*` / `p-*` related utilities and does not override UnoCSS global spacing behavior (`w-*`, `max-w-*`, `gap-*` keep their UnoCSS defaults).
+- The default `prefix` is `a`, so generated classes usually look like `a-bg-primary` and `a-p-lg`.
+- `allowUnprefixed` defaults to `true` today but will flip to `false` in the next major. Migrate to `a-*` or `*-ant-*` writers early.
+- `allowUnprefixed: false` only disables the legacy bare form — it **does not** rewrite theme keys (`colors.primary` stays `colors.primary`).
+- The default `antPrefix` is `ant`. If you customize your CSS variable prefix, keep this option aligned.
+- The default `tokenPrefix` is `ant`. Override it (for example `'antd'`) to customize the namespace, or pass an empty string to disable namespace mode.