diff --git a/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx
new file mode 100644
index 000000000..218112ba1
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx
@@ -0,0 +1,42 @@
+/**
+ * title: Variable.Input
+ */
+import { FormItem } from '@formily/antd';
+import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
+import React from 'react';
+
+const scope = [
+ { label: 'v1', value: 'v1' },
+ { label: 'nested', value: 'nested', children: [{ label: 'v2', value: 'v2'}] },
+];
+
+const schema = {
+ type: 'object',
+ properties: {
+ input: {
+ type: 'string',
+ title: `替换模式`,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Variable.Input',
+ 'x-component-props': {
+ scope,
+ },
+ // 'x-reactions': {
+ // target: 'read',
+ // fulfill: {
+ // state: {
+ // value: '{{$self.value}}',
+ // },
+ // },
+ // },
+ },
+ },
+};
+
+export default () => {
+ return (
+
+
+
+ );
+};
diff --git a/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx
new file mode 100644
index 000000000..a6e8807e4
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx
@@ -0,0 +1,42 @@
+/**
+ * title: Variable.Input
+ */
+ import { FormItem } from '@formily/antd';
+ import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
+ import React from 'react';
+
+ const scope = [
+ { label: 'v1', value: 'v1' },
+ { label: 'nested', value: 'nested', children: [{ label: 'v2', value: 'v2'}] },
+ ];
+
+ const schema = {
+ type: 'object',
+ properties: {
+ input: {
+ type: 'string',
+ title: `表达式模式`,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Variable.TextArea',
+ 'x-component-props': {
+ scope,
+ },
+ // 'x-reactions': {
+ // target: 'read',
+ // fulfill: {
+ // state: {
+ // value: '{{$self.value}}',
+ // },
+ // },
+ // },
+ },
+ },
+ };
+
+ export default () => {
+ return (
+
+
+
+ );
+ };
diff --git a/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx
new file mode 100644
index 000000000..c45692c98
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx
@@ -0,0 +1,42 @@
+/**
+ * title: Variable.Input
+ */
+ import { FormItem } from '@formily/antd';
+ import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
+ import React from 'react';
+
+ const scope = [
+ { label: 'v1', value: 'v1' },
+ { label: 'nested', value: 'nested', children: [{ label: 'v2', value: 'v2'}] },
+ ];
+
+ const schema = {
+ type: 'object',
+ properties: {
+ input: {
+ type: 'string',
+ title: `JSON 模式`,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Variable.JSON',
+ 'x-component-props': {
+ scope,
+ },
+ // 'x-reactions': {
+ // target: 'read',
+ // fulfill: {
+ // state: {
+ // value: '{{$self.value}}',
+ // },
+ // },
+ // },
+ },
+ },
+ };
+
+ export default () => {
+ return (
+
+
+
+ );
+ };
diff --git a/packages/core/client/src/schema-component/antd/variable/index.md b/packages/core/client/src/schema-component/antd/variable/index.md
new file mode 100644
index 000000000..00b667d56
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/variable/index.md
@@ -0,0 +1,22 @@
+---
+nav:
+ path: /client
+group:
+ path: /schema-components
+---
+
+# Variable
+
+## Examples
+
+### `Variable.Input`
+
+
+
+### `Variable.TextArea`
+
+
+
+### `Variable.JSON`
+
+