From 524b9badf2e29ef266927cae66c1f60759794ab3 Mon Sep 17 00:00:00 2001
From: Vben <ann.vben@gmail.com>
Date: Tue, 10 Sep 2024 21:48:51 +0800
Subject: [PATCH] feat: add VbenForm component (#4352)

* feat: add form component

* fix: build error

* feat: add form adapter

* feat: add some component

* feat: add some component

* feat: add example

* feat: suppoer custom action button

* chore: update

* feat: add example

* feat: add formModel,formDrawer demo

* fix: build error

* fix: typo

* fix: ci error

---------

Co-authored-by: jinmao <jinmao88@qq.com>
Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>
---
 apps/web-antd/src/adapter/form.ts             | 114 ++++++
 apps/web-antd/src/adapter/index.ts            |   1 +
 apps/web-antd/src/layouts/basic.vue           |  13 +-
 .../views/_core/authentication/code-login.vue |  44 ++-
 .../_core/authentication/forget-password.vue  |  27 +-
 .../src/views/_core/authentication/login.vue  |  79 ++++-
 .../views/_core/authentication/register.vue   |  86 ++++-
 apps/web-ele/src/adapter/form.ts              |  89 +++++
 apps/web-ele/src/adapter/index.ts             |   1 +
 apps/web-ele/src/layouts/basic.vue            |  13 +-
 .../views/_core/authentication/code-login.vue |  44 ++-
 .../_core/authentication/forget-password.vue  |  27 +-
 .../src/views/_core/authentication/login.vue  |  79 ++++-
 .../views/_core/authentication/register.vue   |  86 ++++-
 apps/web-naive/src/adapter/form.ts            |  98 ++++++
 apps/web-naive/src/adapter/index.ts           |   1 +
 apps/web-naive/src/layouts/basic.vue          |  13 +-
 .../views/_core/authentication/code-login.vue |  44 ++-
 .../_core/authentication/forget-password.vue  |  27 +-
 .../src/views/_core/authentication/login.vue  |  79 ++++-
 .../views/_core/authentication/register.vue   |  86 ++++-
 docs/.vitepress/config/zh.mts                 |   4 +
 docs/src/components/common-ui/vben-form.md    |  11 +
 docs/src/en/guide/in-depth/login.md           |  10 -
 docs/src/guide/in-depth/login.md              |   9 -
 .../eslint-config/src/configs/unicorn.ts      |   2 +
 .../vite-config/src/config/application.ts     |   6 +-
 internal/vite-config/src/plugins/archiver.ts  |  10 +-
 packages/@core/base/design/src/css/global.css |   5 +-
 packages/@core/base/icons/src/lucide.ts       |   2 +-
 packages/@core/base/shared/build.config.ts    |   1 -
 packages/@core/base/shared/package.json       |  29 +-
 packages/@core/base/shared/src/index.ts       |   5 -
 .../src/utils/__tests__/state-handler.test.ts |  60 ++++
 .../shared/src/utils/__tests__/util.test.ts   |  80 +++++
 packages/@core/base/shared/src/utils/index.ts |   2 +
 .../base/shared/src/utils/state-handler.ts    |  50 +++
 packages/@core/base/shared/src/utils/util.ts  |  19 +
 .../composables/src/use-content-style.ts      |   4 +-
 .../@core/composables/src/use-namespace.ts    |   2 +-
 .../composables/src/use-priority-value.ts     |  52 ++-
 .../src/use-simple-locale/messages.ts         |   8 +
 packages/@core/preferences/src/preferences.ts |   3 +-
 .../preferences/src/update-css-variables.ts   |   6 +-
 .../@core/preferences/src/use-preferences.ts  |   2 +-
 packages/@core/ui-kit/form-ui/build.config.ts |  21 ++
 packages/@core/ui-kit/form-ui/package.json    |  50 +++
 .../@core/ui-kit/form-ui/postcss.config.mjs   |   1 +
 .../form-ui/src/components/form-actions.vue   | 103 ++++++
 packages/@core/ui-kit/form-ui/src/config.ts   |  65 ++++
 packages/@core/ui-kit/form-ui/src/form-api.ts | 175 ++++++++++
 .../ui-kit/form-ui/src/form-render/context.ts |  24 ++
 .../form-ui/src/form-render/dependencies.ts   | 116 +++++++
 .../form-ui/src/form-render/expandable.ts     |  97 ++++++
 .../form-ui/src/form-render/form-field.vue    | 283 +++++++++++++++
 .../form-ui/src/form-render/form-label.vue    |  20 ++
 .../ui-kit/form-ui/src/form-render/form.vue   | 140 ++++++++
 .../ui-kit/form-ui/src/form-render/helper.ts  |  60 ++++
 .../ui-kit/form-ui/src/form-render/index.ts   |   3 +
 packages/@core/ui-kit/form-ui/src/index.ts    |  11 +
 packages/@core/ui-kit/form-ui/src/types.ts    | 327 ++++++++++++++++++
 .../ui-kit/form-ui/src/use-form-context.ts    |  59 ++++
 .../@core/ui-kit/form-ui/src/use-vben-form.ts |  49 +++
 .../@core/ui-kit/form-ui/src/vben-form.vue    |  72 ++++
 .../ui-kit/form-ui/src/vben-use-form.vue      |  57 +++
 .../@core/ui-kit/form-ui/tailwind.config.mjs  |   1 +
 packages/@core/ui-kit/form-ui/tsconfig.json   |   6 +
 .../ui-kit/menu-ui/src/components/menu.vue    |   6 +-
 packages/@core/ui-kit/popup-ui/package.json   |   2 +-
 .../src/drawer/__tests__/drawer-api.test.ts   |   2 +-
 .../ui-kit/popup-ui/src/drawer/drawer-api.ts  |   6 +-
 .../ui-kit/popup-ui/src/drawer/drawer.vue     |  45 ++-
 .../ui-kit/popup-ui/src/drawer/use-drawer.ts  |   2 +-
 .../src/modal/__tests__/modal-api.test.ts     |   2 +-
 .../ui-kit/popup-ui/src/modal/modal-api.ts    |   6 +-
 .../@core/ui-kit/popup-ui/src/modal/modal.vue |  55 ++-
 .../ui-kit/popup-ui/src/modal/use-modal.ts    |  22 +-
 .../@core/ui-kit/shadcn-ui/components.json    |   2 +-
 packages/@core/ui-kit/shadcn-ui/package.json  |  21 +-
 .../shadcn-ui/src/components/button/button.ts |  24 ++
 .../src/components/button/button.vue          |  16 +-
 .../src/components/button/icon-button.vue     |   9 +-
 .../shadcn-ui/src/components/button/index.ts  |   1 +
 .../src/components/checkbox/checkbox.vue      |  16 +-
 .../count-to-animator/count-to-animator.vue   |   2 +-
 .../expandable-arrow/expandable-arrow.vue     |  36 ++
 .../src/components/expandable-arrow/index.ts  |   1 +
 .../components/full-screen/full-screen.vue    |   4 +-
 .../shadcn-ui/src/components/icon/icon.vue    |   7 +-
 .../ui-kit/shadcn-ui/src/components/index.ts  |   9 +-
 .../input-password/input-password.vue         |  45 +--
 .../shadcn-ui/src/components/input/index.ts   |   2 -
 .../shadcn-ui/src/components/input/input.vue  |  53 ---
 .../shadcn-ui/src/components/input/types.ts   |  25 --
 .../shadcn-ui/src/components/link/link.vue    |   2 +-
 .../src/components/menu-badge/menu-badge.vue  |   2 +-
 .../src/components/pin-input/input.vue        |  85 +++--
 .../src/components/pin-input/types.ts         |  24 +-
 .../render-content/render-content.vue         |  57 +--
 .../src/components/scrollbar/scrollbar.vue    |   2 +-
 .../components/segmented/tabs-indicator.vue   |  10 +-
 .../shadcn-ui/src/components/select/index.ts  |   1 +
 .../src/components/select/select.vue          |  29 ++
 .../src/components/spinner/loading.vue        |   2 +-
 .../src/components/spinner/spinner.vue        |   2 +-
 .../src/components/tooltip/help-tooltip.vue   |  31 ++
 .../shadcn-ui/src/components/tooltip/index.ts |   1 +
 .../src/components/ui/accordion/Accordion.vue |  19 +
 .../ui/accordion/AccordionContent.vue         |  26 ++
 .../components/ui/accordion/AccordionItem.vue |  27 ++
 .../ui/accordion/AccordionTrigger.vue         |  41 +++
 .../src/components/ui/accordion/index.ts      |   4 +
 .../src/components/ui/avatar/Avatar.vue       |   6 +-
 .../src/components/ui/badge/Badge.vue         |   6 +-
 .../components/ui/breadcrumb/Breadcrumb.vue   |   4 +-
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      |   6 +-
 .../ui/breadcrumb/BreadcrumbItem.vue          |   6 +-
 .../ui/breadcrumb/BreadcrumbLink.vue          |  13 +-
 .../ui/breadcrumb/BreadcrumbList.vue          |   6 +-
 .../ui/breadcrumb/BreadcrumbPage.vue          |   6 +-
 .../ui/breadcrumb/BreadcrumbSeparator.vue     |   6 +-
 .../src/components/ui/button/Button.vue       |  12 +-
 .../src/components/ui/button/button.ts        |   4 +-
 .../src/components/ui/button/index.ts         |   2 +
 .../src/components/ui/button/types.ts         |  20 ++
 .../shadcn-ui/src/components/ui/card/Card.vue |   6 +-
 .../src/components/ui/card/CardContent.vue    |   6 +-
 .../components/ui/card/CardDescription.vue    |   6 +-
 .../src/components/ui/card/CardFooter.vue     |   6 +-
 .../src/components/ui/card/CardHeader.vue     |   6 +-
 .../src/components/ui/card/CardTitle.vue      |   6 +-
 .../src/components/ui/checkbox/Checkbox.vue   |   8 +-
 .../context-menu/ContextMenuCheckboxItem.vue  |   8 +-
 .../ui/context-menu/ContextMenuContent.vue    |   8 +-
 .../ui/context-menu/ContextMenuItem.vue       |   6 +-
 .../ui/context-menu/ContextMenuLabel.vue      |   6 +-
 .../ui/context-menu/ContextMenuRadioItem.vue  |   8 +-
 .../ui/context-menu/ContextMenuSeparator.vue  |   8 +-
 .../ui/context-menu/ContextMenuShortcut.vue   |   6 +-
 .../ui/context-menu/ContextMenuSubContent.vue |   8 +-
 .../ui/context-menu/ContextMenuSubTrigger.vue |   6 +-
 .../components/ui/dialog/DialogContent.vue    |   2 +-
 .../ui/dialog/DialogDescription.vue           |   8 +-
 .../src/components/ui/dialog/DialogFooter.vue |   6 +-
 .../src/components/ui/dialog/DialogHeader.vue |   6 +-
 .../ui/dialog/DialogScrollContent.vue         |   8 +-
 .../src/components/ui/dialog/DialogTitle.vue  |   8 +-
 .../DropdownMenuCheckboxItem.vue              |   8 +-
 .../ui/dropdown-menu/DropdownMenuContent.vue  |   6 +-
 .../ui/dropdown-menu/DropdownMenuItem.vue     |   6 +-
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |   6 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |   8 +-
 .../dropdown-menu/DropdownMenuSeparator.vue   |   6 +-
 .../ui/dropdown-menu/DropdownMenuShortcut.vue |   6 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |   8 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |   8 +-
 .../src/components/ui/form/FormControl.vue    |  19 +
 .../components/ui/form/FormDescription.vue    |  20 ++
 .../src/components/ui/form/FormItem.vue       |  20 ++
 .../src/components/ui/form/FormLabel.vue      |  18 +
 .../src/components/ui/form/FormMessage.vue    |  18 +
 .../shadcn-ui/src/components/ui/form/index.ts |  11 +
 .../src/components/ui/form/injectionKeys.ts   |   4 +
 .../src/components/ui/form/useFormField.ts    |  38 ++
 .../ui/hover-card/HoverCardContent.vue        |   2 +-
 .../src/components/ui/input/Input.vue         |   8 +-
 .../src/components/ui/label/Label.vue         |  29 ++
 .../src/components/ui/label/index.ts          |   1 +
 .../ui/number-field/NumberField.vue           |   8 +-
 .../ui/number-field/NumberFieldContent.vue    |   6 +-
 .../ui/number-field/NumberFieldDecrement.vue  |   8 +-
 .../ui/number-field/NumberFieldIncrement.vue  |   8 +-
 .../ui/number-field/NumberFieldInput.vue      |   2 +-
 .../src/components/ui/pin-input/PinInput.vue  |   8 +-
 .../components/ui/pin-input/PinInputGroup.vue |   8 +-
 .../components/ui/pin-input/PinInputInput.vue |   8 +-
 .../components/ui/popover/PopoverContent.vue  |   6 +-
 .../components/ui/radio-group/RadioGroup.vue  |  29 ++
 .../ui/radio-group/RadioGroupItem.vue         |  39 +++
 .../src/components/ui/radio-group/index.ts    |   2 +
 .../components/ui/scroll-area/ScrollArea.vue  |   6 +-
 .../components/ui/scroll-area/ScrollBar.vue   |   6 +-
 .../components/ui/select/SelectContent.vue    |   6 +-
 .../src/components/ui/select/SelectGroup.vue  |   8 +-
 .../src/components/ui/select/SelectItem.vue   |   8 +-
 .../src/components/ui/select/SelectLabel.vue  |   8 +-
 .../ui/select/SelectScrollDownButton.vue      |   8 +-
 .../ui/select/SelectScrollUpButton.vue        |   8 +-
 .../components/ui/select/SelectSeparator.vue  |   8 +-
 .../components/ui/select/SelectTrigger.vue    |   8 +-
 .../src/components/ui/separator/Separator.vue |  42 +++
 .../src/components/ui/separator/index.ts      |   1 +
 .../src/components/ui/sheet/SheetContent.vue  |   6 +-
 .../components/ui/sheet/SheetDescription.vue  |   8 +-
 .../src/components/ui/sheet/SheetFooter.vue   |   6 +-
 .../src/components/ui/sheet/SheetHeader.vue   |   6 +-
 .../src/components/ui/sheet/SheetTitle.vue    |   8 +-
 .../src/components/ui/switch/Switch.vue       |   8 +-
 .../src/components/ui/tabs/TabsContent.vue    |   8 +-
 .../src/components/ui/tabs/TabsList.vue       |   8 +-
 .../src/components/ui/tabs/TabsTrigger.vue    |   8 +-
 .../src/components/ui/textarea/Textarea.vue   |  32 ++
 .../src/components/ui/textarea/index.ts       |   1 +
 .../src/components/ui/toast/Toast.vue         |   2 +-
 .../src/components/ui/toast/ToastAction.vue   |   8 +-
 .../src/components/ui/toast/ToastClose.vue    |   6 +-
 .../components/ui/toast/ToastDescription.vue  |   8 +-
 .../src/components/ui/toast/ToastTitle.vue    |   8 +-
 .../src/components/ui/toast/ToastViewport.vue |   8 +-
 .../src/components/ui/toast/toast.ts          |   4 +-
 .../ui/toggle-group/ToggleGroup.vue           |   6 +-
 .../ui/toggle-group/ToggleGroupItem.vue       |   6 +-
 .../src/components/ui/toggle/Toggle.vue       |   6 +-
 .../components/ui/tooltip/TooltipContent.vue  |   6 +-
 packages/@core/ui-kit/shadcn-ui/src/index.ts  |   2 +-
 packages/effects/common-ui/package.json       |   2 +-
 .../common-ui/src/components/captcha/index.ts |   8 +-
 .../captcha/point-selection-captcha.vue       |  14 +-
 .../common-ui/src/components/captcha/types.ts |   6 +
 .../effects/common-ui/src/components/index.ts |   2 +
 .../src/ui/authentication/code-login.vue      | 120 ++-----
 .../src/ui/authentication/forget-password.vue |  50 ++-
 .../ui/authentication/login-expired-modal.vue |  22 +-
 .../common-ui/src/ui/authentication/login.vue | 104 ++----
 .../src/ui/authentication/register.vue        | 131 ++-----
 .../common-ui/src/ui/authentication/types.ts  |  10 -
 packages/effects/layouts/package.json         |   1 +
 .../layouts/src/basic/header/header.vue       |   8 +-
 .../widgets/global-search/global-search.vue   |   2 +-
 .../widgets/global-search/search-panel.vue    |   2 +-
 .../layouts/src/widgets/language-toggle.vue   |   2 +-
 .../widgets/lock-screen/lock-screen-modal.vue |  69 ++--
 .../src/widgets/lock-screen/lock-screen.vue   |  78 ++---
 .../src/widgets/notification/notification.vue |   2 +-
 .../preferences/preferences-button.vue        |   2 +-
 .../preferences/preferences-drawer.vue        |   2 +-
 .../src/widgets/theme-toggle/theme-button.vue |   6 +-
 .../widgets/user-dropdown/user-dropdown.vue   |   6 +-
 .../src/request-client/request-client.ts      |  19 +-
 packages/icons/src/svg/icons/refresh.svg      |   1 -
 packages/icons/src/svg/index.ts               |   2 -
 packages/locales/src/langs/en-US.json         |   9 +-
 packages/locales/src/langs/zh-CN.json         |   9 +-
 packages/stores/src/modules/tabbar.ts         |   6 +-
 packages/types/src/{user.d.ts => user.ts}     |   0
 packages/utils/src/helpers/generate-menus.ts  |   2 +-
 .../src/helpers/generate-routes-backend.ts    |   2 +-
 .../src/helpers/generate-routes-frontend.ts   |   2 +-
 playground/src/adapter/form.ts                | 114 ++++++
 playground/src/adapter/index.ts               |   1 +
 playground/src/layouts/basic.vue              |  13 +-
 playground/src/locales/langs/en-US.json       |   8 +
 playground/src/locales/langs/zh-CN.json       |   8 +
 .../src/router/routes/modules/examples.ts     |  49 +++
 .../views/_core/authentication/code-login.vue |  44 ++-
 .../_core/authentication/forget-password.vue  |  27 +-
 .../src/views/_core/authentication/login.vue  |  96 ++++-
 .../views/_core/authentication/register.vue   |  86 ++++-
 .../views/demos/features/clipboard/index.vue  |   2 +-
 .../src/views/examples/captcha/index.vue      |   8 +-
 .../examples/drawer/form-drawer-demo.vue      |  56 +++
 .../src/views/examples/drawer/index.vue       |  21 ++
 playground/src/views/examples/form/basic.vue  | 270 +++++++++++++++
 playground/src/views/examples/form/custom.vue |  79 +++++
 .../src/views/examples/form/dynamic.vue       | 271 +++++++++++++++
 playground/src/views/examples/form/query.vue  | 149 ++++++++
 playground/src/views/examples/form/rules.vue  | 188 ++++++++++
 .../views/examples/modal/form-model-demo.vue  |  58 ++++
 playground/src/views/examples/modal/index.vue |  20 +-
 pnpm-lock.yaml                                |  78 ++++-
 vben-admin.code-workspace                     |   4 +
 271 files changed, 5974 insertions(+), 1247 deletions(-)
 create mode 100644 apps/web-antd/src/adapter/form.ts
 create mode 100644 apps/web-antd/src/adapter/index.ts
 create mode 100644 apps/web-ele/src/adapter/form.ts
 create mode 100644 apps/web-ele/src/adapter/index.ts
 create mode 100644 apps/web-naive/src/adapter/form.ts
 create mode 100644 apps/web-naive/src/adapter/index.ts
 create mode 100644 docs/src/components/common-ui/vben-form.md
 delete mode 100644 packages/@core/base/shared/src/index.ts
 create mode 100644 packages/@core/base/shared/src/utils/__tests__/state-handler.test.ts
 create mode 100644 packages/@core/base/shared/src/utils/__tests__/util.test.ts
 create mode 100644 packages/@core/base/shared/src/utils/state-handler.ts
 create mode 100644 packages/@core/base/shared/src/utils/util.ts
 create mode 100644 packages/@core/ui-kit/form-ui/build.config.ts
 create mode 100644 packages/@core/ui-kit/form-ui/package.json
 create mode 100644 packages/@core/ui-kit/form-ui/postcss.config.mjs
 create mode 100644 packages/@core/ui-kit/form-ui/src/components/form-actions.vue
 create mode 100644 packages/@core/ui-kit/form-ui/src/config.ts
 create mode 100644 packages/@core/ui-kit/form-ui/src/form-api.ts
 create mode 100644 packages/@core/ui-kit/form-ui/src/form-render/context.ts
 create mode 100644 packages/@core/ui-kit/form-ui/src/form-render/dependencies.ts
 create mode 100644 packages/@core/ui-kit/form-ui/src/form-render/expandable.ts
 create mode 100644 packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
 create mode 100644 packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
 create mode 100644 packages/@core/ui-kit/form-ui/src/form-render/form.vue
 create mode 100644 packages/@core/ui-kit/form-ui/src/form-render/helper.ts
 create mode 100644 packages/@core/ui-kit/form-ui/src/form-render/index.ts
 create mode 100644 packages/@core/ui-kit/form-ui/src/index.ts
 create mode 100644 packages/@core/ui-kit/form-ui/src/types.ts
 create mode 100644 packages/@core/ui-kit/form-ui/src/use-form-context.ts
 create mode 100644 packages/@core/ui-kit/form-ui/src/use-vben-form.ts
 create mode 100644 packages/@core/ui-kit/form-ui/src/vben-form.vue
 create mode 100644 packages/@core/ui-kit/form-ui/src/vben-use-form.vue
 create mode 100644 packages/@core/ui-kit/form-ui/tailwind.config.mjs
 create mode 100644 packages/@core/ui-kit/form-ui/tsconfig.json
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/expandable-arrow.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/index.ts
 delete mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/input/index.ts
 delete mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue
 delete mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/input/types.ts
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/select/index.ts
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/Accordion.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionContent.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionItem.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionTrigger.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/index.ts
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/button/types.ts
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormControl.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormDescription.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormItem.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormLabel.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormMessage.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/form/index.ts
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/form/injectionKeys.ts
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/form/useFormField.ts
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/label/Label.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/label/index.ts
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/RadioGroup.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/RadioGroupItem.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/index.ts
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/separator/Separator.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/separator/index.ts
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/textarea/Textarea.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/textarea/index.ts
 create mode 100644 packages/effects/common-ui/src/components/captcha/types.ts
 delete mode 100644 packages/icons/src/svg/icons/refresh.svg
 rename packages/types/src/{user.d.ts => user.ts} (100%)
 create mode 100644 playground/src/adapter/form.ts
 create mode 100644 playground/src/adapter/index.ts
 create mode 100644 playground/src/views/examples/drawer/form-drawer-demo.vue
 create mode 100644 playground/src/views/examples/form/basic.vue
 create mode 100644 playground/src/views/examples/form/custom.vue
 create mode 100644 playground/src/views/examples/form/dynamic.vue
 create mode 100644 playground/src/views/examples/form/query.vue
 create mode 100644 playground/src/views/examples/form/rules.vue
 create mode 100644 playground/src/views/examples/modal/form-model-demo.vue

diff --git a/apps/web-antd/src/adapter/form.ts b/apps/web-antd/src/adapter/form.ts
new file mode 100644
index 000000000..06e8cf134
--- /dev/null
+++ b/apps/web-antd/src/adapter/form.ts
@@ -0,0 +1,114 @@
+import type {
+  BaseFormComponentType,
+  VbenFormSchema as FormSchema,
+  VbenFormProps,
+} from '@vben/common-ui';
+
+import { h } from 'vue';
+
+import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import {
+  AutoComplete,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  DatePicker,
+  Divider,
+  Input,
+  InputNumber,
+  InputPassword,
+  Mentions,
+  Radio,
+  RadioGroup,
+  RangePicker,
+  Rate,
+  Select,
+  Space,
+  Switch,
+  TimePicker,
+  TreeSelect,
+  Upload,
+} from 'ant-design-vue';
+
+// 业务表单组件适配
+
+export type FormComponentType =
+  | 'AutoComplete'
+  | 'Checkbox'
+  | 'CheckboxGroup'
+  | 'DatePicker'
+  | 'Divider'
+  | 'Input'
+  | 'InputNumber'
+  | 'InputPassword'
+  | 'Mentions'
+  | 'Radio'
+  | 'RadioGroup'
+  | 'RangePicker'
+  | 'Rate'
+  | 'Select'
+  | 'Space'
+  | 'Switch'
+  | 'TimePicker'
+  | 'TreeSelect'
+  | 'Upload'
+  | BaseFormComponentType;
+
+// 初始化表单组件，并注册到form组件内部
+setupVbenForm<FormComponentType>({
+  components: {
+    AutoComplete,
+    Checkbox,
+    CheckboxGroup,
+    DatePicker,
+    // 自定义默认的重置按钮
+    DefaultResetActionButton: (props, { attrs, slots }) => {
+      return h(Button, { ...props, attrs, type: 'default' }, slots);
+    },
+    // 自定义默认的提交按钮
+    DefaultSubmitActionButton: (props, { attrs, slots }) => {
+      return h(Button, { ...props, attrs, type: 'primary' }, slots);
+    },
+    Divider,
+    Input,
+    InputNumber,
+    InputPassword,
+    Mentions,
+    Radio,
+    RadioGroup,
+    RangePicker,
+    Rate,
+    Select,
+    Space,
+    Switch,
+    TimePicker,
+    TreeSelect,
+    Upload,
+  },
+  config: {
+    baseModelPropName: 'value',
+    modelPropNameMap: {
+      Checkbox: 'checked',
+      Radio: 'checked',
+      Switch: 'checked',
+      Upload: 'fileList',
+    },
+  },
+  defineRules: {
+    required: (value, _params, ctx) => {
+      if ((!value && value !== 0) || value.length === 0) {
+        return $t('formRules.required', [ctx.label]);
+      }
+      return true;
+    },
+  },
+});
+
+const useVbenForm = useForm<FormComponentType>;
+
+export { useVbenForm, z };
+
+export type VbenFormSchema = FormSchema<FormComponentType>;
+export type { VbenFormProps };
diff --git a/apps/web-antd/src/adapter/index.ts b/apps/web-antd/src/adapter/index.ts
new file mode 100644
index 000000000..698d687b9
--- /dev/null
+++ b/apps/web-antd/src/adapter/index.ts
@@ -0,0 +1 @@
+export * from './form';
diff --git a/apps/web-antd/src/layouts/basic.vue b/apps/web-antd/src/layouts/basic.vue
index 9e25d99f3..3c302634b 100644
--- a/apps/web-antd/src/layouts/basic.vue
+++ b/apps/web-antd/src/layouts/basic.vue
@@ -13,11 +13,12 @@ import {
   UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import { storeToRefs, useAccessStore, useUserStore } from '@vben/stores';
+import { useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
 import { $t } from '#/locales';
 import { useAuthStore } from '#/store';
+import LoginForm from '#/views/_core/authentication/login.vue';
 
 const notifications = ref<NotificationItem[]>([
   {
@@ -87,8 +88,6 @@ const menus = computed(() => [
   },
 ]);
 
-const { loginLoading } = storeToRefs(authStore);
-
 const avatar = computed(() => {
   return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
 });
@@ -130,11 +129,9 @@ function handleMakeAll() {
       <AuthenticationLoginExpiredModal
         v-model:open="accessStore.loginExpired"
         :avatar
-        :loading="loginLoading"
-        password-placeholder="123456"
-        username-placeholder="vben"
-        @submit="authStore.authLogin"
-      />
+      >
+        <LoginForm />
+      </AuthenticationLoginExpiredModal>
     </template>
     <template #lock-screen>
       <LockScreen :avatar @to-login="handleLogout" />
diff --git a/apps/web-antd/src/views/_core/authentication/code-login.vue b/apps/web-antd/src/views/_core/authentication/code-login.vue
index 36cf50ec0..03cf55028 100644
--- a/apps/web-antd/src/views/_core/authentication/code-login.vue
+++ b/apps/web-antd/src/views/_core/authentication/code-login.vue
@@ -1,15 +1,49 @@
 <script lang="ts" setup>
-import type { LoginCodeParams } from '@vben/common-ui';
+import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
-import { AuthenticationCodeLogin } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationCodeLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'CodeLogin' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.mobile'),
+      },
+      fieldName: 'phoneNumber',
+      label: $t('authentication.mobile'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.mobileTip') })
+        .refine((v) => /^\d{11}$/.test(v), {
+          message: $t('authentication.mobileErrortip'),
+        }),
+    },
+    {
+      component: 'VbenPinInput',
+      componentProps: {
+        createText: (countdown: number) => {
+          const text =
+            countdown > 0
+              ? $t('authentication.sendText', [countdown])
+              : $t('authentication.sendCode');
+          return text;
+        },
+        placeholder: $t('authentication.code'),
+      },
+      fieldName: 'code',
+      label: $t('authentication.code'),
+      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+    },
+  ];
+});
 /**
  * 异步处理登录操作
  * Asynchronously handle the login process
@@ -23,8 +57,8 @@ async function handleLogin(values: LoginCodeParams) {
 
 <template>
   <AuthenticationCodeLogin
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleLogin"
   />
 </template>
diff --git a/apps/web-antd/src/views/_core/authentication/forget-password.vue b/apps/web-antd/src/views/_core/authentication/forget-password.vue
index 74ccc27ed..6cedf3e8a 100644
--- a/apps/web-antd/src/views/_core/authentication/forget-password.vue
+++ b/apps/web-antd/src/views/_core/authentication/forget-password.vue
@@ -1,13 +1,32 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { VbenFormSchema } from '@vben/common-ui';
 
-import { AuthenticationForgetPassword } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { computed, ref } from 'vue';
+
+import { AuthenticationForgetPassword, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'ForgetPassword' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: 'example@example.com',
+      },
+      fieldName: 'email',
+      label: $t('authentication.email'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.emailTip') })
+        .email($t('authentication.emailValidErrorTip')),
+    },
+  ];
+});
+
 function handleSubmit(value: string) {
   // eslint-disable-next-line no-console
   console.log('reset email:', value);
@@ -16,8 +35,8 @@ function handleSubmit(value: string) {
 
 <template>
   <AuthenticationForgetPassword
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleSubmit"
   />
 </template>
diff --git a/apps/web-antd/src/views/_core/authentication/login.vue b/apps/web-antd/src/views/_core/authentication/login.vue
index 3bcdd9500..6b9945396 100644
--- a/apps/web-antd/src/views/_core/authentication/login.vue
+++ b/apps/web-antd/src/views/_core/authentication/login.vue
@@ -1,18 +1,91 @@
 <script lang="ts" setup>
-import { AuthenticationLogin } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { BasicOption } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { AuthenticationLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 import { useAuthStore } from '#/store';
 
 defineOptions({ name: 'Login' });
 
 const authStore = useAuthStore();
+
+const MOCK_USER_OPTIONS: BasicOption[] = [
+  {
+    label: '超级管理员',
+    value: 'vben',
+  },
+  {
+    label: '管理员',
+    value: 'admin',
+  },
+  {
+    label: '用户',
+    value: 'jack',
+  },
+];
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: MOCK_USER_OPTIONS,
+        placeholder: $t('authentication.selectAccount'),
+      },
+      fieldName: 'selectAccount',
+      label: $t('authentication.selectAccount'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.selectAccount') })
+        .optional()
+        .default('vben'),
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      dependencies: {
+        trigger(values, form) {
+          if (values.selectAccount) {
+            const findUser = MOCK_USER_OPTIONS.find(
+              (item) => item.value === values.selectAccount,
+            );
+            if (findUser) {
+              form.setValues({
+                password: '123456',
+                username: findUser.value,
+              });
+            }
+          }
+        },
+        triggerFields: ['selectAccount'],
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+  ];
+});
 </script>
 
 <template>
   <AuthenticationLogin
+    :form-schema="formSchema"
     :loading="authStore.loginLoading"
-    password-placeholder="123456"
-    username-placeholder="vben"
     @submit="authStore.authLogin"
   />
 </template>
diff --git a/apps/web-antd/src/views/_core/authentication/register.vue b/apps/web-antd/src/views/_core/authentication/register.vue
index f6b227d96..5e0cad071 100644
--- a/apps/web-antd/src/views/_core/authentication/register.vue
+++ b/apps/web-antd/src/views/_core/authentication/register.vue
@@ -1,15 +1,91 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';
 
-import { ref } from 'vue';
+import { computed, h, ref } from 'vue';
 
-import { AuthenticationRegister } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationRegister, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'Register' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      renderComponentContent() {
+        return {
+          strengthText: () => $t('authentication.passwordStrength'),
+        };
+      },
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          const { password } = values;
+          return z
+            .string()
+            .min(1, { message: $t('authentication.passwordTip') })
+            .refine((value) => value === password, {
+              message: $t('authentication.confirmPasswordTip'),
+            });
+        },
+        triggerFields: ['password'],
+      },
+      fieldName: 'confirmPassword',
+      label: $t('authentication.confirmPassword'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenCheckbox',
+      fieldName: 'agreePolicy',
+      renderComponentContent: () => ({
+        default: () =>
+          h('span', [
+            $t('authentication.agree'),
+            h(
+              'a',
+              {
+                class:
+                  'cursor-pointer text-primary ml-1 hover:text-primary-hover',
+                href: '',
+              },
+              [
+                $t('authentication.privacyPolicy'),
+                '&',
+                $t('authentication.terms'),
+              ],
+            ),
+          ]),
+      }),
+      rules: z.boolean().refine((value) => !!value, {
+        message: $t('authentication.agreeTip'),
+      }),
+    },
+  ];
+});
+
 function handleSubmit(value: LoginAndRegisterParams) {
   // eslint-disable-next-line no-console
   console.log('register submit:', value);
@@ -18,8 +94,8 @@ function handleSubmit(value: LoginAndRegisterParams) {
 
 <template>
   <AuthenticationRegister
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleSubmit"
   />
 </template>
diff --git a/apps/web-ele/src/adapter/form.ts b/apps/web-ele/src/adapter/form.ts
new file mode 100644
index 000000000..5336768ec
--- /dev/null
+++ b/apps/web-ele/src/adapter/form.ts
@@ -0,0 +1,89 @@
+import type {
+  BaseFormComponentType,
+  VbenFormSchema as FormSchema,
+  VbenFormProps,
+} from '@vben/common-ui';
+
+import { h } from 'vue';
+
+import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import {
+  ElButton,
+  ElCheckbox,
+  ElCheckboxGroup,
+  ElDivider,
+  ElInput,
+  ElInputNumber,
+  ElRadioGroup,
+  ElSelect,
+  ElSpace,
+  ElSwitch,
+  ElTimePicker,
+  ElTreeSelect,
+  ElUpload,
+} from 'element-plus';
+// 业务表单组件适配
+
+export type FormComponentType =
+  | 'Checkbox'
+  | 'CheckboxGroup'
+  | 'DatePicker'
+  | 'Divider'
+  | 'Input'
+  | 'InputNumber'
+  | 'RadioGroup'
+  | 'Select'
+  | 'Space'
+  | 'Switch'
+  | 'TimePicker'
+  | 'TreeSelect'
+  | 'Upload'
+  | BaseFormComponentType;
+
+// 初始化表单组件，并注册到form组件内部
+setupVbenForm<FormComponentType>({
+  components: {
+    Checkbox: ElCheckbox,
+    CheckboxGroup: ElCheckboxGroup,
+    // 自定义默认的重置按钮
+    DefaultResetActionButton: (props, { attrs, slots }) => {
+      return h(ElButton, { ...props, attrs, type: 'info' }, slots);
+    },
+    // 自定义默认的提交按钮
+    DefaultSubmitActionButton: (props, { attrs, slots }) => {
+      return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
+    },
+    Divider: ElDivider,
+    Input: ElInput,
+    InputNumber: ElInputNumber,
+    RadioGroup: ElRadioGroup,
+    Select: ElSelect,
+    Space: ElSpace,
+    Switch: ElSwitch,
+    TimePicker: ElTimePicker,
+    TreeSelect: ElTreeSelect,
+    Upload: ElUpload,
+  },
+  config: {
+    modelPropNameMap: {
+      Upload: 'fileList',
+    },
+  },
+  defineRules: {
+    required: (value, _params, ctx) => {
+      if ((!value && value !== 0) || value.length === 0) {
+        return $t('formRules.required', [ctx.label]);
+      }
+      return true;
+    },
+  },
+});
+
+const useVbenForm = useForm<FormComponentType>;
+
+export { useVbenForm, z };
+
+export type VbenFormSchema = FormSchema<FormComponentType>;
+export type { VbenFormProps };
diff --git a/apps/web-ele/src/adapter/index.ts b/apps/web-ele/src/adapter/index.ts
new file mode 100644
index 000000000..698d687b9
--- /dev/null
+++ b/apps/web-ele/src/adapter/index.ts
@@ -0,0 +1 @@
+export * from './form';
diff --git a/apps/web-ele/src/layouts/basic.vue b/apps/web-ele/src/layouts/basic.vue
index 9e25d99f3..3c302634b 100644
--- a/apps/web-ele/src/layouts/basic.vue
+++ b/apps/web-ele/src/layouts/basic.vue
@@ -13,11 +13,12 @@ import {
   UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import { storeToRefs, useAccessStore, useUserStore } from '@vben/stores';
+import { useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
 import { $t } from '#/locales';
 import { useAuthStore } from '#/store';
+import LoginForm from '#/views/_core/authentication/login.vue';
 
 const notifications = ref<NotificationItem[]>([
   {
@@ -87,8 +88,6 @@ const menus = computed(() => [
   },
 ]);
 
-const { loginLoading } = storeToRefs(authStore);
-
 const avatar = computed(() => {
   return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
 });
@@ -130,11 +129,9 @@ function handleMakeAll() {
       <AuthenticationLoginExpiredModal
         v-model:open="accessStore.loginExpired"
         :avatar
-        :loading="loginLoading"
-        password-placeholder="123456"
-        username-placeholder="vben"
-        @submit="authStore.authLogin"
-      />
+      >
+        <LoginForm />
+      </AuthenticationLoginExpiredModal>
     </template>
     <template #lock-screen>
       <LockScreen :avatar @to-login="handleLogout" />
diff --git a/apps/web-ele/src/views/_core/authentication/code-login.vue b/apps/web-ele/src/views/_core/authentication/code-login.vue
index 36cf50ec0..03cf55028 100644
--- a/apps/web-ele/src/views/_core/authentication/code-login.vue
+++ b/apps/web-ele/src/views/_core/authentication/code-login.vue
@@ -1,15 +1,49 @@
 <script lang="ts" setup>
-import type { LoginCodeParams } from '@vben/common-ui';
+import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
-import { AuthenticationCodeLogin } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationCodeLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'CodeLogin' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.mobile'),
+      },
+      fieldName: 'phoneNumber',
+      label: $t('authentication.mobile'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.mobileTip') })
+        .refine((v) => /^\d{11}$/.test(v), {
+          message: $t('authentication.mobileErrortip'),
+        }),
+    },
+    {
+      component: 'VbenPinInput',
+      componentProps: {
+        createText: (countdown: number) => {
+          const text =
+            countdown > 0
+              ? $t('authentication.sendText', [countdown])
+              : $t('authentication.sendCode');
+          return text;
+        },
+        placeholder: $t('authentication.code'),
+      },
+      fieldName: 'code',
+      label: $t('authentication.code'),
+      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+    },
+  ];
+});
 /**
  * 异步处理登录操作
  * Asynchronously handle the login process
@@ -23,8 +57,8 @@ async function handleLogin(values: LoginCodeParams) {
 
 <template>
   <AuthenticationCodeLogin
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleLogin"
   />
 </template>
diff --git a/apps/web-ele/src/views/_core/authentication/forget-password.vue b/apps/web-ele/src/views/_core/authentication/forget-password.vue
index 74ccc27ed..6cedf3e8a 100644
--- a/apps/web-ele/src/views/_core/authentication/forget-password.vue
+++ b/apps/web-ele/src/views/_core/authentication/forget-password.vue
@@ -1,13 +1,32 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { VbenFormSchema } from '@vben/common-ui';
 
-import { AuthenticationForgetPassword } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { computed, ref } from 'vue';
+
+import { AuthenticationForgetPassword, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'ForgetPassword' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: 'example@example.com',
+      },
+      fieldName: 'email',
+      label: $t('authentication.email'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.emailTip') })
+        .email($t('authentication.emailValidErrorTip')),
+    },
+  ];
+});
+
 function handleSubmit(value: string) {
   // eslint-disable-next-line no-console
   console.log('reset email:', value);
@@ -16,8 +35,8 @@ function handleSubmit(value: string) {
 
 <template>
   <AuthenticationForgetPassword
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleSubmit"
   />
 </template>
diff --git a/apps/web-ele/src/views/_core/authentication/login.vue b/apps/web-ele/src/views/_core/authentication/login.vue
index 3bcdd9500..6b9945396 100644
--- a/apps/web-ele/src/views/_core/authentication/login.vue
+++ b/apps/web-ele/src/views/_core/authentication/login.vue
@@ -1,18 +1,91 @@
 <script lang="ts" setup>
-import { AuthenticationLogin } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { BasicOption } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { AuthenticationLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 import { useAuthStore } from '#/store';
 
 defineOptions({ name: 'Login' });
 
 const authStore = useAuthStore();
+
+const MOCK_USER_OPTIONS: BasicOption[] = [
+  {
+    label: '超级管理员',
+    value: 'vben',
+  },
+  {
+    label: '管理员',
+    value: 'admin',
+  },
+  {
+    label: '用户',
+    value: 'jack',
+  },
+];
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: MOCK_USER_OPTIONS,
+        placeholder: $t('authentication.selectAccount'),
+      },
+      fieldName: 'selectAccount',
+      label: $t('authentication.selectAccount'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.selectAccount') })
+        .optional()
+        .default('vben'),
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      dependencies: {
+        trigger(values, form) {
+          if (values.selectAccount) {
+            const findUser = MOCK_USER_OPTIONS.find(
+              (item) => item.value === values.selectAccount,
+            );
+            if (findUser) {
+              form.setValues({
+                password: '123456',
+                username: findUser.value,
+              });
+            }
+          }
+        },
+        triggerFields: ['selectAccount'],
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+  ];
+});
 </script>
 
 <template>
   <AuthenticationLogin
+    :form-schema="formSchema"
     :loading="authStore.loginLoading"
-    password-placeholder="123456"
-    username-placeholder="vben"
     @submit="authStore.authLogin"
   />
 </template>
diff --git a/apps/web-ele/src/views/_core/authentication/register.vue b/apps/web-ele/src/views/_core/authentication/register.vue
index f6b227d96..5e0cad071 100644
--- a/apps/web-ele/src/views/_core/authentication/register.vue
+++ b/apps/web-ele/src/views/_core/authentication/register.vue
@@ -1,15 +1,91 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';
 
-import { ref } from 'vue';
+import { computed, h, ref } from 'vue';
 
-import { AuthenticationRegister } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationRegister, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'Register' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      renderComponentContent() {
+        return {
+          strengthText: () => $t('authentication.passwordStrength'),
+        };
+      },
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          const { password } = values;
+          return z
+            .string()
+            .min(1, { message: $t('authentication.passwordTip') })
+            .refine((value) => value === password, {
+              message: $t('authentication.confirmPasswordTip'),
+            });
+        },
+        triggerFields: ['password'],
+      },
+      fieldName: 'confirmPassword',
+      label: $t('authentication.confirmPassword'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenCheckbox',
+      fieldName: 'agreePolicy',
+      renderComponentContent: () => ({
+        default: () =>
+          h('span', [
+            $t('authentication.agree'),
+            h(
+              'a',
+              {
+                class:
+                  'cursor-pointer text-primary ml-1 hover:text-primary-hover',
+                href: '',
+              },
+              [
+                $t('authentication.privacyPolicy'),
+                '&',
+                $t('authentication.terms'),
+              ],
+            ),
+          ]),
+      }),
+      rules: z.boolean().refine((value) => !!value, {
+        message: $t('authentication.agreeTip'),
+      }),
+    },
+  ];
+});
+
 function handleSubmit(value: LoginAndRegisterParams) {
   // eslint-disable-next-line no-console
   console.log('register submit:', value);
@@ -18,8 +94,8 @@ function handleSubmit(value: LoginAndRegisterParams) {
 
 <template>
   <AuthenticationRegister
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleSubmit"
   />
 </template>
diff --git a/apps/web-naive/src/adapter/form.ts b/apps/web-naive/src/adapter/form.ts
new file mode 100644
index 000000000..73adb916f
--- /dev/null
+++ b/apps/web-naive/src/adapter/form.ts
@@ -0,0 +1,98 @@
+import type {
+  BaseFormComponentType,
+  VbenFormSchema as FormSchema,
+  VbenFormProps,
+} from '@vben/common-ui';
+
+import { h } from 'vue';
+
+import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import {
+  NButton,
+  NCheckbox,
+  NCheckboxGroup,
+  NDatePicker,
+  NDivider,
+  NInput,
+  NInputNumber,
+  NRadioGroup,
+  NSelect,
+  NSpace,
+  NSwitch,
+  NTimePicker,
+  NTreeSelect,
+  NUpload,
+} from 'naive-ui';
+// 业务表单组件适配
+
+export type FormComponentType =
+  | 'Checkbox'
+  | 'CheckboxGroup'
+  | 'DatePicker'
+  | 'Divider'
+  | 'Input'
+  | 'InputNumber'
+  | 'RadioGroup'
+  | 'Select'
+  | 'Space'
+  | 'Switch'
+  | 'TimePicker'
+  | 'TreeSelect'
+  | 'Upload'
+  | BaseFormComponentType;
+
+// 初始化表单组件，并注册到form组件内部
+setupVbenForm<FormComponentType>({
+  components: {
+    Checkbox: NCheckbox,
+    CheckboxGroup: NCheckboxGroup,
+    DatePicker: NDatePicker,
+    // 自定义默认的重置按钮
+    DefaultResetActionButton: (props, { attrs, slots }) => {
+      return h(NButton, { ...props, attrs, text: false, type: 'info' }, slots);
+    },
+    // 自定义默认的提交按钮
+    DefaultSubmitActionButton: (props, { attrs, slots }) => {
+      return h(
+        NButton,
+        { ...props, attrs, text: false, type: 'primary' },
+        slots,
+      );
+    },
+    Divider: NDivider,
+    Input: NInput,
+    InputNumber: NInputNumber,
+    RadioGroup: NRadioGroup,
+    Select: NSelect,
+    Space: NSpace,
+    Switch: NSwitch,
+    TimePicker: NTimePicker,
+    TreeSelect: NTreeSelect,
+    Upload: NUpload,
+  },
+  config: {
+    baseModelPropName: 'value',
+    modelPropNameMap: {
+      Checkbox: 'checked',
+      Radio: 'checked',
+      Upload: 'fileList',
+    },
+  },
+  defineRules: {
+    required: (value, _params, ctx) => {
+      if ((!value && value !== 0) || value.length === 0) {
+        return $t('formRules.required', [ctx.label]);
+      }
+      return true;
+    },
+  },
+});
+
+const useVbenForm = useForm<FormComponentType>;
+
+export { useVbenForm, z };
+
+export type VbenFormSchema = FormSchema<FormComponentType>;
+export type { VbenFormProps };
diff --git a/apps/web-naive/src/adapter/index.ts b/apps/web-naive/src/adapter/index.ts
new file mode 100644
index 000000000..698d687b9
--- /dev/null
+++ b/apps/web-naive/src/adapter/index.ts
@@ -0,0 +1 @@
+export * from './form';
diff --git a/apps/web-naive/src/layouts/basic.vue b/apps/web-naive/src/layouts/basic.vue
index 9e25d99f3..3c302634b 100644
--- a/apps/web-naive/src/layouts/basic.vue
+++ b/apps/web-naive/src/layouts/basic.vue
@@ -13,11 +13,12 @@ import {
   UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import { storeToRefs, useAccessStore, useUserStore } from '@vben/stores';
+import { useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
 import { $t } from '#/locales';
 import { useAuthStore } from '#/store';
+import LoginForm from '#/views/_core/authentication/login.vue';
 
 const notifications = ref<NotificationItem[]>([
   {
@@ -87,8 +88,6 @@ const menus = computed(() => [
   },
 ]);
 
-const { loginLoading } = storeToRefs(authStore);
-
 const avatar = computed(() => {
   return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
 });
@@ -130,11 +129,9 @@ function handleMakeAll() {
       <AuthenticationLoginExpiredModal
         v-model:open="accessStore.loginExpired"
         :avatar
-        :loading="loginLoading"
-        password-placeholder="123456"
-        username-placeholder="vben"
-        @submit="authStore.authLogin"
-      />
+      >
+        <LoginForm />
+      </AuthenticationLoginExpiredModal>
     </template>
     <template #lock-screen>
       <LockScreen :avatar @to-login="handleLogout" />
diff --git a/apps/web-naive/src/views/_core/authentication/code-login.vue b/apps/web-naive/src/views/_core/authentication/code-login.vue
index 36cf50ec0..03cf55028 100644
--- a/apps/web-naive/src/views/_core/authentication/code-login.vue
+++ b/apps/web-naive/src/views/_core/authentication/code-login.vue
@@ -1,15 +1,49 @@
 <script lang="ts" setup>
-import type { LoginCodeParams } from '@vben/common-ui';
+import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
-import { AuthenticationCodeLogin } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationCodeLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'CodeLogin' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.mobile'),
+      },
+      fieldName: 'phoneNumber',
+      label: $t('authentication.mobile'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.mobileTip') })
+        .refine((v) => /^\d{11}$/.test(v), {
+          message: $t('authentication.mobileErrortip'),
+        }),
+    },
+    {
+      component: 'VbenPinInput',
+      componentProps: {
+        createText: (countdown: number) => {
+          const text =
+            countdown > 0
+              ? $t('authentication.sendText', [countdown])
+              : $t('authentication.sendCode');
+          return text;
+        },
+        placeholder: $t('authentication.code'),
+      },
+      fieldName: 'code',
+      label: $t('authentication.code'),
+      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+    },
+  ];
+});
 /**
  * 异步处理登录操作
  * Asynchronously handle the login process
@@ -23,8 +57,8 @@ async function handleLogin(values: LoginCodeParams) {
 
 <template>
   <AuthenticationCodeLogin
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleLogin"
   />
 </template>
diff --git a/apps/web-naive/src/views/_core/authentication/forget-password.vue b/apps/web-naive/src/views/_core/authentication/forget-password.vue
index 74ccc27ed..6cedf3e8a 100644
--- a/apps/web-naive/src/views/_core/authentication/forget-password.vue
+++ b/apps/web-naive/src/views/_core/authentication/forget-password.vue
@@ -1,13 +1,32 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { VbenFormSchema } from '@vben/common-ui';
 
-import { AuthenticationForgetPassword } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { computed, ref } from 'vue';
+
+import { AuthenticationForgetPassword, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'ForgetPassword' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: 'example@example.com',
+      },
+      fieldName: 'email',
+      label: $t('authentication.email'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.emailTip') })
+        .email($t('authentication.emailValidErrorTip')),
+    },
+  ];
+});
+
 function handleSubmit(value: string) {
   // eslint-disable-next-line no-console
   console.log('reset email:', value);
@@ -16,8 +35,8 @@ function handleSubmit(value: string) {
 
 <template>
   <AuthenticationForgetPassword
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleSubmit"
   />
 </template>
diff --git a/apps/web-naive/src/views/_core/authentication/login.vue b/apps/web-naive/src/views/_core/authentication/login.vue
index 3bcdd9500..6b9945396 100644
--- a/apps/web-naive/src/views/_core/authentication/login.vue
+++ b/apps/web-naive/src/views/_core/authentication/login.vue
@@ -1,18 +1,91 @@
 <script lang="ts" setup>
-import { AuthenticationLogin } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { BasicOption } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { AuthenticationLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 import { useAuthStore } from '#/store';
 
 defineOptions({ name: 'Login' });
 
 const authStore = useAuthStore();
+
+const MOCK_USER_OPTIONS: BasicOption[] = [
+  {
+    label: '超级管理员',
+    value: 'vben',
+  },
+  {
+    label: '管理员',
+    value: 'admin',
+  },
+  {
+    label: '用户',
+    value: 'jack',
+  },
+];
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: MOCK_USER_OPTIONS,
+        placeholder: $t('authentication.selectAccount'),
+      },
+      fieldName: 'selectAccount',
+      label: $t('authentication.selectAccount'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.selectAccount') })
+        .optional()
+        .default('vben'),
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      dependencies: {
+        trigger(values, form) {
+          if (values.selectAccount) {
+            const findUser = MOCK_USER_OPTIONS.find(
+              (item) => item.value === values.selectAccount,
+            );
+            if (findUser) {
+              form.setValues({
+                password: '123456',
+                username: findUser.value,
+              });
+            }
+          }
+        },
+        triggerFields: ['selectAccount'],
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+  ];
+});
 </script>
 
 <template>
   <AuthenticationLogin
+    :form-schema="formSchema"
     :loading="authStore.loginLoading"
-    password-placeholder="123456"
-    username-placeholder="vben"
     @submit="authStore.authLogin"
   />
 </template>
diff --git a/apps/web-naive/src/views/_core/authentication/register.vue b/apps/web-naive/src/views/_core/authentication/register.vue
index f6b227d96..5e0cad071 100644
--- a/apps/web-naive/src/views/_core/authentication/register.vue
+++ b/apps/web-naive/src/views/_core/authentication/register.vue
@@ -1,15 +1,91 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';
 
-import { ref } from 'vue';
+import { computed, h, ref } from 'vue';
 
-import { AuthenticationRegister } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationRegister, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'Register' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      renderComponentContent() {
+        return {
+          strengthText: () => $t('authentication.passwordStrength'),
+        };
+      },
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          const { password } = values;
+          return z
+            .string()
+            .min(1, { message: $t('authentication.passwordTip') })
+            .refine((value) => value === password, {
+              message: $t('authentication.confirmPasswordTip'),
+            });
+        },
+        triggerFields: ['password'],
+      },
+      fieldName: 'confirmPassword',
+      label: $t('authentication.confirmPassword'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenCheckbox',
+      fieldName: 'agreePolicy',
+      renderComponentContent: () => ({
+        default: () =>
+          h('span', [
+            $t('authentication.agree'),
+            h(
+              'a',
+              {
+                class:
+                  'cursor-pointer text-primary ml-1 hover:text-primary-hover',
+                href: '',
+              },
+              [
+                $t('authentication.privacyPolicy'),
+                '&',
+                $t('authentication.terms'),
+              ],
+            ),
+          ]),
+      }),
+      rules: z.boolean().refine((value) => !!value, {
+        message: $t('authentication.agreeTip'),
+      }),
+    },
+  ];
+});
+
 function handleSubmit(value: LoginAndRegisterParams) {
   // eslint-disable-next-line no-console
   console.log('register submit:', value);
@@ -18,8 +94,8 @@ function handleSubmit(value: LoginAndRegisterParams) {
 
 <template>
   <AuthenticationRegister
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleSubmit"
   />
 </template>
diff --git a/docs/.vitepress/config/zh.mts b/docs/.vitepress/config/zh.mts
index 2a1772f33..e713a31b0 100644
--- a/docs/.vitepress/config/zh.mts
+++ b/docs/.vitepress/config/zh.mts
@@ -160,6 +160,10 @@ function sidebarComponents(): DefaultTheme.SidebarItem[] {
           link: 'common-ui/vben-drawer',
           text: 'Vben Drawer 抽屉',
         },
+        {
+          link: 'common-ui/vben-form',
+          text: 'Vben Form 表单',
+        },
       ],
     },
   ];
diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md
new file mode 100644
index 000000000..834a129ad
--- /dev/null
+++ b/docs/src/components/common-ui/vben-form.md
@@ -0,0 +1,11 @@
+---
+outline: deep
+---
+
+# Vben Form 表单
+
+框架提供的表单组件，可适配 `Element Plus`、`Ant Design Vue`、`Naive`UI 框架。
+
+# 使用
+
+TODO
diff --git a/docs/src/en/guide/in-depth/login.md b/docs/src/en/guide/in-depth/login.md
index ac57a3200..f0ca41be4 100644
--- a/docs/src/en/guide/in-depth/login.md
+++ b/docs/src/en/guide/in-depth/login.md
@@ -61,11 +61,6 @@ If you want to adjust the content of the login form, you can configure the `Auth
    */
   loading?: boolean;
 
-  /**
-   * @en Password placeholder
-   */
-  passwordPlaceholder?: string;
-
   /**
    * @en QR code login path
    */
@@ -114,11 +109,6 @@ If you want to adjust the content of the login form, you can configure the `Auth
    * @en Login box title
    */
   title?: string;
-
-  /**
-   * @en Username placeholder
-   */
-  usernamePlaceholder?: string;
 }
 ```
 
diff --git a/docs/src/guide/in-depth/login.md b/docs/src/guide/in-depth/login.md
index 108b1b45b..81d294185 100644
--- a/docs/src/guide/in-depth/login.md
+++ b/docs/src/guide/in-depth/login.md
@@ -54,11 +54,6 @@
    */
   loading?: boolean;
 
-  /**
-   * @zh_CN 密码占位符
-   */
-  passwordPlaceholder?: string;
-
   /**
    * @zh_CN 二维码登录路径
    */
@@ -108,10 +103,6 @@
    */
   title?: string;
 
-  /**
-   * @zh_CN 用户名占位符
-   */
-  usernamePlaceholder?: string;
 }
 ```
 
diff --git a/internal/lint-configs/eslint-config/src/configs/unicorn.ts b/internal/lint-configs/eslint-config/src/configs/unicorn.ts
index 1788bedf2..a160726fb 100644
--- a/internal/lint-configs/eslint-config/src/configs/unicorn.ts
+++ b/internal/lint-configs/eslint-config/src/configs/unicorn.ts
@@ -15,12 +15,14 @@ export async function unicorn(): Promise<Linter.Config[]> {
       rules: {
         ...pluginUnicorn.configs.recommended.rules,
 
+        'unicorn/better-regex': 'off',
         'unicorn/consistent-destructuring': 'off',
         'unicorn/consistent-function-scoping': 'off',
         'unicorn/filename-case': 'off',
         'unicorn/import-style': 'off',
         'unicorn/no-array-for-each': 'off',
         'unicorn/no-null': 'off',
+        'unicorn/no-useless-undefined': 'off',
         'unicorn/prefer-at': 'off',
         'unicorn/prefer-dom-node-text-content': 'off',
         'unicorn/prefer-export-from': ['error', { ignoreUsedVariables: true }],
diff --git a/internal/vite-config/src/config/application.ts b/internal/vite-config/src/config/application.ts
index 067d17bae..184a8f190 100644
--- a/internal/vite-config/src/config/application.ts
+++ b/internal/vite-config/src/config/application.ts
@@ -81,7 +81,11 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) {
         port,
         warmup: {
           // 预热文件
-          clientFiles: ['./index.html', './src/{views,layouts,router,store}/*'],
+          clientFiles: [
+            './index.html',
+            './bootstrap.ts',
+            './src/{views,layouts,router,store,api}/*',
+          ],
         },
       },
     };
diff --git a/internal/vite-config/src/plugins/archiver.ts b/internal/vite-config/src/plugins/archiver.ts
index ea04ce07e..8eec8a0e9 100644
--- a/internal/vite-config/src/plugins/archiver.ts
+++ b/internal/vite-config/src/plugins/archiver.ts
@@ -3,6 +3,7 @@ import type { PluginOption } from 'vite';
 import type { ArchiverPluginOptions } from '../typing';
 
 import fs from 'node:fs';
+import fsp from 'node:fs/promises';
 import { join } from 'node:path';
 
 import archiver from 'archiver';
@@ -18,7 +19,14 @@ export const viteArchiverPlugin = (
 
         setTimeout(async () => {
           const folderToZip = 'dist';
-          const zipOutputPath = join(process.cwd(), outputDir, `${name}.zip`);
+
+          const zipOutputDir = join(process.cwd(), outputDir);
+          const zipOutputPath = join(zipOutputDir, `${name}.zip`);
+          try {
+            await fsp.mkdir(zipOutputDir, { recursive: true });
+          } catch {
+            // ignore
+          }
 
           try {
             await zipFolder(folderToZip, zipOutputPath);
diff --git a/packages/@core/base/design/src/css/global.css b/packages/@core/base/design/src/css/global.css
index 8c2baf119..9fb8c9c79 100644
--- a/packages/@core/base/design/src/css/global.css
+++ b/packages/@core/base/design/src/css/global.css
@@ -23,12 +23,15 @@
     scroll-behavior: smooth;
     text-rendering: optimizelegibility;
     -webkit-tap-highlight-color: transparent;
+
+    /* -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale; */
   }
 
   #app,
   body,
   html {
-    @apply !pointer-events-auto size-full overscroll-none;
+    @apply size-full overscroll-none;
   }
 
   body {
diff --git a/packages/@core/base/icons/src/lucide.ts b/packages/@core/base/icons/src/lucide.ts
index 22de4a150..6e99dcf21 100644
--- a/packages/@core/base/icons/src/lucide.ts
+++ b/packages/@core/base/icons/src/lucide.ts
@@ -18,7 +18,6 @@ export {
   CircleHelp,
   Copy,
   CornerDownLeft,
-  Disc as IconDefault,
   Ellipsis,
   Expand,
   ExternalLink,
@@ -35,6 +34,7 @@ export {
   LogOut,
   MailCheck,
   Maximize,
+  Menu as IconDefault,
   Menu,
   Minimize,
   Minimize2,
diff --git a/packages/@core/base/shared/build.config.ts b/packages/@core/base/shared/build.config.ts
index cd8b6c5cc..9406af744 100644
--- a/packages/@core/base/shared/build.config.ts
+++ b/packages/@core/base/shared/build.config.ts
@@ -4,7 +4,6 @@ export default defineBuildConfig({
   clean: true,
   declaration: true,
   entries: [
-    'src/index',
     'src/store',
     'src/constants/index',
     'src/utils/index',
diff --git a/packages/@core/base/shared/package.json b/packages/@core/base/shared/package.json
index e03a63b1f..35a6f610e 100644
--- a/packages/@core/base/shared/package.json
+++ b/packages/@core/base/shared/package.json
@@ -17,14 +17,7 @@
     "dist"
   ],
   "sideEffects": false,
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
   "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "development": "./src/index.ts",
-      "default": "./dist/index.mjs"
-    },
     "./constants": {
       "types": "./src/constants/index.ts",
       "development": "./src/constants/index.ts",
@@ -53,9 +46,25 @@
   },
   "publishConfig": {
     "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.mjs"
+      "./constants": {
+        "types": "./dist/constants/index.d.ts",
+        "default": "./dist/constants/index.mjs"
+      },
+      "./utils": {
+        "types": "./dist/utils/index.d.ts",
+        "default": "./dist/utils/index.mjs"
+      },
+      "./color": {
+        "types": "./dist/color/index.d.ts",
+        "default": "./dist/color/index.mjs"
+      },
+      "./cache": {
+        "types": "./dist/cache/index.d.ts",
+        "default": "./dist/cache/index.mjs"
+      },
+      "./store": {
+        "types": "./dist/store/index.d.ts",
+        "default": "./dist/store.mjs"
       }
     }
   },
diff --git a/packages/@core/base/shared/src/index.ts b/packages/@core/base/shared/src/index.ts
deleted file mode 100644
index 3ec6612fb..000000000
--- a/packages/@core/base/shared/src/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './cache';
-export * from './color';
-export * from './constants';
-export * from './store';
-export * from './utils';
diff --git a/packages/@core/base/shared/src/utils/__tests__/state-handler.test.ts b/packages/@core/base/shared/src/utils/__tests__/state-handler.test.ts
new file mode 100644
index 000000000..d11be0681
--- /dev/null
+++ b/packages/@core/base/shared/src/utils/__tests__/state-handler.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest';
+
+import { StateHandler } from '../state-handler';
+
+describe('stateHandler', () => {
+  it('should resolve when condition is set to true', async () => {
+    const handler = new StateHandler();
+
+    // 模拟异步设置 condition 为 true
+    setTimeout(() => {
+      handler.setConditionTrue(); // 明确触发 condition 为 true
+    }, 10);
+
+    // 等待条件被设置为 true
+    await handler.waitForCondition();
+    expect(handler.isConditionTrue()).toBe(true);
+  });
+
+  it('should resolve immediately if condition is already true', async () => {
+    const handler = new StateHandler();
+    handler.setConditionTrue(); // 提前设置为 true
+
+    // 立即 resolve，因为 condition 已经是 true
+    await handler.waitForCondition();
+    expect(handler.isConditionTrue()).toBe(true);
+  });
+
+  it('should reject when condition is set to false after waiting', async () => {
+    const handler = new StateHandler();
+
+    // 模拟异步设置 condition 为 false
+    setTimeout(() => {
+      handler.setConditionFalse(); // 明确触发 condition 为 false
+    }, 10);
+
+    // 等待过程中，期望 Promise 被 reject
+    await expect(handler.waitForCondition()).rejects.toThrow();
+    expect(handler.isConditionTrue()).toBe(false);
+  });
+
+  it('should reset condition to false', () => {
+    const handler = new StateHandler();
+    handler.setConditionTrue(); // 设置为 true
+    handler.reset(); // 重置为 false
+
+    expect(handler.isConditionTrue()).toBe(false);
+  });
+
+  it('should resolve when condition is set to true after reset', async () => {
+    const handler = new StateHandler();
+    handler.reset(); // 确保初始为 false
+
+    setTimeout(() => {
+      handler.setConditionTrue(); // 重置后设置为 true
+    }, 10);
+
+    await handler.waitForCondition();
+    expect(handler.isConditionTrue()).toBe(true);
+  });
+});
diff --git a/packages/@core/base/shared/src/utils/__tests__/util.test.ts b/packages/@core/base/shared/src/utils/__tests__/util.test.ts
new file mode 100644
index 000000000..992145cac
--- /dev/null
+++ b/packages/@core/base/shared/src/utils/__tests__/util.test.ts
@@ -0,0 +1,80 @@
+import { describe, expect, it } from 'vitest';
+
+import { bindMethods } from '../util';
+
+class TestClass {
+  public value: string;
+
+  constructor(value: string) {
+    this.value = value;
+    bindMethods(this); // 调用通用方法
+  }
+
+  getValue() {
+    return this.value;
+  }
+
+  setValue(newValue: string) {
+    this.value = newValue;
+  }
+}
+
+describe('bindMethods', () => {
+  it('should bind methods to the instance correctly', () => {
+    const instance = new TestClass('initial');
+
+    // 解构方法
+    const { getValue } = instance;
+
+    // 检查 getValue 是否能正确调用，并且 this 绑定了 instance
+    expect(getValue()).toBe('initial');
+  });
+
+  it('should bind multiple methods', () => {
+    const instance = new TestClass('initial');
+
+    const { getValue, setValue } = instance;
+
+    // 检查 getValue 和 setValue 方法是否正确绑定了 this
+    setValue('newValue');
+    expect(getValue()).toBe('newValue');
+  });
+
+  it('should not bind non-function properties', () => {
+    const instance = new TestClass('initial');
+
+    // 检查普通属性是否保持原样
+    expect(instance.value).toBe('initial');
+  });
+
+  it('should not bind constructor method', () => {
+    const instance = new TestClass('test');
+
+    // 检查 constructor 是否没有被绑定
+    expect(instance.constructor.name).toBe('TestClass');
+  });
+
+  it('should not bind getter/setter properties', () => {
+    class TestWithGetterSetter {
+      private _value: string = 'test';
+
+      constructor() {
+        bindMethods(this);
+      }
+
+      get value() {
+        return this._value;
+      }
+
+      set value(newValue: string) {
+        this._value = newValue;
+      }
+    }
+
+    const instance = new TestWithGetterSetter();
+    const { value } = instance;
+
+    // Getter 和 setter 不应被绑定
+    expect(value).toBe('test');
+  });
+});
diff --git a/packages/@core/base/shared/src/utils/index.ts b/packages/@core/base/shared/src/utils/index.ts
index 1b55eaf4d..e5526edf0 100644
--- a/packages/@core/base/shared/src/utils/index.ts
+++ b/packages/@core/base/shared/src/utils/index.ts
@@ -5,9 +5,11 @@ export * from './inference';
 export * from './letter';
 export * from './merge';
 export * from './nprogress';
+export * from './state-handler';
 export * from './to';
 export * from './tree';
 export * from './unique';
 export * from './update-css-variables';
+export * from './util';
 export * from './window';
 export { default as cloneDeep } from 'lodash.clonedeep';
diff --git a/packages/@core/base/shared/src/utils/state-handler.ts b/packages/@core/base/shared/src/utils/state-handler.ts
new file mode 100644
index 000000000..cef1bd8f3
--- /dev/null
+++ b/packages/@core/base/shared/src/utils/state-handler.ts
@@ -0,0 +1,50 @@
+export class StateHandler {
+  private condition: boolean = false;
+  private rejectCondition: (() => void) | null = null;
+  private resolveCondition: (() => void) | null = null;
+
+  // 清理 resolve/reject 函数
+  private clearPromises() {
+    this.resolveCondition = null;
+    this.rejectCondition = null;
+  }
+
+  isConditionTrue(): boolean {
+    return this.condition;
+  }
+
+  reset() {
+    this.condition = false;
+    this.clearPromises();
+  }
+
+  // 触发状态为 false 时，reject
+  setConditionFalse() {
+    this.condition = false;
+    if (this.rejectCondition) {
+      this.rejectCondition();
+      this.clearPromises();
+    }
+  }
+
+  // 触发状态为 true 时，resolve
+  setConditionTrue() {
+    this.condition = true;
+    if (this.resolveCondition) {
+      this.resolveCondition();
+      this.clearPromises();
+    }
+  }
+
+  // 返回一个 Promise，等待 condition 变为 true
+  waitForCondition(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (this.condition) {
+        resolve(); // 如果 condition 已经为 true，立即 resolve
+      } else {
+        this.resolveCondition = resolve;
+        this.rejectCondition = reject;
+      }
+    });
+  }
+}
diff --git a/packages/@core/base/shared/src/utils/util.ts b/packages/@core/base/shared/src/utils/util.ts
new file mode 100644
index 000000000..7f9a620c7
--- /dev/null
+++ b/packages/@core/base/shared/src/utils/util.ts
@@ -0,0 +1,19 @@
+export function bindMethods<T extends object>(instance: T): void {
+  const prototype = Object.getPrototypeOf(instance);
+  const propertyNames = Object.getOwnPropertyNames(prototype);
+
+  propertyNames.forEach((propertyName) => {
+    const descriptor = Object.getOwnPropertyDescriptor(prototype, propertyName);
+    const propertyValue = instance[propertyName as keyof T];
+
+    if (
+      typeof propertyValue === 'function' &&
+      propertyName !== 'constructor' &&
+      descriptor &&
+      !descriptor.get &&
+      !descriptor.set
+    ) {
+      instance[propertyName as keyof T] = propertyValue.bind(instance);
+    }
+  });
+}
diff --git a/packages/@core/composables/src/use-content-style.ts b/packages/@core/composables/src/use-content-style.ts
index 384d0fa38..4aea499c9 100644
--- a/packages/@core/composables/src/use-content-style.ts
+++ b/packages/@core/composables/src/use-content-style.ts
@@ -4,9 +4,11 @@ import { computed, onMounted, onUnmounted, ref } from 'vue';
 import {
   CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT,
   CSS_VARIABLE_LAYOUT_CONTENT_WIDTH,
+} from '@vben-core/shared/constants';
+import {
   getElementVisibleRect,
   type VisibleDomRect,
-} from '@vben-core/shared';
+} from '@vben-core/shared/utils';
 
 import { useCssVar, useDebounceFn } from '@vueuse/core';
 
diff --git a/packages/@core/composables/src/use-namespace.ts b/packages/@core/composables/src/use-namespace.ts
index 5aae03ad6..b22cf0367 100644
--- a/packages/@core/composables/src/use-namespace.ts
+++ b/packages/@core/composables/src/use-namespace.ts
@@ -1,4 +1,4 @@
-import { DEFAULT_NAMESPACE } from '@vben-core/shared';
+import { DEFAULT_NAMESPACE } from '@vben-core/shared/constants';
 
 /**
  * @see copy https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-namespace/index.ts
diff --git a/packages/@core/composables/src/use-priority-value.ts b/packages/@core/composables/src/use-priority-value.ts
index a2bb4f865..d29e894e3 100644
--- a/packages/@core/composables/src/use-priority-value.ts
+++ b/packages/@core/composables/src/use-priority-value.ts
@@ -1,10 +1,10 @@
-import type { Ref } from 'vue';
-import { computed, getCurrentInstance, useAttrs, useSlots } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
+import { computed, getCurrentInstance, unref, useAttrs, useSlots } from 'vue';
 
 import {
   getFirstNonNullOrUndefined,
   kebabToCamelCase,
-} from '@vben-core/shared';
+} from '@vben-core/shared/utils';
 
 /**
  * 依次从插槽、attrs、props、state 中获取值
@@ -45,3 +45,49 @@ export function usePriorityValue<
 
   return value;
 }
+
+/**
+ * 批量获取state中的值（每个值都是ref）
+ * @param props
+ * @param state
+ */
+export function usePriorityValues<
+  T extends Record<string, any>,
+  S extends Ref<Record<string, any>> = Readonly<Ref<NoInfer<T>, NoInfer<T>>>,
+>(props: T, state: S | undefined) {
+  const result: { [K in keyof T]: ComputedRef<T[K]> } = {} as never;
+
+  (Object.keys(props) as (keyof T)[]).forEach((key) => {
+    result[key] = usePriorityValue(key as keyof typeof props, props, state);
+  });
+
+  return result;
+}
+
+/**
+ * 批量获取state中的值（集中在一个computed，用于透传）
+ * @param props
+ * @param state
+ */
+export function useForwardPriorityValues<
+  T extends Record<string, any>,
+  S extends Ref<Record<string, any>> = Readonly<Ref<NoInfer<T>, NoInfer<T>>>,
+>(props: T, state: S | undefined) {
+  const computedResult: { [K in keyof T]: ComputedRef<T[K]> } = {} as never;
+
+  (Object.keys(props) as (keyof T)[]).forEach((key) => {
+    computedResult[key] = usePriorityValue(
+      key as keyof typeof props,
+      props,
+      state,
+    );
+  });
+
+  return computed(() => {
+    const unwrapResult: Record<string, any> = {};
+    Object.keys(props).forEach((key) => {
+      unwrapResult[key] = unref(computedResult[key]);
+    });
+    return unwrapResult as { [K in keyof T]: T[K] };
+  });
+}
diff --git a/packages/@core/composables/src/use-simple-locale/messages.ts b/packages/@core/composables/src/use-simple-locale/messages.ts
index d3b30dc11..4b1eca29b 100644
--- a/packages/@core/composables/src/use-simple-locale/messages.ts
+++ b/packages/@core/composables/src/use-simple-locale/messages.ts
@@ -3,11 +3,19 @@ export type Locale = 'en-US' | 'zh-CN';
 export const messages: Record<Locale, Record<string, string>> = {
   'en-US': {
     cancel: 'Cancel',
+    collapse: 'Collapse',
     confirm: 'Confirm',
+    expand: 'Expand',
+    reset: 'Reset',
+    submit: 'Submit',
   },
   'zh-CN': {
     cancel: '取消',
+    collapse: '收起',
     confirm: '确认',
+    expand: '展开',
+    reset: '重置',
+    submit: '提交',
   },
 };
 
diff --git a/packages/@core/preferences/src/preferences.ts b/packages/@core/preferences/src/preferences.ts
index 4670c07cf..7c1843f8c 100644
--- a/packages/@core/preferences/src/preferences.ts
+++ b/packages/@core/preferences/src/preferences.ts
@@ -4,7 +4,8 @@ import type { InitialOptions, Preferences } from './types';
 
 import { markRaw, reactive, readonly, watch } from 'vue';
 
-import { isMacOs, merge, StorageManager } from '@vben-core/shared';
+import { StorageManager } from '@vben-core/shared/cache';
+import { isMacOs, merge } from '@vben-core/shared/utils';
 
 import {
   breakpointsTailwind,
diff --git a/packages/@core/preferences/src/update-css-variables.ts b/packages/@core/preferences/src/update-css-variables.ts
index a11522e36..507da91cf 100644
--- a/packages/@core/preferences/src/update-css-variables.ts
+++ b/packages/@core/preferences/src/update-css-variables.ts
@@ -1,9 +1,7 @@
 import type { Preferences } from './types';
 
-import {
-  updateCSSVariables as executeUpdateCSSVariables,
-  generatorColorVariables,
-} from '@vben-core/shared';
+import { generatorColorVariables } from '@vben-core/shared/color';
+import { updateCSSVariables as executeUpdateCSSVariables } from '@vben-core/shared/utils';
 
 import { BUILT_IN_THEME_PRESETS } from './constants';
 
diff --git a/packages/@core/preferences/src/use-preferences.ts b/packages/@core/preferences/src/use-preferences.ts
index 2e895150c..a5068771d 100644
--- a/packages/@core/preferences/src/use-preferences.ts
+++ b/packages/@core/preferences/src/use-preferences.ts
@@ -1,6 +1,6 @@
 import { computed } from 'vue';
 
-import { diff } from '@vben-core/shared';
+import { diff } from '@vben-core/shared/utils';
 
 import { preferencesManager } from './preferences';
 import { isDarkTheme } from './update-css-variables';
diff --git a/packages/@core/ui-kit/form-ui/build.config.ts b/packages/@core/ui-kit/form-ui/build.config.ts
new file mode 100644
index 000000000..18eaa604c
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/build.config.ts
@@ -0,0 +1,21 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: [
+    {
+      builder: 'mkdist',
+      input: './src',
+      loaders: ['vue'],
+      pattern: ['**/*.vue'],
+    },
+    {
+      builder: 'mkdist',
+      format: 'esm',
+      input: './src',
+      loaders: ['js'],
+      pattern: ['**/*.ts'],
+    },
+  ],
+});
diff --git a/packages/@core/ui-kit/form-ui/package.json b/packages/@core/ui-kit/form-ui/package.json
new file mode 100644
index 000000000..6eaf821ef
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "@vben-core/form-ui",
+  "version": "5.2.1",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@vben-core/uikit/form-ui"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm unbuild",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "dependencies": {
+    "@vben-core/composables": "workspace:*",
+    "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/shared": "workspace:*",
+    "@vee-validate/zod": "^4.13.2",
+    "@vueuse/core": "^11.0.3",
+    "vee-validate": "^4.13.2",
+    "vue": "^3.5.3",
+    "zod": "^3.23.8",
+    "zod-defaults": "^0.1.3"
+  }
+}
diff --git a/packages/@core/ui-kit/form-ui/postcss.config.mjs b/packages/@core/ui-kit/form-ui/postcss.config.mjs
new file mode 100644
index 000000000..3d8070455
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/postcss.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config/postcss';
diff --git a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
new file mode 100644
index 000000000..2f2b95ec4
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed, toRaw, unref } from 'vue';
+
+import { useSimpleLocale } from '@vben-core/composables';
+import { VbenExpandableArrow } from '@vben-core/shadcn-ui';
+import { cn, isFunction } from '@vben-core/shared/utils';
+
+import { COMPONENT_MAP } from '../config';
+import { injectFormProps } from '../use-form-context';
+
+const { $t } = useSimpleLocale();
+
+const [rootProps, form] = injectFormProps();
+
+const collapsed = defineModel({ default: false });
+
+const resetButtonOptions = computed(() => {
+  return {
+    show: true,
+    text: `${$t.value('reset')}`,
+    ...unref(rootProps).resetButtonOptions,
+  };
+});
+
+const submitButtonOptions = computed(() => {
+  return {
+    show: true,
+    text: `${$t.value('submit')}`,
+    ...unref(rootProps).submitButtonOptions,
+  };
+});
+
+const isQueryForm = computed(() => {
+  return !!unref(rootProps).showCollapseButton;
+});
+
+const queryFormStyle = computed(() => {
+  if (isQueryForm.value) {
+    return {
+      'grid-column': `-2 / -1`,
+      marginLeft: 'auto',
+    };
+  }
+
+  return {};
+});
+
+async function handleSubmit(e: Event) {
+  e?.preventDefault();
+  e?.stopPropagation();
+  const { valid } = await form.validate();
+  if (!valid) {
+    return;
+  }
+  await unref(rootProps).handleSubmit?.(toRaw(form.values));
+}
+
+async function handleReset(e: Event) {
+  e?.preventDefault();
+  e?.stopPropagation();
+  const props = unref(rootProps);
+  if (isFunction(props.handleReset)) {
+    await props.handleReset?.(form.values);
+  } else {
+    form.resetForm();
+  }
+}
+</script>
+<template>
+  <div
+    :class="cn('col-span-full w-full text-right', rootProps.actionWrapperClass)"
+    :style="queryFormStyle"
+  >
+    <component
+      :is="COMPONENT_MAP.DefaultResetActionButton"
+      v-if="resetButtonOptions.show"
+      class="mr-3"
+      type="button"
+      @click="handleReset"
+      v-bind="resetButtonOptions"
+    >
+      {{ resetButtonOptions.text }}
+    </component>
+
+    <component
+      :is="COMPONENT_MAP.DefaultSubmitActionButton"
+      v-if="submitButtonOptions.show"
+      type="button"
+      @click="handleSubmit"
+      v-bind="submitButtonOptions"
+    >
+      {{ submitButtonOptions.text }}
+    </component>
+
+    <VbenExpandableArrow
+      v-if="rootProps.showCollapseButton"
+      v-model:model-value="collapsed"
+      class="ml-2"
+    >
+      <span>{{ collapsed ? $t('expand') : $t('collapse') }}</span>
+    </VbenExpandableArrow>
+  </div>
+</template>
diff --git a/packages/@core/ui-kit/form-ui/src/config.ts b/packages/@core/ui-kit/form-ui/src/config.ts
new file mode 100644
index 000000000..0ab8ce343
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/config.ts
@@ -0,0 +1,65 @@
+import type { BaseFormComponentType, VbenFormAdapterOptions } from './types';
+
+import type { Component } from 'vue';
+import { h } from 'vue';
+
+import {
+  VbenButton,
+  VbenCheckbox,
+  Input as VbenInput,
+  VbenInputPassword,
+  VbenPinInput,
+  VbenSelect,
+} from '@vben-core/shadcn-ui';
+
+import { defineRule } from 'vee-validate';
+
+const DEFAULT_MODEL_PROP_NAME = 'modelValue';
+
+export const COMPONENT_MAP: Record<BaseFormComponentType, Component> = {
+  DefaultResetActionButton: h(VbenButton, { size: 'sm', variant: 'outline' }),
+  DefaultSubmitActionButton: h(VbenButton, { size: 'sm', variant: 'default' }),
+  VbenCheckbox,
+  VbenInput,
+  VbenInputPassword,
+  VbenPinInput,
+  VbenSelect,
+};
+
+export const COMPONENT_BIND_EVENT_MAP: Partial<
+  Record<BaseFormComponentType, string>
+> = {
+  VbenCheckbox: 'checked',
+};
+
+export function setupVbenForm<
+  T extends BaseFormComponentType = BaseFormComponentType,
+>(options: VbenFormAdapterOptions<T>) {
+  const { components, config, defineRules } = options;
+
+  if (defineRules) {
+    for (const key of Object.keys(defineRules)) {
+      defineRule(key, defineRules[key as never]);
+    }
+  }
+
+  const baseModelPropName =
+    config?.baseModelPropName ?? DEFAULT_MODEL_PROP_NAME;
+  const modelPropNameMap = config?.modelPropNameMap as
+    | Record<BaseFormComponentType, string>
+    | undefined;
+
+  for (const component of Object.keys(components)) {
+    const key = component as BaseFormComponentType;
+    COMPONENT_MAP[key] = components[component as never];
+
+    if (baseModelPropName !== DEFAULT_MODEL_PROP_NAME) {
+      COMPONENT_BIND_EVENT_MAP[key] = baseModelPropName;
+    }
+
+    // 覆盖特殊组件的modelPropName
+    if (modelPropNameMap && modelPropNameMap[key]) {
+      COMPONENT_BIND_EVENT_MAP[key] = modelPropNameMap[key];
+    }
+  }
+}
diff --git a/packages/@core/ui-kit/form-ui/src/form-api.ts b/packages/@core/ui-kit/form-ui/src/form-api.ts
new file mode 100644
index 000000000..82e615fe4
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -0,0 +1,175 @@
+import type {
+  FormState,
+  GenericObject,
+  ResetFormOpts,
+  ValidationOptions,
+} from 'vee-validate';
+
+import type { FormActions, VbenFormProps } from './types';
+
+import { toRaw } from 'vue';
+
+import { Store } from '@vben-core/shared/store';
+import { bindMethods, isFunction, StateHandler } from '@vben-core/shared/utils';
+
+function getDefaultState(): VbenFormProps {
+  return {
+    actionWrapperClass: '',
+    collapsed: false,
+    collapsedRows: 1,
+    commonConfig: {},
+    handleReset: undefined,
+    handleSubmit: undefined,
+    layout: 'horizontal',
+    resetButtonOptions: {},
+    schema: [],
+    showCollapseButton: false,
+    showDefaultActions: true,
+    submitButtonOptions: {},
+    wrapperClass: 'grid-cols-1',
+  };
+}
+
+export class FormApi {
+  // private prevState!: ModalState;
+  private state: null | VbenFormProps = null;
+  // private api: Pick<VbenFormProps, 'handleReset' | 'handleSubmit'>;
+  public form = {} as FormActions;
+
+  isMounted = false;
+
+  stateHandler: StateHandler;
+
+  public store: Store<VbenFormProps>;
+
+  constructor(options: VbenFormProps = {}) {
+    const { ...storeState } = options;
+
+    const defaultState = getDefaultState();
+
+    this.store = new Store<VbenFormProps>(
+      {
+        ...defaultState,
+        ...storeState,
+      },
+      {
+        onUpdate: () => {
+          this.state = this.store.state;
+        },
+      },
+    );
+
+    this.state = this.store.state;
+    this.stateHandler = new StateHandler();
+    bindMethods(this);
+  }
+
+  private async getForm() {
+    if (!this.isMounted) {
+      // 等待form挂载
+      await this.stateHandler.waitForCondition();
+    }
+    if (!this.form?.meta) {
+      throw new Error('<VbenForm /> is not mounted');
+    }
+    return this.form;
+  }
+
+  // 如果需要多次更新状态，可以使用 batch 方法
+  batchStore(cb: () => void) {
+    this.store.batch(cb);
+  }
+
+  async getValues() {
+    const form = await this.getForm();
+    return form.values;
+  }
+
+  mount(formActions: FormActions) {
+    if (!this.isMounted) {
+      Object.assign(this.form, formActions);
+      this.stateHandler.setConditionTrue();
+      this.isMounted = true;
+    }
+  }
+
+  /**
+   * 根据字段名移除表单项
+   * @param fields
+   */
+  async removeSchemaByFields(fields: string[]) {
+    const fieldSet = new Set(fields);
+    const schema = this.state?.schema ?? [];
+
+    const filterSchema = schema.filter((item) => fieldSet.has(item.fieldName));
+
+    this.setState({
+      schema: filterSchema,
+    });
+  }
+
+  /**
+   * 重置表单
+   */
+  async resetForm(
+    state?: Partial<FormState<GenericObject>> | undefined,
+    opts?: Partial<ResetFormOpts>,
+  ) {
+    const form = await this.getForm();
+    return form.resetForm(state, opts);
+  }
+
+  async resetValidate() {
+    const form = await this.getForm();
+    const fields = Object.keys(form.errors.value);
+    fields.forEach((field) => {
+      form.setFieldError(field, undefined);
+    });
+  }
+
+  async setFieldValue(field: string, value: any, shouldValidate?: boolean) {
+    const form = await this.getForm();
+    form.setFieldValue(field, value, shouldValidate);
+  }
+
+  setState(
+    stateOrFn:
+      | ((prev: VbenFormProps) => Partial<VbenFormProps>)
+      | Partial<VbenFormProps>,
+  ) {
+    if (isFunction(stateOrFn)) {
+      this.store.setState(stateOrFn as (prev: VbenFormProps) => VbenFormProps);
+    } else {
+      this.store.setState((prev) => ({ ...prev, ...stateOrFn }));
+    }
+  }
+
+  async setValues(
+    fields: Record<string, any>,
+    shouldValidate: boolean = false,
+  ) {
+    const form = await this.getForm();
+    form.setValues(fields, shouldValidate);
+  }
+
+  async submitForm(e?: Event) {
+    e?.preventDefault();
+    e?.stopPropagation();
+    const form = await this.getForm();
+    await form.submitForm();
+    const rawValues = toRaw(form.values || {});
+    await this.state?.handleSubmit?.(rawValues);
+    return rawValues;
+  }
+
+  unmounted() {
+    this.state = null;
+    this.isMounted = false;
+    this.stateHandler.reset();
+  }
+
+  async validate(opts?: Partial<ValidationOptions>) {
+    const form = await this.getForm();
+    return await form.validate(opts);
+  }
+}
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/context.ts b/packages/@core/ui-kit/form-ui/src/form-render/context.ts
new file mode 100644
index 000000000..af4b15cdf
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/form-render/context.ts
@@ -0,0 +1,24 @@
+import type { FormRenderProps } from '../types';
+
+import { computed } from 'vue';
+
+import { createContext } from '@vben-core/shadcn-ui';
+
+export const [injectRenderFormProps, provideFormRenderProps] =
+  createContext<FormRenderProps>('FormRenderProps');
+
+export const useFormContext = () => {
+  const formRenderProps = injectRenderFormProps();
+
+  const isVertical = computed(() => formRenderProps.layout === 'vertical');
+
+  const componentMap = computed(() => formRenderProps.componentMap);
+  const componentBindEventMap = computed(
+    () => formRenderProps.componentBindEventMap,
+  );
+  return {
+    componentBindEventMap,
+    componentMap,
+    isVertical,
+  };
+};
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/dependencies.ts b/packages/@core/ui-kit/form-ui/src/form-render/dependencies.ts
new file mode 100644
index 000000000..b204e3cae
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/form-render/dependencies.ts
@@ -0,0 +1,116 @@
+import type {
+  FormItemDependencies,
+  FormSchemaRuleType,
+  MaybeComponentProps,
+} from '../types';
+
+import { computed, ref, watch } from 'vue';
+
+import { isFunction } from '@vben-core/shared/utils';
+
+import { useFormValues } from 'vee-validate';
+
+import { injectRenderFormProps } from './context';
+
+export default function useDependencies(
+  getDependencies: () => FormItemDependencies | undefined,
+) {
+  const values = useFormValues();
+
+  const formRenderProps = injectRenderFormProps();
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const formApi = formRenderProps.form!;
+
+  if (!values) {
+    throw new Error('useDependencies should be used within <VbenForm>');
+  }
+
+  const isIf = ref(true);
+  const isDisabled = ref(false);
+  const isShow = ref(true);
+  const isRequired = ref(false);
+  const dynamicComponentProps = ref<MaybeComponentProps>({});
+  const dynamicRules = ref<FormSchemaRuleType>();
+
+  const triggerFieldValues = computed(() => {
+    // 该字段可能会被多个字段触发
+    const triggerFields = getDependencies()?.triggerFields ?? [];
+    return triggerFields.map((dep) => {
+      return values.value[dep];
+    });
+  });
+
+  const resetConditionState = () => {
+    isDisabled.value = false;
+    isIf.value = true;
+    isShow.value = true;
+    isRequired.value = false;
+    dynamicRules.value = undefined;
+    dynamicComponentProps.value = {};
+  };
+
+  watch(
+    [triggerFieldValues, getDependencies],
+    async ([_values, dependencies]) => {
+      if (!dependencies || !dependencies?.triggerFields?.length) {
+        return;
+      }
+      resetConditionState();
+      const {
+        componentProps,
+        disabled,
+        if: whenIf,
+        required,
+        rules,
+        show,
+        trigger,
+      } = dependencies;
+
+      // 1. 优先判断if，如果if为false，则不渲染dom，后续判断也不再执行
+      const formValues = values.value;
+
+      if (isFunction(whenIf)) {
+        isIf.value = !!(await whenIf(formValues, formApi));
+        // 不渲染
+        if (!isIf.value) return;
+      }
+
+      // 2. 判断show，如果show为false，则隐藏
+      if (isFunction(show)) {
+        isShow.value = !!(await show(formValues, formApi));
+        if (!isShow.value) return;
+      }
+
+      if (isFunction(componentProps)) {
+        dynamicComponentProps.value = await componentProps(formValues, formApi);
+      }
+
+      if (isFunction(rules)) {
+        dynamicRules.value = await rules(formValues, formApi);
+      }
+
+      if (isFunction(disabled)) {
+        isDisabled.value = !!(await disabled(formValues, formApi));
+      }
+
+      if (isFunction(required)) {
+        isRequired.value = !!(await required(formValues, formApi));
+      }
+
+      if (isFunction(trigger)) {
+        await trigger(formValues, formApi);
+      }
+    },
+    { deep: true, immediate: true },
+  );
+
+  return {
+    dynamicComponentProps,
+    dynamicRules,
+    isDisabled,
+    isIf,
+    isRequired,
+    isShow,
+  };
+}
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/expandable.ts b/packages/@core/ui-kit/form-ui/src/form-render/expandable.ts
new file mode 100644
index 000000000..dcb5b0198
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/form-render/expandable.ts
@@ -0,0 +1,97 @@
+import type { FormRenderProps } from '../types';
+
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue';
+
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
+
+/**
+ * 动态计算行数
+ */
+export function useExpandable(props: FormRenderProps) {
+  const wrapperRef = useTemplateRef<HTMLElement>('wrapperRef');
+  const rowMapping = ref<Record<number, number>>({});
+  // 是否已经计算过一次
+  const isCalculated = ref(false);
+
+  const breakpoints = useBreakpoints(breakpointsTailwind);
+
+  const keepFormItemIndex = computed(() => {
+    const rows = props.collapsedRows ?? 1;
+    const mapping = rowMapping.value;
+    let maxItem = 0;
+    for (let index = 1; index <= rows; index++) {
+      maxItem += mapping?.[index] ?? 0;
+    }
+    return maxItem - 1;
+  });
+
+  watch(
+    [
+      () => props.showCollapseButton,
+      () => breakpoints.active().value,
+      () => props.schema?.length,
+    ],
+    async ([val]) => {
+      if (val) {
+        await nextTick();
+        rowMapping.value = {};
+        await calculateRowMapping();
+      }
+    },
+  );
+
+  async function calculateRowMapping() {
+    if (!props.showCollapseButton) {
+      return;
+    }
+
+    await nextTick();
+    if (!wrapperRef.value) {
+      return;
+    }
+    // 小屏幕不计算
+    if (breakpoints.smaller('sm').value) {
+      // 保持一行
+      rowMapping.value = { 1: 2 };
+      return;
+    }
+
+    const formItems = [...wrapperRef.value.children];
+
+    const container = wrapperRef.value;
+    const containerStyles = window.getComputedStyle(container);
+    const rowHeights = containerStyles
+      .getPropertyValue('grid-template-rows')
+      .split(' ');
+
+    const containerRect = container?.getBoundingClientRect();
+
+    formItems.forEach((el) => {
+      const itemRect = el.getBoundingClientRect();
+
+      // 计算元素在第几行
+      const itemTop = itemRect.top - containerRect.top;
+      let rowStart = 0;
+      let cumulativeHeight = 0;
+
+      for (const [i, rowHeight] of rowHeights.entries()) {
+        cumulativeHeight += Number.parseFloat(rowHeight);
+        if (itemTop < cumulativeHeight) {
+          rowStart = i + 1;
+          break;
+        }
+      }
+      if (rowStart > (props?.collapsedRows ?? 1)) {
+        return;
+      }
+      rowMapping.value[rowStart] = (rowMapping.value[rowStart] ?? 0) + 1;
+      isCalculated.value = true;
+    });
+  }
+
+  onMounted(() => {
+    calculateRowMapping();
+  });
+
+  return { isCalculated, keepFormItemIndex, wrapperRef };
+}
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
new file mode 100644
index 000000000..3cb5f6a5f
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import type { ZodType } from 'zod';
+
+import type { FormSchema } from '../types';
+
+import { computed } from 'vue';
+
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormMessage,
+  VbenRenderContent,
+} from '@vben-core/shadcn-ui';
+import { cn, isFunction, isObject, isString } from '@vben-core/shared/utils';
+
+import { toTypedSchema } from '@vee-validate/zod';
+import { useFormValues } from 'vee-validate';
+
+import { injectRenderFormProps, useFormContext } from './context';
+import useDependencies from './dependencies';
+import FormLabel from './form-label.vue';
+import { isEventObjectLike } from './helper';
+
+interface Props extends FormSchema {}
+
+const {
+  component,
+  componentProps,
+  dependencies,
+  description,
+  disabled,
+  fieldName,
+  formFieldProps,
+  label,
+  labelClass,
+  labelWidth,
+  renderComponentContent,
+  rules,
+} = defineProps<Props>();
+
+const { componentBindEventMap, componentMap, isVertical } = useFormContext();
+const formRenderProps = injectRenderFormProps();
+const values = useFormValues();
+const formApi = formRenderProps.form;
+
+const fieldComponent = computed(() => {
+  const finalComponent = isString(component)
+    ? componentMap.value[component]
+    : component;
+  if (!finalComponent) {
+    // 组件未注册
+    console.warn(`Component ${component} is not registered`);
+  }
+  return finalComponent;
+});
+
+const {
+  dynamicComponentProps,
+  dynamicRules,
+  isDisabled,
+  isIf,
+  isRequired,
+  isShow,
+} = useDependencies(() => dependencies);
+
+const labelStyle = computed(() => {
+  return labelClass?.includes('w-') || isVertical.value
+    ? {}
+    : {
+        width: `${labelWidth}px`,
+      };
+});
+
+const currentRules = computed(() => {
+  return dynamicRules.value || rules;
+});
+
+const shouldRequired = computed(() => {
+  if (!currentRules.value) {
+    return isRequired.value;
+  }
+
+  if (isRequired.value) {
+    return true;
+  }
+
+  if (isString(currentRules.value)) {
+    return currentRules.value === 'required';
+  }
+
+  let isOptional = currentRules?.value?.isOptional?.();
+
+  // 如果有设置默认值，则不是必填，需要特殊处理
+  const typeName = currentRules?.value?._def?.typeName;
+  if (typeName === 'ZodDefault') {
+    const innerType = currentRules?.value?._def.innerType;
+    if (innerType) {
+      isOptional = innerType.isOptional?.();
+    }
+  }
+
+  return !isOptional;
+});
+
+const fieldRules = computed(() => {
+  let rules = currentRules.value;
+  if (!rules) {
+    return isRequired.value ? 'required' : null;
+  }
+
+  if (isString(rules)) {
+    return rules;
+  }
+
+  const isOptional = !shouldRequired.value;
+  if (!isOptional) {
+    const unwrappedRules = (rules as any)?.unwrap?.();
+    if (unwrappedRules) {
+      rules = unwrappedRules;
+    }
+  }
+  return toTypedSchema(rules as ZodType);
+});
+
+const computedProps = computed(() => {
+  const finalComponentProps = isFunction(componentProps)
+    ? componentProps(values.value, formApi!)
+    : componentProps;
+
+  return {
+    ...finalComponentProps,
+    ...dynamicComponentProps.value,
+  };
+});
+
+const shouldDisabled = computed(() => {
+  return isDisabled.value || disabled || computedProps.value?.disabled;
+});
+
+const customContentRender = computed(() => {
+  if (!isFunction(renderComponentContent)) {
+    return {};
+  }
+  return renderComponentContent(values.value, formApi!);
+});
+
+const renderContentKey = computed(() => {
+  return Object.keys(customContentRender.value);
+});
+
+const fieldProps = computed(() => {
+  const rules = fieldRules.value;
+  return {
+    keepValue: true,
+    label,
+    ...(rules ? { rules } : {}),
+    ...formFieldProps,
+  };
+});
+
+function fieldBindEvent(slotProps: Record<string, any>) {
+  const modelValue = slotProps.componentField.modelValue;
+  const handler = slotProps.componentField['onUpdate:modelValue'];
+
+  const bindEventField = isString(component)
+    ? componentBindEventMap.value?.[component]
+    : null;
+
+  let value = modelValue;
+  // antd design 的一些组件会传递一个 event 对象
+  if (modelValue && isObject(modelValue) && bindEventField) {
+    value = isEventObjectLike(modelValue)
+      ? modelValue?.target?.[bindEventField]
+      : modelValue;
+  }
+  if (bindEventField) {
+    return {
+      [`onUpdate:${bindEventField}`]: handler,
+      [bindEventField]: value,
+      onChange: (e: Record<string, any>) => {
+        const shouldUnwrap = isEventObjectLike(e);
+        const onChange = slotProps?.componentField?.onChange;
+        if (!shouldUnwrap) {
+          return onChange?.(e);
+        }
+
+        return onChange?.(e?.target?.[bindEventField] ?? e);
+      },
+      onInput: () => {},
+    };
+  }
+  return {};
+}
+
+function createComponentProps(slotProps: Record<string, any>) {
+  const bindEvents = fieldBindEvent(slotProps);
+
+  const binds = {
+    ...slotProps.componentField,
+    ...computedProps.value,
+    ...bindEvents,
+  };
+
+  return binds;
+}
+</script>
+
+<template>
+  <FormField
+    v-if="isIf"
+    v-bind="fieldProps"
+    v-slot="slotProps"
+    :name="fieldName"
+  >
+    <FormItem
+      v-show="isShow"
+      :class="{
+        'flex-col': isVertical,
+        'flex-row items-center': !isVertical,
+      }"
+      class="flex pb-6"
+      v-bind="$attrs"
+    >
+      <FormLabel
+        v-if="!hideLabel"
+        :class="
+          cn(
+            'flex leading-6',
+            {
+              'mr-2 flex-shrink-0': !isVertical,
+              'flex-row': isVertical,
+            },
+            !isVertical && labelClass,
+          )
+        "
+        :help="help"
+        :required="shouldRequired && !hideRequiredMark"
+        :style="labelStyle"
+      >
+        {{ label }}
+      </FormLabel>
+      <div :class="cn('relative flex w-full items-center', wrapperClass)">
+        <FormControl :class="cn(controlClass)">
+          <slot
+            v-bind="{
+              ...slotProps,
+              ...createComponentProps(slotProps),
+              disabled: shouldDisabled,
+            }"
+          >
+            <component
+              :is="fieldComponent"
+              v-bind="createComponentProps(slotProps)"
+              :disabled="shouldDisabled"
+            >
+              <template v-for="name in renderContentKey" :key="name" #[name]>
+                <VbenRenderContent
+                  :content="customContentRender[name]"
+                  v-bind="slotProps"
+                />
+              </template>
+              <!-- <slot></slot> -->
+            </component>
+          </slot>
+        </FormControl>
+        <!-- 自定义后缀 -->
+        <div v-if="suffix" class="ml-1">
+          <VbenRenderContent :content="suffix" />
+        </div>
+
+        <FormDescription v-if="description">
+          <VbenRenderContent :content="description" />
+        </FormDescription>
+
+        <Transition name="slide-up">
+          <FormMessage class="absolute -bottom-[22px]" />
+        </Transition>
+      </div>
+    </FormItem>
+  </FormField>
+</template>
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
new file mode 100644
index 000000000..1e135f01d
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { FormLabel, VbenHelpTooltip } from '@vben-core/shadcn-ui';
+
+interface Props {
+  help?: string;
+  required?: boolean;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <FormLabel class="flex flex-row-reverse items-center">
+    <VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1">
+      {{ help }}
+    </VbenHelpTooltip>
+    <slot></slot>
+    <span v-if="required" class="text-destructive mr-[2px]">*</span>
+  </FormLabel>
+</template>
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form.vue b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
new file mode 100644
index 000000000..2c7bd17e8
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import type { GenericObject } from 'vee-validate';
+import type { ZodTypeAny } from 'zod';
+
+import type { FormRenderProps, FormSchema, FormShape } from '../types';
+
+import { computed } from 'vue';
+
+import { Form } from '@vben-core/shadcn-ui';
+import { cn, isString, merge } from '@vben-core/shared/utils';
+
+import { provideFormRenderProps } from './context';
+import { useExpandable } from './expandable';
+import FormField from './form-field.vue';
+import { getBaseRules, getDefaultValueInZodStack } from './helper';
+
+interface Props extends FormRenderProps {}
+
+const props = withDefaults(defineProps<Props>(), {
+  collapsedRows: 1,
+  commonConfig: () => ({}),
+  showCollapseButton: false,
+  wrapperClass: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
+});
+
+const emits = defineEmits<{
+  submit: [event: any];
+}>();
+
+provideFormRenderProps(props);
+
+const { isCalculated, keepFormItemIndex, wrapperRef } = useExpandable(props);
+
+const shapes = computed(() => {
+  const resultShapes: FormShape[] = [];
+  props.schema?.forEach((schema) => {
+    const { fieldName } = schema;
+    const rules = schema.rules as ZodTypeAny;
+
+    let typeName = '';
+    if (rules && !isString(rules)) {
+      typeName = rules._def.typeName;
+    }
+
+    const baseRules = getBaseRules(rules) as ZodTypeAny;
+
+    resultShapes.push({
+      default: getDefaultValueInZodStack(rules),
+      fieldName,
+      required: !['ZodNullable', 'ZodOptional'].includes(typeName),
+      rules: baseRules,
+    });
+  });
+  return resultShapes;
+});
+
+const formComponent = computed(() => (props.form ? 'form' : Form));
+
+const formComponentProps = computed(() => {
+  return props.form
+    ? {
+        onSubmit: props.form.handleSubmit((val) => emits('submit', val)),
+      }
+    : {
+        onSubmit: (val: GenericObject) => emits('submit', val),
+      };
+});
+
+const formCollapsed = computed(() => {
+  return props.collapsed && isCalculated.value;
+});
+
+const computedSchema = computed((): FormSchema[] => {
+  const {
+    componentProps = {},
+    controlClass = '',
+    disabled,
+    formFieldProps = {},
+    formItemClass = '',
+    hideLabel = false,
+    hideRequiredMark = false,
+    labelClass = '',
+    labelWidth = 100,
+    wrapperClass = '',
+  } = props.commonConfig;
+  return (props.schema || []).map((schema, index): FormSchema => {
+    const keepIndex = keepFormItemIndex.value;
+
+    const hidden =
+      // 折叠状态 & 显示折叠按钮 & 当前索引大于保留索引
+      props.showCollapseButton && !!formCollapsed.value && keepIndex
+        ? keepIndex <= index
+        : false;
+
+    return {
+      disabled,
+      hideLabel,
+      hideRequiredMark,
+      labelWidth,
+      wrapperClass,
+      ...schema,
+      componentProps: merge({}, schema.componentProps, componentProps),
+      controlClass: cn(controlClass, schema.controlClass),
+      formFieldProps: {
+        ...formFieldProps,
+        ...schema.formFieldProps,
+      },
+      formItemClass: cn(
+        'flex-shrink-0',
+        { hidden },
+        formItemClass,
+        schema.formItemClass,
+      ),
+      labelClass: cn(labelClass, schema.labelClass),
+    };
+  });
+});
+</script>
+
+<template>
+  <component :is="formComponent" v-bind="formComponentProps">
+    <div ref="wrapperRef" :class="wrapperClass" class="grid">
+      <template v-for="cSchema in computedSchema" :key="cSchema.fieldName">
+        <!-- <div v-if="$slots[cSchema.fieldName]" :class="cSchema.formItemClass">
+          <slot :definition="cSchema" :name="cSchema.fieldName"> </slot>
+        </div> -->
+        <FormField
+          v-bind="cSchema"
+          :class="cSchema.formItemClass"
+          :rules="cSchema.rules"
+        >
+          <template #default="slotProps">
+            <slot v-bind="slotProps" :name="cSchema.fieldName"> </slot>
+          </template>
+        </FormField>
+      </template>
+      <slot :shapes="shapes"></slot>
+    </div>
+  </component>
+</template>
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/helper.ts b/packages/@core/ui-kit/form-ui/src/form-render/helper.ts
new file mode 100644
index 000000000..cdb3999fb
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/form-render/helper.ts
@@ -0,0 +1,60 @@
+import type {
+  AnyZodObject,
+  ZodDefault,
+  ZodEffects,
+  ZodNumber,
+  ZodString,
+  ZodTypeAny,
+} from 'zod';
+
+import { isObject, isString } from '@vben-core/shared/utils';
+
+/**
+ * Get the lowest level Zod type.
+ * This will unpack optionals, refinements, etc.
+ */
+export function getBaseRules<
+  ChildType extends AnyZodObject | ZodTypeAny = ZodTypeAny,
+>(schema: ChildType | ZodEffects<ChildType>): ChildType | null {
+  if (!schema || isString(schema)) return null;
+  if ('innerType' in schema._def)
+    return getBaseRules(schema._def.innerType as ChildType);
+
+  if ('schema' in schema._def)
+    return getBaseRules(schema._def.schema as ChildType);
+
+  return schema as ChildType;
+}
+
+/**
+ * Search for a "ZodDefault" in the Zod stack and return its value.
+ */
+export function getDefaultValueInZodStack(schema: ZodTypeAny): any {
+  if (!schema || isString(schema)) {
+    return;
+  }
+  const typedSchema = schema as unknown as ZodDefault<ZodNumber | ZodString>;
+
+  if (typedSchema._def.typeName === 'ZodDefault')
+    return typedSchema._def.defaultValue();
+
+  if ('innerType' in typedSchema._def) {
+    return getDefaultValueInZodStack(
+      typedSchema._def.innerType as unknown as ZodTypeAny,
+    );
+  }
+  if ('schema' in typedSchema._def) {
+    return getDefaultValueInZodStack(
+      (typedSchema._def as any).schema as ZodTypeAny,
+    );
+  }
+
+  return undefined;
+}
+
+export function isEventObjectLike(obj: any) {
+  if (!obj || !isObject(obj)) {
+    return false;
+  }
+  return Reflect.has(obj, 'target') && Reflect.has(obj, 'stopPropagation');
+}
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/index.ts b/packages/@core/ui-kit/form-ui/src/form-render/index.ts
new file mode 100644
index 000000000..7fc170657
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/form-render/index.ts
@@ -0,0 +1,3 @@
+export { default as Form } from './form.vue';
+export { default as FormField } from './form-field.vue';
+export { default as FormLabel } from './form-label.vue';
diff --git a/packages/@core/ui-kit/form-ui/src/index.ts b/packages/@core/ui-kit/form-ui/src/index.ts
new file mode 100644
index 000000000..100c224ec
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/index.ts
@@ -0,0 +1,11 @@
+export { setupVbenForm } from './config';
+export type {
+  BaseFormComponentType,
+  FormSchema as VbenFormSchema,
+  VbenFormProps,
+} from './types';
+
+export * from './use-vben-form';
+
+// export { default as VbenForm } from './vben-form.vue';
+export * as z from 'zod';
diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts
new file mode 100644
index 000000000..35456c621
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/types.ts
@@ -0,0 +1,327 @@
+import type { VbenButtonProps } from '@vben-core/shadcn-ui';
+import type { Field, FormContext, GenericObject } from 'vee-validate';
+import type { ZodTypeAny } from 'zod';
+
+import type { FormApi } from './form-api';
+
+import type { Component, HtmlHTMLAttributes, Ref } from 'vue';
+
+export type FormLayout = 'horizontal' | 'vertical';
+
+export type BaseFormComponentType =
+  | 'DefaultResetActionButton'
+  | 'DefaultSubmitActionButton'
+  | 'VbenCheckbox'
+  | 'VbenInput'
+  | 'VbenInputPassword'
+  | 'VbenPinInput'
+  | 'VbenSelect'
+  | (Record<never, never> & string);
+
+type Breakpoints = '' | '2xl:' | '3xl:' | 'lg:' | 'md:' | 'sm:' | 'xl:';
+
+type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
+
+export type WrapperClassType =
+  | `${Breakpoints}grid-cols-${GridCols}`
+  | (Record<never, never> & string);
+
+export type FormItemClassType =
+  | `${Breakpoints}cols-end-${'auto' | GridCols}`
+  | `${Breakpoints}cols-span-${'auto' | 'full' | GridCols}`
+  | `${Breakpoints}cols-start-${'auto' | GridCols}`
+  | (Record<never, never> & string)
+  | WrapperClassType;
+
+export interface FormShape {
+  /** 默认值 */
+  default?: any;
+  /** 字段名 */
+  fieldName: string;
+  /** 是否必填 */
+  required?: boolean;
+  rules?: ZodTypeAny;
+}
+
+export type MaybeComponentPropKey =
+  | 'options'
+  | 'placeholder'
+  | 'title'
+  | keyof HtmlHTMLAttributes
+  | (Record<never, never> & string);
+
+export type MaybeComponentProps = { [K in MaybeComponentPropKey]?: any };
+
+export type FormActions = FormContext<GenericObject>;
+
+export type CustomRenderType = (() => Component | string) | string;
+
+export type FormSchemaRuleType =
+  | 'required'
+  | null
+  | (Record<never, never> & string)
+  | ZodTypeAny;
+
+type FormItemDependenciesCondition<T = boolean | PromiseLike<boolean>> = (
+  value: Partial<Record<string, any>>,
+  actions: FormActions,
+) => T;
+
+type FormItemDependenciesConditionWithRules = (
+  value: Partial<Record<string, any>>,
+  actions: FormActions,
+) => FormSchemaRuleType | PromiseLike<FormSchemaRuleType>;
+
+type FormItemDependenciesConditionWithProps = (
+  value: Partial<Record<string, any>>,
+  actions: FormActions,
+) => MaybeComponentProps | PromiseLike<MaybeComponentProps>;
+
+export interface FormItemDependencies {
+  /**
+   * 组件参数
+   * @returns 组件参数
+   */
+  componentProps?: FormItemDependenciesConditionWithProps;
+  /**
+   * 是否禁用
+   * @returns 是否禁用
+   */
+  disabled?: FormItemDependenciesCondition;
+  /**
+   * 是否渲染（删除dom）
+   * @returns 是否渲染
+   */
+  if?: FormItemDependenciesCondition;
+  /**
+   * 是否必填
+   * @returns 是否必填
+   */
+  required?: FormItemDependenciesCondition;
+  /**
+   * 字段规则
+   */
+  rules?: FormItemDependenciesConditionWithRules;
+  /**
+   * 是否隐藏(Css)
+   * @returns 是否隐藏
+   */
+  show?: FormItemDependenciesCondition;
+  /**
+   * 任意触发都会执行
+   */
+  trigger?: FormItemDependenciesCondition<void>;
+  /**
+   * 触发字段
+   */
+  triggerFields: string[];
+}
+
+type ComponentProps =
+  | ((
+      value: Partial<Record<string, any>>,
+      actions: FormActions,
+    ) => MaybeComponentProps)
+  | MaybeComponentProps;
+
+export interface FormCommonConfig {
+  /**
+   * 所有表单项的props
+   */
+  componentProps?: ComponentProps;
+  /**
+   * 所有表单项的控件样式
+   */
+  controlClass?: string;
+  /**
+   * 所有表单项的禁用状态
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 所有表单项的控件样式
+   * @default ""
+   */
+  formFieldProps?: Partial<typeof Field>;
+  /**
+   * 所有表单项的栅格布局
+   * @default ""
+   */
+  formItemClass?: string;
+  /**
+   * 隐藏所有表单项label
+   * @default false
+   */
+  hideLabel?: boolean;
+  /**
+   * 是否隐藏必填标记
+   * @default false
+   */
+  hideRequiredMark?: boolean;
+  /**
+   * 所有表单项的label样式
+   * @default "w-[100px]"
+   */
+  labelClass?: string;
+  /**
+   * 所有表单项的label宽度
+   */
+  labelWidth?: number;
+  /**
+   * 所有表单项的wrapper样式
+   */
+  wrapperClass?: string;
+}
+
+type RenderComponentContentType = (
+  value: Partial<Record<string, any>>,
+  api: FormActions,
+) => Record<string, any>;
+
+export type HandleSubmitFn = (
+  values: Record<string, any>,
+) => Promise<void> | void;
+
+export type HandleResetFn = (
+  values: Record<string, any>,
+) => Promise<void> | void;
+
+export interface FormSchema<
+  T extends BaseFormComponentType = BaseFormComponentType,
+> extends FormCommonConfig {
+  /** 组件 */
+  component: Component | T;
+  /** 组件参数 */
+  componentProps?: ComponentProps;
+  /** 默认值 */
+  defaultValue?: any;
+  /** 依赖 */
+  dependencies?: FormItemDependencies;
+  /** 描述 */
+  description?: string;
+  /** 字段名 */
+  fieldName: string;
+  /** 帮助信息 */
+  help?: string;
+  /** 表单项 */
+  label?: string;
+  // 自定义组件内部渲染
+  renderComponentContent?: RenderComponentContentType;
+  /** 字段规则 */
+  rules?: FormSchemaRuleType;
+  /** 后缀 */
+  suffix?: CustomRenderType;
+}
+
+export interface FormFieldProps extends FormSchema {
+  required?: boolean;
+}
+
+export interface FormRenderProps<
+  T extends BaseFormComponentType = BaseFormComponentType,
+> {
+  /**
+   * 是否展开，在showCollapseButton=true下生效
+   */
+  collapsed?: boolean;
+  /**
+   * 折叠时保持行数
+   * @default 1
+   */
+  collapsedRows?: number;
+  /**
+   * 表单项通用后备配置，当子项目没配置时使用这里的配置，子项目配置优先级高于此配置
+   */
+  commonConfig?: FormCommonConfig;
+  /**
+   * 组件v-model事件绑定
+   */
+  componentBindEventMap?: Partial<Record<BaseFormComponentType, string>>;
+  /**
+   * 组件集合
+   */
+  componentMap: Record<BaseFormComponentType, Component>;
+  /**
+   * 表单实例
+   */
+  form?: FormContext<GenericObject>;
+  /**
+   * 表单项布局
+   */
+  layout?: FormLayout;
+  /**
+   * 表单定义
+   */
+  schema?: FormSchema<T>[];
+  /**
+   * 是否显示展开/折叠
+   */
+  showCollapseButton?: boolean;
+  /**
+   * 表单栅格布局
+   * @default "grid-cols-1"
+   */
+  wrapperClass?: WrapperClassType;
+}
+
+export interface ActionButtonOptions extends VbenButtonProps {
+  show?: boolean;
+  text?: string;
+}
+
+export interface VbenFormProps<
+  T extends BaseFormComponentType = BaseFormComponentType,
+> extends Omit<
+    FormRenderProps<T>,
+    'componentBindEventMap' | 'componentMap' | 'form'
+  > {
+  /**
+   * 表单操作区域class
+   */
+  actionWrapperClass?: any;
+  /**
+   * 表单重置回调
+   */
+  handleReset?: HandleResetFn;
+  /**
+   * 表单提交回调
+   */
+  handleSubmit?: HandleSubmitFn;
+  /**
+   * 重置按钮参数
+   */
+  resetButtonOptions?: ActionButtonOptions;
+
+  /**
+   * 是否显示默认操作按钮
+   */
+  showDefaultActions?: boolean;
+
+  /**
+   * 提交按钮参数
+   */
+  submitButtonOptions?: ActionButtonOptions;
+}
+
+export type ExtendedFormApi = {
+  useStore: <T = NoInfer<VbenFormProps>>(
+    selector?: (state: NoInfer<VbenFormProps>) => T,
+  ) => Readonly<Ref<T>>;
+} & FormApi;
+
+export interface VbenFormAdapterOptions<
+  T extends BaseFormComponentType = BaseFormComponentType,
+> {
+  components: Partial<Record<T, Component>>;
+  config?: {
+    baseModelPropName?: string;
+    modelPropNameMap?: Partial<Record<T, string>>;
+  };
+  defineRules?: {
+    required?: (
+      value: any,
+      params: any,
+      ctx: Record<string, any>,
+    ) => boolean | string;
+  };
+}
diff --git a/packages/@core/ui-kit/form-ui/src/use-form-context.ts b/packages/@core/ui-kit/form-ui/src/use-form-context.ts
new file mode 100644
index 000000000..05838fc33
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/use-form-context.ts
@@ -0,0 +1,59 @@
+import type { FormActions, VbenFormProps } from './types';
+
+import { computed, type ComputedRef, unref, useSlots } from 'vue';
+
+import { createContext } from '@vben-core/shadcn-ui';
+import { isString } from '@vben-core/shared/utils';
+
+import { useForm } from 'vee-validate';
+import { object, type ZodRawShape } from 'zod';
+import { getDefaultsForSchema } from 'zod-defaults';
+
+export const [injectFormProps, provideFormProps] =
+  createContext<[ComputedRef<VbenFormProps> | VbenFormProps, FormActions]>(
+    'VbenFormProps',
+  );
+
+export function useFormInitial(
+  props: ComputedRef<VbenFormProps> | VbenFormProps,
+) {
+  const slots = useSlots();
+  const initialValues = generateInitialValues();
+
+  const form = useForm({
+    ...(Object.keys(initialValues)?.length ? { initialValues } : {}),
+  });
+
+  const delegatedSlots = computed(() => {
+    const resultSlots: string[] = [];
+
+    for (const key of Object.keys(slots)) {
+      if (key !== 'default') {
+        resultSlots.push(key);
+      }
+    }
+    return resultSlots;
+  });
+
+  function generateInitialValues() {
+    const initialValues: Record<string, any> = {};
+
+    const zodObject: ZodRawShape = {};
+    (unref(props).schema || []).forEach((item) => {
+      if (Reflect.has(item, 'defaultValue')) {
+        initialValues[item.fieldName] = item.defaultValue;
+      } else if (item.rules && !isString(item.rules)) {
+        zodObject[item.fieldName] = item.rules;
+      }
+    });
+
+    const schemaInitialValues = getDefaultsForSchema(object(zodObject));
+
+    return { ...initialValues, ...schemaInitialValues };
+  }
+
+  return {
+    delegatedSlots,
+    form,
+  };
+}
diff --git a/packages/@core/ui-kit/form-ui/src/use-vben-form.ts b/packages/@core/ui-kit/form-ui/src/use-vben-form.ts
new file mode 100644
index 000000000..455e3af40
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/use-vben-form.ts
@@ -0,0 +1,49 @@
+import type {
+  BaseFormComponentType,
+  ExtendedFormApi,
+  VbenFormProps,
+} from './types';
+
+import { defineComponent, h, isReactive, onBeforeUnmount, watch } from 'vue';
+
+import { useStore } from '@vben-core/shared/store';
+
+import { FormApi } from './form-api';
+import VbenUseForm from './vben-use-form.vue';
+
+export function useVbenForm<
+  T extends BaseFormComponentType = BaseFormComponentType,
+>(options: VbenFormProps<T>) {
+  const IS_REACTIVE = isReactive(options);
+  const api = new FormApi(options);
+  const extendedApi: ExtendedFormApi = api as never;
+  extendedApi.useStore = (selector) => {
+    return useStore(api.store, selector);
+  };
+
+  const Form = defineComponent(
+    (props: VbenFormProps, { attrs, slots }) => {
+      onBeforeUnmount(() => {
+        api.unmounted();
+      });
+      return () =>
+        h(VbenUseForm, { ...props, ...attrs, formApi: extendedApi }, slots);
+    },
+    {
+      inheritAttrs: false,
+      name: 'VbenUseForm',
+    },
+  );
+  // Add reactivity support
+  if (IS_REACTIVE) {
+    watch(
+      () => options.schema,
+      () => {
+        api.setState({ schema: options.schema });
+      },
+      { immediate: true },
+    );
+  }
+
+  return [Form, extendedApi] as const;
+}
diff --git a/packages/@core/ui-kit/form-ui/src/vben-form.vue b/packages/@core/ui-kit/form-ui/src/vben-form.vue
new file mode 100644
index 000000000..29556bb8a
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/vben-form.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { VbenFormProps } from './types';
+
+import { ref, watchEffect } from 'vue';
+
+import { useForwardPropsEmits } from '@vben-core/composables';
+
+import FormActions from './components/form-actions.vue';
+import { COMPONENT_BIND_EVENT_MAP, COMPONENT_MAP } from './config';
+import { Form } from './form-render';
+import { provideFormProps, useFormInitial } from './use-form-context';
+
+// 通过 extends 会导致热更新卡死
+interface Props extends VbenFormProps {}
+const props = withDefaults(defineProps<Props>(), {
+  actionWrapperClass: '',
+  collapsed: false,
+  collapsedRows: 1,
+  commonConfig: () => ({}),
+  handleReset: undefined,
+  handleSubmit: undefined,
+  layout: 'horizontal',
+  resetButtonOptions: () => ({}),
+  showCollapseButton: false,
+  showDefaultActions: true,
+  submitButtonOptions: () => ({}),
+  wrapperClass: 'grid-cols-1',
+});
+
+const forward = useForwardPropsEmits(props);
+
+const currentCollapsed = ref(false);
+
+const { delegatedSlots, form } = useFormInitial(props);
+
+provideFormProps([props, form]);
+
+const handleUpdateCollapsed = (value: boolean) => {
+  currentCollapsed.value = !!value;
+};
+
+watchEffect(() => {
+  currentCollapsed.value = props.collapsed;
+});
+</script>
+
+<template>
+  <Form
+    v-bind="forward"
+    :collapsed="currentCollapsed"
+    :component-bind-event-map="COMPONENT_BIND_EVENT_MAP"
+    :component-map="COMPONENT_MAP"
+    :form="form"
+  >
+    <template
+      v-for="slotName in delegatedSlots"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <slot :name="slotName" v-bind="slotProps"></slot>
+    </template>
+    <template #default="slotProps">
+      <slot v-bind="slotProps">
+        <FormActions
+          v-if="showDefaultActions"
+          :model-value="currentCollapsed"
+          @update:model-value="handleUpdateCollapsed"
+        />
+      </slot>
+    </template>
+  </Form>
+</template>
diff --git a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
new file mode 100644
index 000000000..b361552d0
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { ExtendedFormApi, VbenFormProps } from './types';
+
+import { useForwardPriorityValues } from '@vben-core/composables';
+
+import FormActions from './components/form-actions.vue';
+import { COMPONENT_BIND_EVENT_MAP, COMPONENT_MAP } from './config';
+import { Form } from './form-render';
+import { provideFormProps, useFormInitial } from './use-form-context';
+
+// 通过 extends 会导致热更新卡死，所以重复写了一遍
+interface Props extends VbenFormProps {
+  formApi: ExtendedFormApi;
+}
+
+const props = defineProps<Props>();
+
+const state = props.formApi?.useStore?.();
+
+const forward = useForwardPriorityValues(props, state);
+
+const { delegatedSlots, form } = useFormInitial(forward);
+
+provideFormProps([forward, form]);
+
+props.formApi?.mount?.(form);
+
+const handleUpdateCollapsed = (value: boolean) => {
+  props.formApi?.setState({ collapsed: !!value });
+};
+</script>
+
+<template>
+  <Form
+    v-bind="forward"
+    :component-bind-event-map="COMPONENT_BIND_EVENT_MAP"
+    :component-map="COMPONENT_MAP"
+    :form="form"
+  >
+    <template
+      v-for="slotName in delegatedSlots"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <slot :name="slotName" v-bind="slotProps"></slot>
+    </template>
+    <template #default="slotProps">
+      <slot v-bind="slotProps">
+        <FormActions
+          v-if="forward.showDefaultActions"
+          :model-value="state.collapsed"
+          @update:model-value="handleUpdateCollapsed"
+        />
+      </slot>
+    </template>
+  </Form>
+</template>
diff --git a/packages/@core/ui-kit/form-ui/tailwind.config.mjs b/packages/@core/ui-kit/form-ui/tailwind.config.mjs
new file mode 100644
index 000000000..f17f556fa
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/tailwind.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config';
diff --git a/packages/@core/ui-kit/form-ui/tsconfig.json b/packages/@core/ui-kit/form-ui/tsconfig.json
new file mode 100644
index 000000000..ce1a891fb
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
index 7bb1df738..07f611834 100644
--- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -22,7 +22,7 @@ import {
 
 import { useNamespace } from '@vben-core/composables';
 import { Ellipsis } from '@vben-core/icons';
-import { isHttpUrl } from '@vben-core/shared';
+import { isHttpUrl } from '@vben-core/shared/utils';
 
 import { useResizeObserver } from '@vueuse/core';
 
@@ -430,7 +430,7 @@ $namespace: vben;
   --menu-item-padding-x: 12px;
   --menu-item-popup-padding-y: 20px;
   --menu-item-popup-padding-x: 12px;
-  --menu-item-margin-y: 3px;
+  --menu-item-margin-y: 2px;
   --menu-item-margin-x: 0px;
   --menu-item-collapse-padding-y: 23.5px;
   --menu-item-collapse-padding-x: 0px;
@@ -475,7 +475,7 @@ $namespace: vben;
   &.is-rounded {
     --menu-item-margin-x: 8px;
     --menu-item-collapse-margin-x: 6px;
-    --menu-item-radius: 10px;
+    --menu-item-radius: 8px;
   }
 
   &.is-horizontal:not(.is-rounded) {
diff --git a/packages/@core/ui-kit/popup-ui/package.json b/packages/@core/ui-kit/popup-ui/package.json
index 754b829b3..9d8695788 100644
--- a/packages/@core/ui-kit/popup-ui/package.json
+++ b/packages/@core/ui-kit/popup-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/popup-ui",
-  "version": "5.1.1",
+  "version": "5.2.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts b/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
index f59cbc3a7..8d715ff82 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
@@ -5,7 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { DrawerApi } from '../drawer-api';
 
 // 模拟 Store 类
-vi.mock('@vben-core/shared', () => {
+vi.mock('@vben-core/shared/store', () => {
   return {
     isFunction: (fn: any) => typeof fn === 'function',
     Store: class {
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts b/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
index d088c2034..1f7b2cb92 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
@@ -1,6 +1,7 @@
 import type { DrawerApiOptions, DrawerState } from './drawer';
 
-import { isFunction, Store } from '@vben-core/shared';
+import { Store } from '@vben-core/shared/store';
+import { bindMethods, isFunction } from '@vben-core/shared/utils';
 
 export class DrawerApi {
   private api: Pick<
@@ -58,13 +59,14 @@ export class DrawerApi {
         },
       },
     );
-
+    this.state = this.store.state;
     this.api = {
       onBeforeClose,
       onCancel,
       onConfirm,
       onOpenChange,
     };
+    bindMethods(this);
   }
 
   // 如果需要多次更新状态，可以使用 batch 方法
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
index c6200aea7..cc2275883 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@@ -5,10 +5,10 @@ import { ref, watch } from 'vue';
 
 import {
   useIsMobile,
-  usePriorityValue,
+  usePriorityValues,
   useSimpleLocale,
 } from '@vben-core/composables';
-import { Info, X } from '@vben-core/icons';
+import { X } from '@vben-core/icons';
 import {
   Sheet,
   SheetClose,
@@ -18,12 +18,12 @@ import {
   SheetHeader,
   SheetTitle,
   VbenButton,
+  VbenHelpTooltip,
   VbenIconButton,
   VbenLoading,
-  VbenTooltip,
   VisuallyHidden,
 } from '@vben-core/shadcn-ui';
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 interface Props extends DrawerProps {
   class?: string;
@@ -42,20 +42,22 @@ const { $t } = useSimpleLocale();
 const { isMobile } = useIsMobile();
 const state = props.drawerApi?.useStore?.();
 
-const title = usePriorityValue('title', props, state);
-const description = usePriorityValue('description', props, state);
-const titleTooltip = usePriorityValue('titleTooltip', props, state);
-const showFooter = usePriorityValue('footer', props, state);
-const showLoading = usePriorityValue('loading', props, state);
-const closable = usePriorityValue('closable', props, state);
-const modal = usePriorityValue('modal', props, state);
-const confirmLoading = usePriorityValue('confirmLoading', props, state);
-const cancelText = usePriorityValue('cancelText', props, state);
-const confirmText = usePriorityValue('confirmText', props, state);
-const closeOnClickModal = usePriorityValue('closeOnClickModal', props, state);
-const closeOnPressEscape = usePriorityValue('closeOnPressEscape', props, state);
-const showCancelButton = usePriorityValue('showCancelButton', props, state);
-const showConfirmButton = usePriorityValue('showConfirmButton', props, state);
+const {
+  cancelText,
+  closable,
+  closeOnClickModal,
+  closeOnPressEscape,
+  confirmLoading,
+  confirmText,
+  description,
+  footer: showFooter,
+  loading: showLoading,
+  modal,
+  showCancelButton,
+  showConfirmButton,
+  title,
+  titleTooltip,
+} = usePriorityValues(props, state);
 
 watch(
   () => showLoading.value,
@@ -116,12 +118,9 @@ function pointerDownOutside(e: Event) {
             <slot name="title">
               {{ title }}
 
-              <VbenTooltip v-if="titleTooltip" side="right">
-                <template #trigger>
-                  <Info class="inline-flex size-5 cursor-pointer pb-1" />
-                </template>
+              <VbenHelpTooltip v-if="titleTooltip" trigger-class="pb-1">
                 {{ titleTooltip }}
-              </VbenTooltip>
+              </VbenHelpTooltip>
             </slot>
           </SheetTitle>
           <SheetDescription v-if="description" class="mt-1 text-xs">
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts b/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
index c8040e3de..52a11d1c7 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
@@ -6,7 +6,7 @@ import type {
 
 import { defineComponent, h, inject, nextTick, provide, reactive } from 'vue';
 
-import { useStore } from '@vben-core/shared';
+import { useStore } from '@vben-core/shared/store';
 
 import VbenDrawer from './drawer.vue';
 import { DrawerApi } from './drawer-api';
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts b/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
index 2f15d7d46..90eb634d2 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
@@ -3,7 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { ModalApi } from '../modal-api'; // 假设 ModalApi 位于同一目录
 import type { ModalState } from '../modal';
 
-vi.mock('@vben-core/shared', () => {
+vi.mock('@vben-core/shared/store', () => {
   return {
     isFunction: (fn: any) => typeof fn === 'function',
     Store: class {
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
index cb20f4e72..e664c52f5 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
@@ -1,6 +1,7 @@
 import type { ModalApiOptions, ModalState } from './modal';
 
-import { isFunction, Store } from '@vben-core/shared';
+import { Store } from '@vben-core/shared/store';
+import { bindMethods, isFunction } from '@vben-core/shared/utils';
 
 export class ModalApi {
   private api: Pick<
@@ -65,12 +66,15 @@ export class ModalApi {
       },
     );
 
+    this.state = this.store.state;
+
     this.api = {
       onBeforeClose,
       onCancel,
       onConfirm,
       onOpenChange,
     };
+    bindMethods(this);
   }
 
   // 如果需要多次更新状态，可以使用 batch 方法
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
index 661b7e669..8a5cc4a83 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -5,10 +5,10 @@ import { computed, nextTick, ref, watch } from 'vue';
 
 import {
   useIsMobile,
-  usePriorityValue,
+  usePriorityValues,
   useSimpleLocale,
 } from '@vben-core/composables';
-import { Expand, Info, Shrink } from '@vben-core/icons';
+import { Expand, Shrink } from '@vben-core/icons';
 import {
   Dialog,
   DialogContent,
@@ -17,12 +17,12 @@ import {
   DialogHeader,
   DialogTitle,
   VbenButton,
+  VbenHelpTooltip,
   VbenIconButton,
   VbenLoading,
-  VbenTooltip,
   VisuallyHidden,
 } from '@vben-core/shadcn-ui';
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { useModalDraggable } from './use-modal-draggable';
 
@@ -52,25 +52,27 @@ const { $t } = useSimpleLocale();
 const { isMobile } = useIsMobile();
 const state = props.modalApi?.useStore?.();
 
-const header = usePriorityValue('header', props, state);
-const title = usePriorityValue('title', props, state);
-const fullscreen = usePriorityValue('fullscreen', props, state);
-const description = usePriorityValue('description', props, state);
-const titleTooltip = usePriorityValue('titleTooltip', props, state);
-const showFooter = usePriorityValue('footer', props, state);
-const showLoading = usePriorityValue('loading', props, state);
-const closable = usePriorityValue('closable', props, state);
-const modal = usePriorityValue('modal', props, state);
-const centered = usePriorityValue('centered', props, state);
-const confirmLoading = usePriorityValue('confirmLoading', props, state);
-const cancelText = usePriorityValue('cancelText', props, state);
-const confirmText = usePriorityValue('confirmText', props, state);
-const draggable = usePriorityValue('draggable', props, state);
-const fullscreenButton = usePriorityValue('fullscreenButton', props, state);
-const closeOnClickModal = usePriorityValue('closeOnClickModal', props, state);
-const closeOnPressEscape = usePriorityValue('closeOnPressEscape', props, state);
-const showCancelButton = usePriorityValue('showCancelButton', props, state);
-const showConfirmButton = usePriorityValue('showConfirmButton', props, state);
+const {
+  cancelText,
+  centered,
+  closable,
+  closeOnClickModal,
+  closeOnPressEscape,
+  confirmLoading,
+  confirmText,
+  description,
+  draggable,
+  footer: showFooter,
+  fullscreen,
+  fullscreenButton,
+  header,
+  loading: showLoading,
+  modal,
+  showCancelButton,
+  showConfirmButton,
+  title,
+  titleTooltip,
+} = usePriorityValues(props, state);
 
 const shouldFullscreen = computed(
   () => (fullscreen.value && header.value) || isMobile.value,
@@ -184,12 +186,9 @@ function pointerDownOutside(e: Event) {
             {{ title }}
 
             <slot v-if="titleTooltip" name="titleTooltip">
-              <VbenTooltip side="right">
-                <template #trigger>
-                  <Info class="inline-flex size-5 cursor-pointer pb-1" />
-                </template>
+              <VbenHelpTooltip trigger-class="pb-1">
                 {{ titleTooltip }}
-              </VbenTooltip>
+              </VbenHelpTooltip>
             </slot>
           </slot>
         </DialogTitle>
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts b/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
index 01f01e0c6..d462a5f85 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
@@ -2,7 +2,7 @@ import type { ExtendedModalApi, ModalApiOptions, ModalProps } from './modal';
 
 import { defineComponent, h, inject, nextTick, provide, reactive } from 'vue';
 
-import { useStore } from '@vben-core/shared';
+import { useStore } from '@vben-core/shared/store';
 
 import VbenModal from './modal.vue';
 import { ModalApi } from './modal-api';
@@ -33,7 +33,15 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
           ...attrs,
           ...slots,
         });
-        return () => h(connectedComponent, { ...props, ...attrs }, slots);
+        return () =>
+          h(
+            connectedComponent,
+            {
+              ...props,
+              ...attrs,
+            },
+            slots,
+          );
       },
       {
         inheritAttrs: false,
@@ -65,7 +73,15 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
   const Modal = defineComponent(
     (props: ModalProps, { attrs, slots }) => {
       return () =>
-        h(VbenModal, { ...props, ...attrs, modalApi: extendedApi }, slots);
+        h(
+          VbenModal,
+          {
+            ...props,
+            ...attrs,
+            modalApi: extendedApi,
+          },
+          slots,
+        );
     },
     {
       inheritAttrs: false,
diff --git a/packages/@core/ui-kit/shadcn-ui/components.json b/packages/@core/ui-kit/shadcn-ui/components.json
index 098d28f90..b497f43c3 100644
--- a/packages/@core/ui-kit/shadcn-ui/components.json
+++ b/packages/@core/ui-kit/shadcn-ui/components.json
@@ -11,6 +11,6 @@
   "framework": "vite",
   "aliases": {
     "components": "@vben-core/shadcn-ui/components",
-    "utils": "@vben-core/shared"
+    "utils": "@vben-core/shared/utils"
   }
 }
diff --git a/packages/@core/ui-kit/shadcn-ui/package.json b/packages/@core/ui-kit/shadcn-ui/package.json
index 6842201e3..b2bfbd3f5 100644
--- a/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/packages/@core/ui-kit/shadcn-ui/package.json
@@ -11,8 +11,8 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "build": "pnpm unbuild",
-    "prepublishOnly": "npm run build"
+    "#build": "pnpm unbuild",
+    "#prepublishOnly": "npm run build"
   },
   "files": [
     "dist"
@@ -20,24 +20,22 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
+  "#main": "./dist/index.mjs",
+  "main": "./src/index.ts",
+  "#module": "./dist/index.mjs",
+  "module": "./src/index.ts",
   "exports": {
     ".": {
       "types": "./src/index.ts",
       "development": "./src/index.ts",
-      "default": "./dist/index.mjs"
-    },
-    "./*": {
-      "types": "./src/*/index.ts",
-      "development": "./src/*/index.ts",
-      "default": "./dist/*/index.mjs"
+      "//default": "./dist/index.mjs",
+      "default": "./src/index.ts"
     }
   },
   "publishConfig": {
     "exports": {
       ".": {
-        "default": "./dist/index.mjs"
+        "default": "./src/index.ts"
       }
     }
   },
@@ -50,6 +48,7 @@
     "class-variance-authority": "^0.7.0",
     "lucide-vue-next": "^0.439.0",
     "radix-vue": "^1.9.5",
+    "vee-validate": "^4.13.2",
     "vue": "^3.5.3"
   }
 }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
new file mode 100644
index 000000000..20fb42a38
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
@@ -0,0 +1,24 @@
+import type { AsTag } from 'radix-vue';
+
+import type { ButtonVariants, ButtonVariantSize } from '../ui/button';
+
+import type { Component } from 'vue';
+
+export interface VbenButtonProps {
+  /**
+   * The element or component this component should render as. Can be overwrite by `asChild`
+   * @defaultValue "div"
+   */
+  as?: AsTag | Component;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * Read our [Composition](https://www.radix-vue.com/guides/composition.html) guide for more details.
+   */
+  asChild?: boolean;
+  class?: any;
+  disabled?: boolean;
+  loading?: boolean;
+  size?: ButtonVariantSize;
+  variant?: ButtonVariants;
+}
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
index 2f46c91ef..eedff519a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
@@ -1,20 +1,16 @@
 <script setup lang="ts">
+import type { VbenButtonProps } from './button';
+
 import { computed } from 'vue';
 
 import { LoaderCircle } from '@vben-core/icons';
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
-import { Primitive, type PrimitiveProps } from 'radix-vue';
+import { Primitive } from 'radix-vue';
 
-import { type ButtonVariants, buttonVariants } from '../ui/button';
+import { buttonVariants } from '../ui/button';
 
-interface Props extends PrimitiveProps {
-  class?: any;
-  disabled?: boolean;
-  loading?: boolean;
-  size?: ButtonVariants['size'];
-  variant?: ButtonVariants['variant'];
-}
+interface Props extends VbenButtonProps {}
 
 const props = withDefaults(defineProps<Props>(), {
   as: 'button',
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue b/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
index f80347322..bd44c81c3 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
@@ -1,22 +1,21 @@
 <script setup lang="ts">
 import type { ButtonVariants } from '../ui/button';
+import type { VbenButtonProps } from './button';
 
 import { computed, useSlots } from 'vue';
 
-import { cn } from '@vben-core/shared';
-
-import { type PrimitiveProps } from 'radix-vue';
+import { cn } from '@vben-core/shared/utils';
 
 import { VbenTooltip } from '../tooltip';
 import VbenButton from './button.vue';
 
-interface Props extends PrimitiveProps {
+interface Props extends VbenButtonProps {
   class?: any;
   disabled?: boolean;
   onClick?: () => void;
   tooltip?: string;
   tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
-  variant?: ButtonVariants['variant'];
+  variant?: ButtonVariants;
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/button/index.ts
index e160b3630..4afd1c25e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/index.ts
@@ -1,2 +1,3 @@
+export type * from './button';
 export { default as VbenButton } from './button.vue';
 export { default as VbenIconButton } from './icon-button.vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue b/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
index 7dd14eb9b..6278b6560 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
@@ -1,24 +1,26 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
 
+import { useId } from 'vue';
+
 import { useForwardPropsEmits } from 'radix-vue';
 
 import { Checkbox } from '../ui/checkbox';
 
-const props = defineProps<
-  {
-    name: string;
-  } & CheckboxRootProps
->();
+const props = defineProps<CheckboxRootProps>();
 
 const emits = defineEmits<CheckboxRootEmits>();
 
 const checked = defineModel<boolean>('checked');
 
 const forwarded = useForwardPropsEmits(props, emits);
+
+const id = useId();
 </script>
 
 <template>
-  <Checkbox v-bind="forwarded" :id="name" v-model:checked="checked" />
-  <label :for="name" class="ml-2 cursor-pointer text-sm"> <slot></slot> </label>
+  <div class="flex items-center">
+    <Checkbox v-bind="forwarded" :id="id" v-model:checked="checked" />
+    <label :for="id" class="ml-2 cursor-pointer text-sm"> <slot></slot> </label>
+  </div>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/count-to-animator/count-to-animator.vue b/packages/@core/ui-kit/shadcn-ui/src/components/count-to-animator/count-to-animator.vue
index 4a2bdd3bf..f252049ca 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/count-to-animator/count-to-animator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/count-to-animator/count-to-animator.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, unref, watch, watchEffect } from 'vue';
 
-import { isNumber } from '@vben-core/shared';
+import { isNumber } from '@vben-core/shared/utils';
 
 import { TransitionPresets, useTransition } from '@vueuse/core';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/expandable-arrow.vue b/packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/expandable-arrow.vue
new file mode 100644
index 000000000..c16f431f7
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/expandable-arrow.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { ChevronDown } from '@vben-core/icons';
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  class?: string;
+}>();
+
+// 控制箭头展开/收起状态
+const collapsed = defineModel({ default: false });
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'text-primary hover:text-primary-hover inline-flex cursor-pointer items-center',
+        props.class,
+      )
+    "
+    @click="collapsed = !collapsed"
+  >
+    <slot :is-expanded="collapsed">
+      {{ collapsed }}
+      <!-- <span>{{ isExpanded ? '收起' : '展开' }}</span> -->
+    </slot>
+    <div
+      :class="{ 'rotate-180': !collapsed }"
+      class="transition-transform duration-300"
+    >
+      <slot name="icon">
+        <ChevronDown class="size-4" />
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/index.ts
new file mode 100644
index 000000000..a35bd9a27
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/index.ts
@@ -0,0 +1 @@
+export { default as VbenExpandableArrow } from './expandable-arrow.vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue b/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue
index 113f36f7d..59f28978c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue
@@ -22,7 +22,7 @@ isFullscreen.value = !!(
 </script>
 <template>
   <VbenIconButton @click="toggle">
-    <Minimize v-if="isFullscreen" class="size-4" />
-    <Maximize v-else class="size-4" />
+    <Minimize v-if="isFullscreen" class="text-foreground size-4" />
+    <Maximize v-else class="text-foreground size-4" />
   </VbenIconButton>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue b/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue
index 4a30fa3c9..afaad24e9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue
@@ -2,7 +2,12 @@
 import { type Component, computed } from 'vue';
 
 import { Icon, IconDefault } from '@vben-core/icons';
-import { isFunction, isHttpUrl, isObject, isString } from '@vben-core/shared';
+import {
+  isFunction,
+  isHttpUrl,
+  isObject,
+  isString,
+} from '@vben-core/shared/utils';
 
 const props = defineProps<{
   // 没有是否显示默认图标
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/index.ts
index d3ccfa4c1..83ca3239f 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/index.ts
@@ -6,10 +6,10 @@ export * from './checkbox';
 export * from './context-menu';
 export * from './count-to-animator';
 export * from './dropdown-menu';
+export * from './expandable-arrow';
 export * from './full-screen';
 export * from './hover-card';
 export * from './icon';
-export * from './input';
 export * from './input-password';
 export * from './link';
 export * from './logo';
@@ -19,9 +19,11 @@ export * from './popover';
 export * from './render-content';
 export * from './scrollbar';
 export * from './segmented';
+export * from './select';
 export * from './spinner';
 export * from './swap';
 export * from './tooltip';
+export * from './ui/accordion';
 export * from './ui/avatar';
 export * from './ui/badge';
 export * from './ui/breadcrumb';
@@ -30,16 +32,21 @@ export * from './ui/card';
 export * from './ui/checkbox';
 export * from './ui/dialog';
 export * from './ui/dropdown-menu';
+export * from './ui/form';
 export * from './ui/hover-card';
 export * from './ui/input';
+export * from './ui/label';
 export * from './ui/number-field';
 export * from './ui/pin-input';
 export * from './ui/popover';
+export * from './ui/radio-group';
 export * from './ui/scroll-area';
 export * from './ui/select';
+export * from './ui/separator';
 export * from './ui/sheet';
 export * from './ui/switch';
 export * from './ui/tabs';
+export * from './ui/textarea';
 export * from './ui/toast';
 export * from './ui/toggle';
 export * from './ui/toggle-group';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue b/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
index d936a3f2c..16e2312d5 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
@@ -2,13 +2,18 @@
 import { ref, useSlots } from 'vue';
 
 import { Eye, EyeOff } from '@vben-core/icons';
+import { cn } from '@vben-core/shared/utils';
 
-import { useForwardProps } from 'radix-vue';
-
-import { type InputProps, VbenInput } from '../input';
+import { Input } from '../ui/input';
 import PasswordStrength from './password-strength.vue';
 
-interface Props extends InputProps {}
+interface Props {
+  class?: any;
+  /**
+   * 是否显示密码强度
+   */
+  passwordStrength?: boolean;
+}
 
 defineOptions({
   inheritAttrs: false,
@@ -19,30 +24,30 @@ const props = defineProps<Props>();
 const modelValue = defineModel<string>();
 
 const slots = useSlots();
-const forward = useForwardProps(props);
 
 const show = ref(false);
 </script>
 
 <template>
-  <div class="relative">
-    <VbenInput
+  <div class="relative w-full">
+    <Input
+      v-bind="$attrs"
       v-model="modelValue"
-      v-bind="{ ...forward, ...$attrs }"
+      :class="cn(props.class)"
       :type="show ? 'text' : 'password'"
-    >
-      <template v-if="passwordStrength">
-        <PasswordStrength :password="modelValue" />
-        <p
-          v-if="slots.strengthText"
-          class="text-muted-foreground mt-1.5 text-xs"
-        >
-          <slot name="strengthText"> </slot>
-        </p>
-      </template>
-    </VbenInput>
+    />
+    <template v-if="passwordStrength">
+      <PasswordStrength :password="modelValue" />
+      <p v-if="slots.strengthText" class="text-muted-foreground mt-1.5 text-xs">
+        <slot name="strengthText"> </slot>
+      </p>
+    </template>
     <div
-      class="hover:text-foreground text-foreground/60 absolute inset-y-0 right-0 top-3 flex cursor-pointer pr-3 text-lg leading-5"
+      :class="{
+        'top-3': !!passwordStrength,
+        'top-1/2 -translate-y-1/2 items-center': !passwordStrength,
+      }"
+      class="hover:text-foreground text-foreground/60 absolute inset-y-0 right-0 flex cursor-pointer pr-3 text-lg leading-5"
       @click="show = !show"
     >
       <Eye v-if="show" class="size-4" />
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/input/index.ts
deleted file mode 100644
index e036594ed..000000000
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as VbenInput } from './input.vue';
-export type * from './types';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue b/packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue
deleted file mode 100644
index db8e8d16f..000000000
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import type { InputProps } from './types';
-
-import { computed } from 'vue';
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-const props = defineProps<InputProps>();
-
-const modelValue = defineModel<number | string>();
-
-const inputClass = computed(() => {
-  if (props.status === 'error') {
-    return 'border-destructive';
-  }
-  return '';
-});
-</script>
-
-<template>
-  <div class="relative mb-6">
-    <label
-      v-if="!label"
-      :for="name"
-      class="mb-2 block text-sm font-medium dark:text-white"
-    >
-      {{ label }}
-    </label>
-    <input
-      :id="name"
-      v-model="modelValue"
-      :class="[props.class, inputClass]"
-      autocomplete="off"
-      class="border-input bg-input-background ring-offset-background placeholder:text-muted-foreground/60 focus-visible:ring-ring focus:border-primary flex h-10 w-full rounded-md border p-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-      required
-      type="text"
-      v-bind="$attrs"
-    />
-
-    <slot></slot>
-
-    <Transition name="slide-up">
-      <p
-        v-if="status === 'error'"
-        class="text-destructive bottom-130 absolute mt-1 text-xs"
-      >
-        {{ errorTip }}
-      </p>
-    </Transition>
-  </div>
-</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input/types.ts b/packages/@core/ui-kit/shadcn-ui/src/components/input/types.ts
deleted file mode 100644
index 0b2e18462..000000000
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input/types.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-interface InputProps {
-  class?: any;
-  /**
-   * 错误提示信息
-   */
-  errorTip?: string;
-  /**
-   * 输入框的 label
-   */
-  label?: string;
-  /**
-   * 输入框的 name
-   */
-  name?: string;
-  /**
-   * 是否显示密码强度
-   */
-  passwordStrength?: boolean;
-  /**
-   * 输入框的校验状态
-   */
-  status?: 'default' | 'error';
-}
-
-export type { InputProps };
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/link/link.vue b/packages/@core/ui-kit/shadcn-ui/src/components/link/link.vue
index 0d92fbcf2..a56a0110c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/link/link.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/link/link.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { Primitive, type PrimitiveProps } from 'radix-vue';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/menu-badge/menu-badge.vue b/packages/@core/ui-kit/shadcn-ui/src/components/menu-badge/menu-badge.vue
index 92bac67c6..b1dd94c2b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/menu-badge/menu-badge.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/menu-badge/menu-badge.vue
@@ -3,7 +3,7 @@ import type { MenuRecordBadgeRaw } from '@vben-core/typings';
 
 import { computed } from 'vue';
 
-import { isValidColor } from '@vben-core/shared';
+import { isValidColor } from '@vben-core/shared/color';
 
 import BadgeDot from './menu-badge-dot.vue';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
index f0b66d6e7..c7c8ada05 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PinInputProps } from './types';
 
-import { computed, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, ref, useId, watch } from 'vue';
 
 import { VbenButton } from '../button';
 import { PinInput, PinInputGroup, PinInputInput } from '../ui/pin-input';
@@ -14,21 +14,27 @@ const props = withDefaults(defineProps<PinInputProps>(), {
   btnLoading: false,
   codeLength: 6,
   handleSendCode: async () => {},
+  maxTime: 60,
 });
 
 const emit = defineEmits<{
   complete: [];
 }>();
 
+const timer = ref<ReturnType<typeof setTimeout>>();
+
 const modelValue = defineModel<string>();
 
 const inputValue = ref<string[]>([]);
+const countdown = ref(0);
 
-const inputClass = computed(() => {
-  if (props.status === 'error') {
-    return 'border-destructive';
-  }
-  return '';
+const btnText = computed(() => {
+  const countdownValue = countdown.value;
+  return props.createText?.(countdownValue);
+});
+
+const btnLoading = computed(() => {
+  return props.loading || countdown.value > 0;
 });
 
 watch(
@@ -42,45 +48,58 @@ function handleComplete(e: string[]) {
   modelValue.value = e.join('');
   emit('complete');
 }
+
+async function handleSend(e: Event) {
+  e?.preventDefault();
+  await props.handleSendCode();
+  countdown.value = props.maxTime;
+  startCountdown();
+}
+
+function startCountdown() {
+  if (countdown.value > 0) {
+    timer.value = setTimeout(() => {
+      countdown.value--;
+      startCountdown();
+    }, 1000);
+  }
+}
+
+onBeforeUnmount(() => {
+  countdown.value = 0;
+  clearTimeout(timer.value);
+});
+
+const id = useId();
 </script>
 
 <template>
-  <div class="relative mb-6">
-    <label :for="name" class="mb-2 block text-sm font-medium">
-      {{ label }}
-    </label>
-    <PinInput
-      :id="name"
-      v-model="inputValue"
-      :class="inputClass"
-      class="flex justify-between"
-      otp
-      placeholder="○"
-      type="number"
-      @complete="handleComplete"
-    >
-      <PinInputGroup>
+  <PinInput
+    :id="id"
+    v-model="inputValue"
+    class="flex w-full justify-between"
+    otp
+    placeholder="○"
+    type="number"
+    @complete="handleComplete"
+  >
+    <div class="relative flex w-full">
+      <PinInputGroup class="mr-2">
         <PinInputInput
-          v-for="(id, index) in codeLength"
-          :key="id"
+          v-for="(item, index) in codeLength"
+          :key="item"
           :index="index"
         />
       </PinInputGroup>
       <VbenButton
         :loading="btnLoading"
-        class="w-[300px] xl:w-full"
+        class="flex-grow"
         size="lg"
         variant="outline"
-        @click="handleSendCode"
+        @click="handleSend"
       >
         {{ btnText }}
       </VbenButton>
-    </PinInput>
-    <p
-      v-if="status === 'error'"
-      class="text-destructive bottom-130 absolute mt-1 text-xs"
-    >
-      {{ errorTip }}
-    </p>
-  </div>
+    </div>
+  </PinInput>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts
index d5f603f03..0439d3b24 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts
@@ -1,38 +1,26 @@
 interface PinInputProps {
-  /**
-   * 发送验证码按钮loading
-   */
-  btnLoading?: boolean;
-  /**
-   * 发送验证码按钮文本
-   */
-  btnText?: string;
   class?: any;
   /**
    * 验证码长度
    */
   codeLength?: number;
   /**
-   * 错误提示信息
+   * 发送验证码按钮文本
    */
-  errorTip?: string;
+  createText?: (countdown: number) => string;
   /**
    * 自定义验证码发送逻辑
    * @returns
    */
   handleSendCode?: () => Promise<void>;
   /**
-   * 输入框的 label
+   * 发送验证码按钮loading
    */
-  label: string;
+  loading?: boolean;
   /**
-   * 输入框的 name
+   * 最大重试时间
    */
-  name: string;
-  /**
-   * 输入框的校验状态
-   */
-  status?: 'default' | 'error';
+  maxTime?: number;
 }
 
 export type { PinInputProps };
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue b/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
index e4228767b..8476d7a84 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
@@ -1,26 +1,39 @@
-<script setup lang="ts">
-import type { Component } from 'vue';
+<script lang="ts">
+import type { Component, PropType } from 'vue';
+import { defineComponent, h } from 'vue';
 
-defineOptions({
+import { isFunction, isObject } from '@vben-core/shared/utils';
+
+export default defineComponent({
   name: 'RenderContent',
-});
-
-const props = withDefaults(
-  defineProps<{
-    content: Component | string | undefined;
-    props?: Record<string, any>;
-  }>(),
-  {
-    props: () => ({}),
+  props: {
+    content: {
+      default: undefined as
+        | PropType<(() => any) | Component | string>
+        | undefined,
+      type: [Object, String, Function],
+    },
   },
-);
-
-const isComponent = typeof props.content === 'object' && props.content !== null;
+  setup(props, { attrs, slots }) {
+    return () => {
+      if (!props.content) {
+        return null;
+      }
+      const isComponent =
+        (isObject(props.content) || isFunction(props.content)) &&
+        props.content !== null;
+      if (!isComponent) {
+        return props.content;
+      }
+      return h(props.content as never, {
+        ...attrs,
+        props: {
+          ...props,
+          ...attrs,
+        },
+        slots,
+      });
+    };
+  },
+});
 </script>
-
-<template>
-  <component :is="content" v-bind="props" v-if="isComponent" />
-  <template v-else-if="!isComponent">
-    {{ content }}
-  </template>
-</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue b/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
index 122692394..68e2ab154 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { ScrollArea, ScrollBar } from '../ui/scroll-area';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
index e89ce4133..886eb6d21 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
+import type { TabsIndicatorProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
-import {
-  TabsIndicator,
-  type TabsIndicatorProps,
-  useForwardProps,
-} from 'radix-vue';
+import { TabsIndicator, useForwardProps } from 'radix-vue';
 
 const props = defineProps<{ class?: any } & TabsIndicatorProps>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/select/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/select/index.ts
new file mode 100644
index 000000000..1aa5d9888
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/select/index.ts
@@ -0,0 +1 @@
+export { default as VbenSelect } from './select.vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue b/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
new file mode 100644
index 000000000..6c80e0fb9
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+
+interface Props {
+  class?: any;
+  options?: Array<{ label: string; value: string }>;
+  placeholder?: string;
+}
+
+const props = defineProps<Props>();
+</script>
+<template>
+  <Select>
+    <SelectTrigger :class="props.class">
+      <SelectValue :placeholder="placeholder" />
+    </SelectTrigger>
+    <SelectContent>
+      <template v-for="item in options" :key="item.value">
+        <SelectItem :value="item.value"> {{ item.label }} </SelectItem>
+      </template>
+    </SelectContent>
+  </Select>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
index d1c36cd2e..f2afbffc7 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 interface Props {
   class?: string;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
index de0b70507..df76c153a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 interface Props {
   class?: string;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue
new file mode 100644
index 000000000..47017472b
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+import { CircleHelp } from 'lucide-vue-next';
+
+import Tooltip from './tooltip.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps<{ triggerClass?: string }>();
+</script>
+
+<template>
+  <Tooltip :delay-duration="300" side="right">
+    <template #trigger>
+      <slot name="trigger">
+        <CircleHelp
+          :class="
+            cn(
+              'text-foreground/80 hover:text-foreground inline-flex size-5 cursor-pointer',
+              triggerClass,
+            )
+          "
+        />
+      </slot>
+    </template>
+    <slot></slot>
+  </Tooltip>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/index.ts
index b2a68987a..65bf053f6 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/index.ts
@@ -1 +1,2 @@
+export { default as VbenHelpTooltip } from './help-tooltip.vue';
 export { default as VbenTooltip } from './tooltip.vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/Accordion.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/Accordion.vue
new file mode 100644
index 000000000..fb8f05cc0
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/Accordion.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  AccordionRoot,
+  type AccordionRootEmits,
+  type AccordionRootProps,
+  useForwardPropsEmits,
+} from 'radix-vue';
+
+const props = defineProps<AccordionRootProps>();
+const emits = defineEmits<AccordionRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <AccordionRoot v-bind="forwarded">
+    <slot></slot>
+  </AccordionRoot>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionContent.vue
new file mode 100644
index 000000000..5183a5bec
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionContent.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { AccordionContent, type AccordionContentProps } from 'radix-vue';
+
+const props = defineProps<{ class?: any } & AccordionContentProps>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="delegatedProps"
+    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+  >
+    <div :class="cn('pb-4 pt-0', props.class)">
+      <slot></slot>
+    </div>
+  </AccordionContent>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionItem.vue
new file mode 100644
index 000000000..189d0c254
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionItem.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import {
+  AccordionItem,
+  type AccordionItemProps,
+  useForwardProps,
+} from 'radix-vue';
+
+const props = defineProps<{ class?: any } & AccordionItemProps>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <AccordionItem v-bind="forwardedProps" :class="cn('border-b', props.class)">
+    <slot></slot>
+  </AccordionItem>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionTrigger.vue
new file mode 100644
index 000000000..ed40834cd
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionTrigger.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronDownIcon } from '@radix-icons/vue';
+import {
+  AccordionHeader,
+  AccordionTrigger,
+  type AccordionTriggerProps,
+} from 'radix-vue';
+
+const props = defineProps<{ class?: any } & AccordionTriggerProps>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+      <slot name="icon">
+        <ChevronDownIcon
+          class="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/index.ts
new file mode 100644
index 000000000..821d3a143
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/index.ts
@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue';
+export { default as AccordionContent } from './AccordionContent.vue';
+export { default as AccordionItem } from './AccordionItem.vue';
+export { default as AccordionTrigger } from './AccordionTrigger.vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/avatar/Avatar.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/avatar/Avatar.vue
index 07e0c7f0f..d3eeb4f0f 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/avatar/Avatar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/avatar/Avatar.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { AvatarRoot } from 'radix-vue';
 
@@ -9,7 +7,7 @@ import { avatarVariant, type AvatarVariants } from './avatar';
 
 const props = withDefaults(
   defineProps<{
-    class?: HTMLAttributes['class'];
+    class?: any;
     shape?: AvatarVariants['shape'];
     size?: AvatarVariants['size'];
   }>(),
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/badge/Badge.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/badge/Badge.vue
index 8e3f409d2..729dc9dc3 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/badge/Badge.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/badge/Badge.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { type BadgeVariants, badgeVariants } from './badge';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
   variant?: BadgeVariants['variant'];
 }>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/Breadcrumb.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/Breadcrumb.vue
index b44ced600..eb065de9e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/Breadcrumb.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/Breadcrumb.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
-
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
index 817c6744b..e0a6a7c84 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -1,12 +1,10 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { DotsHorizontalIcon } from '@radix-icons/vue';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbItem.vue
index 702ac804d..0ceb3eb35 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbItem.vue
@@ -1,10 +1,8 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbLink.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbLink.vue
index d052bda45..c0b95c7ee 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbLink.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbLink.vue
@@ -1,16 +1,11 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { Primitive, type PrimitiveProps } from 'radix-vue';
 
-const props = withDefaults(
-  defineProps<{ class?: HTMLAttributes['class'] } & PrimitiveProps>(),
-  {
-    as: 'a',
-  },
-);
+const props = withDefaults(defineProps<{ class?: any } & PrimitiveProps>(), {
+  as: 'a',
+});
 </script>
 
 <template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbList.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbList.vue
index bec7d3ec8..94600a9b8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbList.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbList.vue
@@ -1,10 +1,8 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbPage.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbPage.vue
index 6ee5b3949..948aa471d 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbPage.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbPage.vue
@@ -1,10 +1,8 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbSeparator.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
index 90a162989..c221f4e03 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -1,12 +1,10 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { ChevronRightIcon } from '@radix-icons/vue';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/Button.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/Button.vue
index ada8daab6..cd7957259 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/Button.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/Button.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants, ButtonVariantSize } from './types';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { Primitive, type PrimitiveProps } from 'radix-vue';
 
-import { type ButtonVariants, buttonVariants } from './button';
+import { buttonVariants } from './button';
 
 interface Props extends PrimitiveProps {
-  class?: HTMLAttributes['class'];
-  size?: ButtonVariants['size'];
-  variant?: 'heavy' & ButtonVariants['variant'];
+  class?: any;
+  size?: ButtonVariantSize;
+  variant?: 'heavy' & ButtonVariants;
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/button.ts b/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/button.ts
index e1d32d00e..3ca9b4b42 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/button.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/button.ts
@@ -1,4 +1,4 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 
 export const buttonVariants = cva(
   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed  disabled:opacity-50',
@@ -32,5 +32,3 @@ export const buttonVariants = cva(
     },
   },
 );
-
-export type ButtonVariants = VariantProps<typeof buttonVariants>;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/index.ts
index 4b244d969..4a575f94d 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/index.ts
@@ -1,3 +1,5 @@
 export * from './button';
 
 export { default as Button } from './Button.vue';
+
+export type * from './types';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/types.ts b/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/types.ts
new file mode 100644
index 000000000..cc5e174f9
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/types.ts
@@ -0,0 +1,20 @@
+export type ButtonVariantSize =
+  | 'default'
+  | 'icon'
+  | 'lg'
+  | 'sm'
+  | 'xs'
+  | null
+  | undefined;
+
+export type ButtonVariants =
+  | 'default'
+  | 'destructive'
+  | 'ghost'
+  | 'heavy'
+  | 'icon'
+  | 'link'
+  | 'outline'
+  | 'secondary'
+  | null
+  | undefined;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/Card.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/Card.vue
index 315ac97fe..8f396a6af 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/Card.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/Card.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardContent.vue
index 06753a772..8e8fe5066 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardContent.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardDescription.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardDescription.vue
index 4ba3b5224..7797c367d 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardDescription.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardFooter.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardFooter.vue
index 4ae5c28d6..01af357cb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardFooter.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardFooter.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardHeader.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardHeader.vue
index 62bced544..ced1e8b13 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardHeader.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardHeader.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardTitle.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardTitle.vue
index d383a9635..e357cdc40 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardTitle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardTitle.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/checkbox/Checkbox.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/checkbox/Checkbox.vue
index 6d3d9d1a6..e22cd6394 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/checkbox/Checkbox.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/checkbox/Checkbox.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
 
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { CheckIcon } from '@radix-icons/vue';
 import {
@@ -12,9 +12,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & CheckboxRootProps
->();
+const props = defineProps<{ class?: any } & CheckboxRootProps>();
 const emits = defineEmits<CheckboxRootEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuCheckboxItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
index 64568619b..576a81979 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { CheckIcon } from '@radix-icons/vue';
 import {
@@ -12,9 +12,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & ContextMenuCheckboxItemProps
->();
+const props = defineProps<{ class?: any } & ContextMenuCheckboxItemProps>();
 const emits = defineEmits<ContextMenuCheckboxItemEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuContent.vue
index 3a9e105e8..87796a110 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   ContextMenuContent,
@@ -11,9 +11,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & ContextMenuContentProps
->();
+const props = defineProps<{ class?: any } & ContextMenuContentProps>();
 const emits = defineEmits<ContextMenuContentEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuItem.vue
index e6f771b3b..ed11878d4 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   ContextMenuItem,
@@ -11,7 +11,7 @@ import {
 } from 'radix-vue';
 
 const props = defineProps<
-  { class?: HTMLAttributes['class']; inset?: boolean } & ContextMenuItemProps
+  { class?: any; inset?: boolean } & ContextMenuItemProps
 >();
 const emits = defineEmits<ContextMenuItemEmits>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuLabel.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuLabel.vue
index 98b400bdb..eff8fe4c0 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuLabel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuLabel.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue';
 
 const props = defineProps<
-  { class?: HTMLAttributes['class']; inset?: boolean } & ContextMenuLabelProps
+  { class?: any; inset?: boolean } & ContextMenuLabelProps
 >();
 
 const delegatedProps = computed(() => {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuRadioItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuRadioItem.vue
index 5d5b6fee3..4f8bf392e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuRadioItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuRadioItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { DotFilledIcon } from '@radix-icons/vue';
 import {
@@ -12,9 +12,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & ContextMenuRadioItemProps
->();
+const props = defineProps<{ class?: any } & ContextMenuRadioItemProps>();
 const emits = defineEmits<ContextMenuRadioItemEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSeparator.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSeparator.vue
index 6bb357214..56231e00c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSeparator.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   ContextMenuSeparator,
   type ContextMenuSeparatorProps,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & ContextMenuSeparatorProps
->();
+const props = defineProps<{ class?: any } & ContextMenuSeparatorProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuShortcut.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuShortcut.vue
index a1a1f103f..21d0f9b2c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuShortcut.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuShortcut.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSubContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSubContent.vue
index d4e5e32d9..7e7812867 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSubContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSubContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   ContextMenuSubContent,
@@ -10,9 +10,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & DropdownMenuSubContentProps
->();
+const props = defineProps<{ class?: any } & DropdownMenuSubContentProps>();
 const emits = defineEmits<DropdownMenuSubContentEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSubTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSubTrigger.vue
index a314ae5af..c7275154f 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSubTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { ChevronRightIcon } from '@radix-icons/vue';
 import {
@@ -12,7 +12,7 @@ import {
 
 const props = defineProps<
   {
-    class?: HTMLAttributes['class'];
+    class?: any;
     inset?: boolean;
   } & ContextMenuSubTriggerProps
 >();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue
index fcc98acb8..1af72f63c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { Cross2Icon } from '@radix-icons/vue';
 import {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogDescription.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogDescription.vue
index e8c823d7e..5ca8694e3 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogDescription.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   DialogDescription,
@@ -9,9 +9,7 @@ import {
   useForwardProps,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & DialogDescriptionProps
->();
+const props = defineProps<{ class?: any } & DialogDescriptionProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogFooter.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogFooter.vue
index 8cc7a8477..a8e56d8cc 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogFooter.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogFooter.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
+import { cn } from '@vben-core/shared/utils';
 
-import { cn } from '@vben-core/shared';
-
-const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+const props = defineProps<{ class?: any }>();
 </script>
 
 <template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogHeader.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogHeader.vue
index 5f0f07579..3632b2ad5 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogHeader.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogHeader.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogScrollContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogScrollContent.vue
index 916165fda..39afc20c5 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogScrollContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogScrollContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   DialogClose,
@@ -13,9 +13,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & DialogContentProps
->();
+const props = defineProps<{ class?: any } & DialogContentProps>();
 const emits = defineEmits<DialogContentEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogTitle.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogTitle.vue
index 4b3370560..1776c01e4 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogTitle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogTitle.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & DialogTitleProps
->();
+const props = defineProps<{ class?: any } & DialogTitleProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index f4018308d..46729c23c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { CheckIcon } from '@radix-icons/vue';
 import {
@@ -12,9 +12,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & DropdownMenuCheckboxItemProps
->();
+const props = defineProps<{ class?: any } & DropdownMenuCheckboxItemProps>();
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuContent.vue
index e6a27abbe..9800a90d8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   DropdownMenuContent,
@@ -12,7 +12,7 @@ import {
 } from 'radix-vue';
 
 const props = withDefaults(
-  defineProps<{ class?: HTMLAttributes['class'] } & DropdownMenuContentProps>(),
+  defineProps<{ class?: any } & DropdownMenuContentProps>(),
   {
     sideOffset: 4,
   },
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuItem.vue
index c8a9778d7..3aac66780 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   DropdownMenuItem,
@@ -10,7 +10,7 @@ import {
 } from 'radix-vue';
 
 const props = defineProps<
-  { class?: HTMLAttributes['class']; inset?: boolean } & DropdownMenuItemProps
+  { class?: any; inset?: boolean } & DropdownMenuItemProps
 >();
 
 const delegatedProps = computed(() => {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuLabel.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
index bf864ca18..decd5d2be 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   DropdownMenuLabel,
@@ -10,7 +10,7 @@ import {
 } from 'radix-vue';
 
 const props = defineProps<
-  { class?: HTMLAttributes['class']; inset?: boolean } & DropdownMenuLabelProps
+  { class?: any; inset?: boolean } & DropdownMenuLabelProps
 >();
 
 const delegatedProps = computed(() => {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 0f94e14b7..5b6593a89 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { DotFilledIcon } from '@radix-icons/vue';
 import {
@@ -12,9 +12,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & DropdownMenuRadioItemProps
->();
+const props = defineProps<{ class?: any } & DropdownMenuRadioItemProps>();
 
 const emits = defineEmits<DropdownMenuRadioItemEmits>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
index 4cb821fc0..f18fc798d 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   DropdownMenuSeparator,
@@ -10,7 +10,7 @@ import {
 
 const props = defineProps<
   {
-    class?: HTMLAttributes['class'];
+    class?: any;
   } & DropdownMenuSeparatorProps
 >();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
index 1ae69e81d..39f5963be 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
index 32e4b77e8..a36892127 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   DropdownMenuSubContent,
@@ -10,9 +10,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & DropdownMenuSubContentProps
->();
+const props = defineProps<{ class?: any } & DropdownMenuSubContentProps>();
 const emits = defineEmits<DropdownMenuSubContentEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index ce0bcaaee..e3a505690 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { ChevronRightIcon } from '@radix-icons/vue';
 import {
@@ -10,9 +10,7 @@ import {
   useForwardProps,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & DropdownMenuSubTriggerProps
->();
+const props = defineProps<{ class?: any } & DropdownMenuSubTriggerProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormControl.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormControl.vue
new file mode 100644
index 000000000..bd9ed859a
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormControl.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { Slot } from 'radix-vue';
+
+import { useFormField } from './useFormField';
+
+const { error, formDescriptionId, formItemId, formMessageId } = useFormField();
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    :aria-describedby="
+      !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
+    "
+    :aria-invalid="!!error"
+  >
+    <slot></slot>
+  </Slot>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormDescription.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormDescription.vue
new file mode 100644
index 000000000..871ba301f
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormDescription.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { cn } from '@vben-core/shared/utils';
+
+import { useFormField } from './useFormField';
+
+const props = defineProps<{
+  class?: any;
+}>();
+
+const { formDescriptionId } = useFormField();
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot></slot>
+  </p>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormItem.vue
new file mode 100644
index 000000000..165c992b7
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormItem.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { provide, useId } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+
+const props = defineProps<{
+  class?: any;
+}>();
+
+const id = useId() as string;
+provide(FORM_ITEM_INJECTION_KEY, id);
+</script>
+
+<template>
+  <div :class="cn(props.class)">
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormLabel.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormLabel.vue
new file mode 100644
index 000000000..797d6e237
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormLabel.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { LabelProps } from 'radix-vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Label } from '../label';
+import { useFormField } from './useFormField';
+
+const props = defineProps<{ class?: any } & LabelProps>();
+
+const { formItemId } = useFormField();
+</script>
+
+<template>
+  <Label :class="cn(props.class)" :for="formItemId">
+    <slot></slot>
+  </Label>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormMessage.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormMessage.vue
new file mode 100644
index 000000000..fb8a8b915
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/FormMessage.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { toValue } from 'vue';
+
+import { ErrorMessage } from 'vee-validate';
+
+import { useFormField } from './useFormField';
+
+const { formMessageId, name } = useFormField();
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    :name="toValue(name)"
+    as="p"
+    class="text-destructive text-[0.8rem]"
+  />
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/index.ts
new file mode 100644
index 000000000..3e8467b25
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/index.ts
@@ -0,0 +1,11 @@
+export { default as FormControl } from './FormControl.vue';
+export { default as FormDescription } from './FormDescription.vue';
+export { default as FormItem } from './FormItem.vue';
+export { default as FormLabel } from './FormLabel.vue';
+export { default as FormMessage } from './FormMessage.vue';
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+export {
+  Field as FormField,
+  FieldArray as FormFieldArray,
+  Form,
+} from 'vee-validate';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/injectionKeys.ts b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/injectionKeys.ts
new file mode 100644
index 000000000..3c86caa4e
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/injectionKeys.ts
@@ -0,0 +1,4 @@
+import type { InjectionKey } from 'vue';
+
+// eslint-disable-next-line symbol-description
+export const FORM_ITEM_INJECTION_KEY = Symbol() as InjectionKey<string>;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/useFormField.ts b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/useFormField.ts
new file mode 100644
index 000000000..dfb8d4c6e
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/form/useFormField.ts
@@ -0,0 +1,38 @@
+import { inject } from 'vue';
+
+import {
+  FieldContextKey,
+  useFieldError,
+  useIsFieldDirty,
+  useIsFieldTouched,
+  useIsFieldValid,
+} from 'vee-validate';
+
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+
+export function useFormField() {
+  const fieldContext = inject(FieldContextKey);
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY);
+
+  if (!fieldContext)
+    throw new Error('useFormField should be used within <FormField>');
+
+  const { name } = fieldContext;
+  const id = fieldItemContext;
+
+  const fieldState = {
+    error: useFieldError(name),
+    isDirty: useIsFieldDirty(name),
+    isTouched: useIsFieldTouched(name),
+    valid: useIsFieldValid(name),
+  };
+
+  return {
+    formDescriptionId: `${id}-form-item-description`,
+    formItemId: `${id}-form-item`,
+    formMessageId: `${id}-form-item-message`,
+    id,
+    name,
+    ...fieldState,
+  };
+}
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/hover-card/HoverCardContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/hover-card/HoverCardContent.vue
index 443fda6a3..444a182c9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/hover-card/HoverCardContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/hover-card/HoverCardContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   HoverCardContent,
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/input/Input.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/input/Input.vue
index 8718e1de5..68b90db2b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/input/Input.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/input/Input.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { useVModel } from '@vueuse/core';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
   defaultValue?: number | string;
   modelValue?: number | string;
 }>();
@@ -26,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/label/Label.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/label/Label.vue
new file mode 100644
index 000000000..a4169355d
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/label/Label.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Label, type LabelProps } from 'radix-vue';
+
+const props = defineProps<{ class?: any } & LabelProps>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </Label>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/label/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/ui/label/index.ts
new file mode 100644
index 000000000..c98e59f87
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from './Label.vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberField.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberField.vue
index a98d39865..4d01c6abf 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberField.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberField.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
 import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue';
 
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & NumberFieldRootProps
->();
+const props = defineProps<{ class?: any } & NumberFieldRootProps>();
 const emits = defineEmits<NumberFieldRootEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldContent.vue
index 05d74685e..f6d1b9208 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldContent.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class'];
+  class?: any;
 }>();
 </script>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldDecrement.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldDecrement.vue
index a67543f1f..9f40db90a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldDecrement.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldDecrement.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
 import type { NumberFieldDecrementProps } from 'radix-vue';
 
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { Minus } from 'lucide-vue-next';
 import { NumberFieldDecrement, useForwardProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & NumberFieldDecrementProps
->();
+const props = defineProps<{ class?: any } & NumberFieldDecrementProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldIncrement.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldIncrement.vue
index 4d285d296..bfdb0bfe5 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldIncrement.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldIncrement.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
 import type { NumberFieldIncrementProps } from 'radix-vue';
 
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { Plus } from 'lucide-vue-next';
 import { NumberFieldIncrement, useForwardProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & NumberFieldIncrementProps
->();
+const props = defineProps<{ class?: any } & NumberFieldIncrementProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldInput.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldInput.vue
index 3c10b4b30..48e621eed 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldInput.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/number-field/NumberFieldInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { NumberFieldInput } from 'radix-vue';
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInput.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInput.vue
index faa7382ee..298753b39 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInput.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   PinInputRoot,
@@ -10,9 +10,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & PinInputRootProps
->();
+const props = defineProps<{ class?: any } & PinInputRootProps>();
 const emits = defineEmits<PinInputRootEmits>();
 
 const delegatedProps = computed(() => {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInputGroup.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInputGroup.vue
index f0882d558..393273dbb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInputGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInputGroup.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & PrimitiveProps
->();
+const props = defineProps<{ class?: any } & PrimitiveProps>();
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
   return delegated;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInputInput.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInputInput.vue
index 773c5b30a..6971f2577 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInputInput.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInputInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   PinInputInput,
@@ -9,9 +9,7 @@ import {
   useForwardProps,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & PinInputInputProps
->();
+const props = defineProps<{ class?: any } & PinInputInputProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/popover/PopoverContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/popover/PopoverContent.vue
index da9d40985..9d1799b73 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/popover/PopoverContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/popover/PopoverContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   PopoverContent,
@@ -16,7 +16,7 @@ defineOptions({
 });
 
 const props = withDefaults(
-  defineProps<{ class?: HTMLAttributes['class'] } & PopoverContentProps>(),
+  defineProps<{ class?: any } & PopoverContentProps>(),
   {
     align: 'center',
     sideOffset: 4,
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/RadioGroup.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/RadioGroup.vue
new file mode 100644
index 000000000..35c48701b
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/RadioGroup.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import {
+  RadioGroupRoot,
+  type RadioGroupRootEmits,
+  type RadioGroupRootProps,
+  useForwardPropsEmits,
+} from 'radix-vue';
+
+const props = defineProps<{ class?: any } & RadioGroupRootProps>();
+const emits = defineEmits<RadioGroupRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="forwarded">
+    <slot></slot>
+  </RadioGroupRoot>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/RadioGroupItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/RadioGroupItem.vue
new file mode 100644
index 000000000..9dfaed345
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/RadioGroupItem.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { CheckIcon } from '@radix-icons/vue';
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  type RadioGroupItemProps,
+  useForwardProps,
+} from 'radix-vue';
+
+const props = defineProps<{ class?: any } & RadioGroupItemProps>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <RadioGroupItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator class="flex items-center justify-center">
+      <CheckIcon class="fill-primary h-3.5 w-3.5" />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/index.ts
new file mode 100644
index 000000000..7e2c65f1e
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.vue';
+export { default as RadioGroupItem } from './RadioGroupItem.vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/scroll-area/ScrollArea.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/scroll-area/ScrollArea.vue
index 4e307a6bd..94dfcadb6 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/scroll-area/ScrollArea.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/scroll-area/ScrollArea.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   ScrollAreaCorner,
@@ -15,7 +15,7 @@ import ScrollBar from './ScrollBar.vue';
 const props = withDefaults(
   defineProps<
     {
-      class?: HTMLAttributes['class'];
+      class?: any;
       onScroll?: (event: Event) => void;
       viewportProps?: { onScroll: (event: Event) => void };
     } & ScrollAreaRootProps
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/scroll-area/ScrollBar.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/scroll-area/ScrollBar.vue
index c303e8a31..f79ff240b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/scroll-area/ScrollBar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/scroll-area/ScrollBar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   ScrollAreaScrollbar,
@@ -10,7 +10,7 @@ import {
 } from 'radix-vue';
 
 const props = withDefaults(
-  defineProps<{ class?: HTMLAttributes['class'] } & ScrollAreaScrollbarProps>(),
+  defineProps<{ class?: any } & ScrollAreaScrollbarProps>(),
   {
     orientation: 'vertical',
   },
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectContent.vue
index d2c50ed48..568a280ff 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   SelectContent,
@@ -20,7 +20,7 @@ defineOptions({
 });
 
 const props = withDefaults(
-  defineProps<{ class?: HTMLAttributes['class'] } & SelectContentProps>(),
+  defineProps<{ class?: any } & SelectContentProps>(),
   {
     position: 'popper',
   },
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectGroup.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectGroup.vue
index 4f756c93d..df2296c1e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectGroup.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { SelectGroup, type SelectGroupProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & SelectGroupProps
->();
+const props = defineProps<{ class?: any } & SelectGroupProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectItem.vue
index fc55d1c22..8047915cf 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { CheckIcon } from '@radix-icons/vue';
 import {
@@ -12,9 +12,7 @@ import {
   useForwardProps,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & SelectItemProps
->();
+const props = defineProps<{ class?: any } & SelectItemProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectLabel.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectLabel.vue
index bfc4e053d..598426865 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectLabel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectLabel.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { SelectLabel, type SelectLabelProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & SelectLabelProps
->();
+const props = defineProps<{ class?: any } & SelectLabelProps>();
 </script>
 
 <template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollDownButton.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollDownButton.vue
index 7bdb001b4..ab43dc2fa 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollDownButton.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollDownButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { ChevronDownIcon } from '@radix-icons/vue';
 import {
@@ -10,9 +10,7 @@ import {
   useForwardProps,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & SelectScrollDownButtonProps
->();
+const props = defineProps<{ class?: any } & SelectScrollDownButtonProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollUpButton.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollUpButton.vue
index 69e35e99a..e03e66bd5 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollUpButton.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollUpButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { ChevronUpIcon } from '@radix-icons/vue';
 import {
@@ -10,9 +10,7 @@ import {
   useForwardProps,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & SelectScrollUpButtonProps
->();
+const props = defineProps<{ class?: any } & SelectScrollUpButtonProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectSeparator.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectSeparator.vue
index ea675f7e1..f93a7d1c5 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectSeparator.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & SelectSeparatorProps
->();
+const props = defineProps<{ class?: any } & SelectSeparatorProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectTrigger.vue
index 884488608..c117b07b7 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { CaretSortIcon } from '@radix-icons/vue';
 import {
@@ -11,9 +11,7 @@ import {
   useForwardProps,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & SelectTriggerProps
->();
+const props = defineProps<{ class?: any } & SelectTriggerProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/separator/Separator.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/separator/Separator.vue
new file mode 100644
index 000000000..cf6ca4a76
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/separator/Separator.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Separator, type SeparatorProps } from 'radix-vue';
+
+const props = defineProps<{ class?: any; label?: string } & SeparatorProps>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-border relative shrink-0',
+        props.orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full',
+        props.class,
+      )
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="
+        cn(
+          'text-muted-foreground bg-background absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-xs',
+          props.orientation === 'vertical'
+            ? 'w-[1px] px-1 py-2'
+            : 'h-[1px] px-2 py-1',
+        )
+      "
+    >
+      {{ props.label }}
+    </span>
+  </Separator>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/separator/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/ui/separator/index.ts
new file mode 100644
index 000000000..3cb07b017
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetContent.vue
index d1c4ef1fa..adac05558 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   DialogContent,
@@ -15,7 +15,7 @@ import {
 import { type SheetVariants, sheetVariants } from './sheet';
 
 interface SheetContentProps extends DialogContentProps {
-  class?: HTMLAttributes['class'];
+  class?: any;
   side?: SheetVariants['side'];
 }
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetDescription.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetDescription.vue
index fb1f8370f..2e90656ce 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetDescription.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { DialogDescription, type DialogDescriptionProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & DialogDescriptionProps
->();
+const props = defineProps<{ class?: any } & DialogDescriptionProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetFooter.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetFooter.vue
index 8cc7a8477..a8e56d8cc 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetFooter.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetFooter.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
+import { cn } from '@vben-core/shared/utils';
 
-import { cn } from '@vben-core/shared';
-
-const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+const props = defineProps<{ class?: any }>();
 </script>
 
 <template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetHeader.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetHeader.vue
index 323cace5f..c6cc25ca8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetHeader.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetHeader.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
+import { cn } from '@vben-core/shared/utils';
 
-import { cn } from '@vben-core/shared';
-
-const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+const props = defineProps<{ class?: any }>();
 </script>
 
 <template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetTitle.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetTitle.vue
index a84cf0b60..95c8eacf8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetTitle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetTitle.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { DialogTitle, type DialogTitleProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & DialogTitleProps
->();
+const props = defineProps<{ class?: any } & DialogTitleProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/switch/Switch.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/switch/Switch.vue
index f24005dd5..6a28899d9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/switch/Switch.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/switch/Switch.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   SwitchRoot,
@@ -11,9 +11,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & SwitchRootProps
->();
+const props = defineProps<{ class?: any } & SwitchRootProps>();
 
 const emits = defineEmits<SwitchRootEmits>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/tabs/TabsContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/tabs/TabsContent.vue
index 2bd64ce02..0e3d9c5d8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/tabs/TabsContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/tabs/TabsContent.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { TabsContent, type TabsContentProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & TabsContentProps
->();
+const props = defineProps<{ class?: any } & TabsContentProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/tabs/TabsList.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/tabs/TabsList.vue
index c5bc85256..756df6dd8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/tabs/TabsList.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/tabs/TabsList.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { TabsList, type TabsListProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & TabsListProps
->();
+const props = defineProps<{ class?: any } & TabsListProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/tabs/TabsTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/tabs/TabsTrigger.vue
index bc34449ee..1bec624a3 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/tabs/TabsTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/tabs/TabsTrigger.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & TabsTriggerProps
->();
+const props = defineProps<{ class?: any } & TabsTriggerProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/textarea/Textarea.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/textarea/Textarea.vue
new file mode 100644
index 000000000..242516791
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/textarea/Textarea.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+import { useVModel } from '@vueuse/core';
+
+const props = defineProps<{
+  class?: any;
+  defaultValue?: number | string;
+  modelValue?: number | string;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: number | string): void;
+}>();
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue,
+  passive: true,
+});
+</script>
+
+<template>
+  <textarea
+    v-model="modelValue"
+    :class="
+      cn(
+        'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  ></textarea>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/textarea/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/ui/textarea/index.ts
new file mode 100644
index 000000000..e2d47739b
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/Toast.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/Toast.vue
index 599b66c23..a5b081ef3 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/Toast.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/Toast.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   ToastRoot,
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastAction.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastAction.vue
index 62c4ad549..f49edabe9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastAction.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastAction.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { ToastAction, type ToastActionProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & ToastActionProps
->();
+const props = defineProps<{ class?: any } & ToastActionProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastClose.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastClose.vue
index 18fab5a6f..3a110eccb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastClose.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastClose.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { Cross2Icon } from '@radix-icons/vue';
 import { ToastClose, type ToastCloseProps } from 'radix-vue';
 
 const props = defineProps<
   {
-    class?: HTMLAttributes['class'];
+    class?: any;
   } & ToastCloseProps
 >();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastDescription.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastDescription.vue
index c965e7577..c74697f24 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastDescription.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { ToastDescription, type ToastDescriptionProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & ToastDescriptionProps
->();
+const props = defineProps<{ class?: any } & ToastDescriptionProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastTitle.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastTitle.vue
index 184cc551d..93a261c53 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastTitle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastTitle.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { ToastTitle, type ToastTitleProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & ToastTitleProps
->();
+const props = defineProps<{ class?: any } & ToastTitleProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastViewport.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastViewport.vue
index f58ecec17..d71527b69 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastViewport.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastViewport.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import { ToastViewport, type ToastViewportProps } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & ToastViewportProps
->();
+const props = defineProps<{ class?: any } & ToastViewportProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/toast.ts b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/toast.ts
index df6e238da..92f9737bd 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/toast.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/toast.ts
@@ -1,7 +1,5 @@
 import type { ToastRootProps } from 'radix-vue';
 
-import type { HTMLAttributes } from 'vue';
-
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const toastVariants = cva(
@@ -23,7 +21,7 @@ export const toastVariants = cva(
 type ToastVariants = VariantProps<typeof toastVariants>;
 
 export interface ToastProps extends ToastRootProps {
-  class?: HTMLAttributes['class'];
+  class?: any;
   onOpenChange?: ((value: boolean) => void) | undefined;
   variant?: ToastVariants['variant'];
 }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroup.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroup.vue
index 7cf0168fe..66b3562c2 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroup.vue
@@ -3,9 +3,9 @@ import type { VariantProps } from 'class-variance-authority';
 
 import type { toggleVariants } from '../toggle';
 
-import { computed, type HTMLAttributes, provide } from 'vue';
+import { computed, provide } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   ToggleGroupRoot,
@@ -18,7 +18,7 @@ type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
 
 const props = defineProps<
   {
-    class?: HTMLAttributes['class'];
+    class?: any;
     size?: ToggleGroupVariants['size'];
     variant?: ToggleGroupVariants['variant'];
   } & ToggleGroupRootProps
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroupItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroupItem.vue
index 75b04f3c0..abf918f3a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroupItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroupItem.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { VariantProps } from 'class-variance-authority';
 
-import { computed, type HTMLAttributes, inject } from 'vue';
+import { computed, inject } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   ToggleGroupItem,
@@ -17,7 +17,7 @@ type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
 
 const props = defineProps<
   {
-    class?: HTMLAttributes['class'];
+    class?: any;
     size?: ToggleGroupVariants['size'];
     variant?: ToggleGroupVariants['variant'];
   } & ToggleGroupItemProps
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle/Toggle.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle/Toggle.vue
index 94daa74c9..4517b9c61 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle/Toggle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle/Toggle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   Toggle,
@@ -15,7 +15,7 @@ import { type ToggleVariants, toggleVariants } from './toggle';
 const props = withDefaults(
   defineProps<
     {
-      class?: HTMLAttributes['class'];
+      class?: any;
       size?: ToggleVariants['size'];
       variant?: ToggleVariants['variant'];
     } & ToggleProps
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/tooltip/TooltipContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/tooltip/TooltipContent.vue
index 8e318bed1..81b951e89 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/tooltip/TooltipContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/tooltip/TooltipContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
-import { cn } from '@vben-core/shared';
+import { cn } from '@vben-core/shared/utils';
 
 import {
   TooltipContent,
@@ -16,7 +16,7 @@ defineOptions({
 });
 
 const props = withDefaults(
-  defineProps<{ class?: HTMLAttributes['class'] } & TooltipContentProps>(),
+  defineProps<{ class?: any } & TooltipContentProps>(),
   {
     class: '',
     side: 'right',
diff --git a/packages/@core/ui-kit/shadcn-ui/src/index.ts b/packages/@core/ui-kit/shadcn-ui/src/index.ts
index 3c75770bc..c95f605d0 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/index.ts
@@ -1,2 +1,2 @@
 export * from './components';
-export { Slot, VisuallyHidden } from 'radix-vue';
+export { createContext, Slot, VisuallyHidden } from 'radix-vue';
diff --git a/packages/effects/common-ui/package.json b/packages/effects/common-ui/package.json
index 453b6f03f..c8c9c8ea6 100644
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -20,10 +20,10 @@
     }
   },
   "dependencies": {
+    "@vben-core/form-ui": "workspace:*",
     "@vben-core/popup-ui": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben/constants": "workspace:*",
-    "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/locales": "workspace:*",
     "@vben/types": "workspace:*",
diff --git a/packages/effects/common-ui/src/components/captcha/index.ts b/packages/effects/common-ui/src/components/captcha/index.ts
index 2be363473..59cbc8276 100644
--- a/packages/effects/common-ui/src/components/captcha/index.ts
+++ b/packages/effects/common-ui/src/components/captcha/index.ts
@@ -1,8 +1,2 @@
 export { default as PointSelectionCaptcha } from './point-selection-captcha.vue';
-export interface Point {
-  i: number;
-  x: number;
-  y: number;
-  t: number;
-}
-export type ClearFunction = () => void;
+export type * from './types';
diff --git a/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue b/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue
index 07178ac60..7bc40847a 100644
--- a/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue
+++ b/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { CaptchaPoint } from './types';
+
 import { computed, ref } from 'vue';
 
-import { SvgRefreshIcon } from '@vben/icons';
+import { RotateCw } from '@vben/icons';
 import {
   Card,
   CardContent,
@@ -12,8 +14,6 @@ import {
   VbenIconButton,
 } from '@vben-core/shadcn-ui';
 
-import { type Point } from '.';
-
 interface Props {
   /**
    * 点选的图片
@@ -74,7 +74,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   click: [number, number];
-  confirm: [Array<Point>, clear: () => void];
+  confirm: [Array<CaptchaPoint>, clear: () => void];
   refresh: [];
 }>();
 
@@ -129,10 +129,10 @@ function getElementPosition(element: HTMLElement) {
     y: posY,
   };
 }
-const points = ref<Point[]>([]);
+const points = ref<CaptchaPoint[]>([]);
 const POINT_OFFSET = 11;
 
-function handleClick(e: any | Event) {
+function handleClick(e: MouseEvent) {
   try {
     const dom = e.currentTarget as HTMLElement;
     if (!dom) throw new Error('Element not found');
@@ -231,7 +231,7 @@ function handleConfirm() {
     </CardContent>
     <CardFooter class="mt-2 flex justify-between p-0">
       <VbenIconButton aria-label="刷新验证码" @click="handleRefresh">
-        <SvgRefreshIcon class="size-6" />
+        <RotateCw class="size-5" />
       </VbenIconButton>
       <VbenButton aria-label="确认选择" @click="handleConfirm">
         确认
diff --git a/packages/effects/common-ui/src/components/captcha/types.ts b/packages/effects/common-ui/src/components/captcha/types.ts
new file mode 100644
index 000000000..4e3901ba0
--- /dev/null
+++ b/packages/effects/common-ui/src/components/captcha/types.ts
@@ -0,0 +1,6 @@
+export interface CaptchaPoint {
+  i: number;
+  x: number;
+  y: number;
+  t: number;
+}
diff --git a/packages/effects/common-ui/src/components/index.ts b/packages/effects/common-ui/src/components/index.ts
index c70084f76..865adf409 100644
--- a/packages/effects/common-ui/src/components/index.ts
+++ b/packages/effects/common-ui/src/components/index.ts
@@ -1,6 +1,8 @@
 export * from './captcha';
 export * from './ellipsis-text';
 export * from './page';
+export * from '@vben-core/form-ui';
 export * from '@vben-core/popup-ui';
 
+// 给文档用
 export { VbenButton } from '@vben-core/shadcn-ui';
diff --git a/packages/effects/common-ui/src/ui/authentication/code-login.vue b/packages/effects/common-ui/src/ui/authentication/code-login.vue
index 2cc29992c..258484b6f 100644
--- a/packages/effects/common-ui/src/ui/authentication/code-login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/code-login.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
 import type { LoginCodeEmits } from './types';
 
-import { computed, onBeforeUnmount, reactive, ref } from 'vue';
+import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { $t } from '@vben/locales';
-import { VbenButton, VbenInput, VbenPinInput } from '@vben-core/shadcn-ui';
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';
 
 import Title from './auth-title.vue';
 
 interface Props {
+  formSchema: VbenFormSchema[];
   /**
    * @zh_CN 是否处于加载处理状态
    */
@@ -35,82 +39,31 @@ const emit = defineEmits<{
 
 const router = useRouter();
 
-const formState = reactive({
-  code: '',
-  phoneNumber: '',
-  requirePhoneNumber: false,
-  submitted: false,
-});
+const [Form, { validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
 
-const countdown = ref(0);
-const timer = ref<ReturnType<typeof setTimeout>>();
+async function handleSubmit() {
+  const { valid, values } = await validate();
 
-const isValidPhoneNumber = computed(() => {
-  return /^1[3-9]\d{9}$/.test(formState.phoneNumber);
-});
-
-const btnText = computed(() => {
-  return countdown.value > 0
-    ? $t('authentication.sendText', [countdown.value])
-    : $t('authentication.sendCode');
-});
-const btnLoading = computed(() => {
-  return countdown.value > 0;
-});
-
-const phoneNumberStatus = computed(() => {
-  return (formState.submitted || formState.requirePhoneNumber) &&
-    !isValidPhoneNumber.value
-    ? 'error'
-    : 'default';
-});
-
-const codeStatus = computed(() => {
-  return formState.submitted && !formState.code ? 'error' : 'default';
-});
-
-function handleSubmit() {
-  formState.submitted = true;
-  if (phoneNumberStatus.value !== 'default' || codeStatus.value !== 'default') {
-    return;
+  if (valid) {
+    emit('submit', {
+      code: values?.code,
+      phoneNumber: values?.phoneNumber,
+    });
   }
-
-  emit('submit', {
-    code: formState.code,
-    phoneNumber: formState.phoneNumber,
-  });
 }
 
 function goToLogin() {
   router.push(props.loginPath);
 }
-
-async function handleSendCode() {
-  if (btnLoading.value) {
-    return;
-  }
-  if (!isValidPhoneNumber.value) {
-    formState.requirePhoneNumber = true;
-    return;
-  }
-  countdown.value = 60;
-  // TODO: 调用发送验证码接口
-  startCountdown();
-}
-
-function startCountdown() {
-  if (countdown.value > 0) {
-    timer.value = setTimeout(() => {
-      countdown.value--;
-      startCountdown();
-    }, 1000);
-  }
-}
-
-onBeforeUnmount(() => {
-  countdown.value = 0;
-  clearTimeout(timer.value);
-});
 </script>
 
 <template>
@@ -123,31 +76,8 @@ onBeforeUnmount(() => {
         </span>
       </template>
     </Title>
-    <VbenInput
-      v-model="formState.phoneNumber"
-      :autofocus="true"
-      :error-tip="$t('authentication.mobile-tip')"
-      :label="$t('authentication.mobile')"
-      :placeholder="$t('authentication.mobile')"
-      :status="phoneNumberStatus"
-      name="phoneNumber"
-      type="number"
-      @keyup.enter="handleSubmit"
-    />
-    <VbenPinInput
-      v-model="formState.code"
-      :btn-loading="btnLoading"
-      :btn-text="btnText"
-      :code-length="4"
-      :error-tip="$t('authentication.codeTip')"
-      :handle-send-code="handleSendCode"
-      :label="$t('authentication.code')"
-      :placeholder="$t('authentication.code')"
-      :status="codeStatus"
-      name="password"
-      @keyup.enter="handleSubmit"
-    />
-    <VbenButton :loading="loading" class="mt-2 w-full" @click="handleSubmit">
+    <Form />
+    <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
       {{ $t('common.login') }}
     </VbenButton>
     <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
diff --git a/packages/effects/common-ui/src/ui/authentication/forget-password.vue b/packages/effects/common-ui/src/ui/authentication/forget-password.vue
index a38291e9d..28f58f472 100644
--- a/packages/effects/common-ui/src/ui/authentication/forget-password.vue
+++ b/packages/effects/common-ui/src/ui/authentication/forget-password.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { $t } from '@vben/locales';
-import { VbenButton, VbenInput } from '@vben-core/shadcn-ui';
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';
 
 import Title from './auth-title.vue';
 
@@ -16,10 +19,12 @@ interface Props {
    * @zh_CN 登陆路径
    */
   loginPath?: string;
+
+  formSchema: VbenFormSchema[];
 }
 
 defineOptions({
-  name: 'AuthenticationForgetPassword',
+  name: 'ForgetPassword',
 });
 
 const props = withDefaults(defineProps<Props>(), {
@@ -31,22 +36,25 @@ const emit = defineEmits<{
   submit: [string];
 }>();
 
+const [Form, { validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
 const router = useRouter();
-const formState = reactive({
-  email: '',
-  submitted: false,
-});
 
-const emailStatus = computed(() => {
-  return formState.submitted && !formState.email ? 'error' : 'default';
-});
+async function handleSubmit() {
+  const { valid, values } = await validate();
 
-function handleSubmit() {
-  formState.submitted = true;
-  if (emailStatus.value !== 'default') {
-    return;
+  if (valid) {
+    emit('submit', values?.email);
   }
-  emit('submit', formState.email);
 }
 
 function goToLogin() {
@@ -62,18 +70,8 @@ function goToLogin() {
         {{ $t('authentication.forgetPasswordSubtitle') }}
       </template>
     </Title>
-    <div class="mb-6">
-      <VbenInput
-        v-model="formState.email"
-        :error-tip="$t('authentication.emailTip')"
-        :label="$t('authentication.email')"
-        :status="emailStatus"
-        autofocus
-        name="email"
-        placeholder="example@example.com"
-        type="text"
-      />
-    </div>
+    <Form />
+
     <div>
       <VbenButton class="mt-2 w-full" @click="handleSubmit">
         {{ $t('authentication.sendResetLink') }}
diff --git a/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue b/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
index 9ab3a6299..0b705ad3b 100644
--- a/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
+++ b/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import type { AuthenticationProps, LoginAndRegisterParams } from './types';
+import type { AuthenticationProps } from './types';
 
 import { watch } from 'vue';
 
-import { useForwardPropsEmits } from '@vben/hooks';
 import { useVbenModal } from '@vben-core/popup-ui';
-import { VbenAvatar } from '@vben-core/shadcn-ui';
-
-import AuthenticationLogin from './login.vue';
+import { Slot, VbenAvatar } from '@vben-core/shadcn-ui';
 
 interface Props extends AuthenticationProps {
   avatar?: string;
@@ -17,18 +14,12 @@ defineOptions({
   name: 'LoginExpiredModal',
 });
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   avatar: '',
 });
 
-const emit = defineEmits<{
-  submit: [LoginAndRegisterParams];
-}>();
-
 const open = defineModel<boolean>('open');
 
-const forwarded = useForwardPropsEmits(props, emit);
-
 const [Modal, modalApi] = useVbenModal();
 
 watch(
@@ -51,14 +42,15 @@ watch(
       class="border-none px-10 py-6 text-center shadow-xl sm:w-[600px] sm:rounded-2xl md:h-[unset]"
     >
       <VbenAvatar :src="avatar" class="mx-auto mb-6 size-20" />
-      <AuthenticationLogin
-        v-bind="forwarded"
+      <Slot
         :show-forget-password="false"
         :show-register="false"
         :show-remember-me="false"
         :sub-title="$t('authentication.loginAgainSubTitle')"
         :title="$t('authentication.loginAgainTitle')"
-      />
+      >
+        <slot> </slot>
+      </Slot>
     </Modal>
   </div>
 </template>
diff --git a/packages/effects/common-ui/src/ui/authentication/login.vue b/packages/effects/common-ui/src/ui/authentication/login.vue
index ff24ee09e..3e1aee73d 100644
--- a/packages/effects/common-ui/src/ui/authentication/login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/login.vue
@@ -1,31 +1,31 @@
 <script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
 import type { AuthenticationProps, LoginEmits } from './types';
 
-import { computed, reactive } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { $t } from '@vben/locales';
-import {
-  VbenButton,
-  VbenCheckbox,
-  VbenInput,
-  VbenInputPassword,
-} from '@vben-core/shadcn-ui';
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton, VbenCheckbox } from '@vben-core/shadcn-ui';
 
 import Title from './auth-title.vue';
 import ThirdPartyLogin from './third-party-login.vue';
 
-interface Props extends AuthenticationProps {}
+interface Props extends AuthenticationProps {
+  formSchema: VbenFormSchema[];
+}
 
 defineOptions({
   name: 'AuthenticationLogin',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   codeLoginPath: '/auth/code-login',
   forgetPasswordPath: '/auth/forget-password',
+  formSchema: () => [],
   loading: false,
-  passwordPlaceholder: '',
   qrCodeLoginPath: '/auth/qrcode-login',
   registerPath: '/auth/register',
   showCodeLogin: true,
@@ -36,58 +36,50 @@ withDefaults(defineProps<Props>(), {
   showThirdPartyLogin: true,
   subTitle: '',
   title: '',
-  usernamePlaceholder: '',
 });
 
 const emit = defineEmits<{
   submit: LoginEmits['submit'];
 }>();
 
+const [Form, { setFieldValue, validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
 const router = useRouter();
 
 const REMEMBER_ME_KEY = `REMEMBER_ME_USERNAME_${location.hostname}`;
 
 const localUsername = localStorage.getItem(REMEMBER_ME_KEY) || '';
 
-const formState = reactive({
-  password: '',
-  rememberMe: !!localUsername,
-  submitted: false,
-  username: localUsername,
-});
+const rememberMe = ref(!!localUsername);
 
-const usernameStatus = computed(() => {
-  return formState.submitted && !formState.username ? 'error' : 'default';
-});
-
-const passwordStatus = computed(() => {
-  return formState.submitted && !formState.password ? 'error' : 'default';
-});
-
-function handleSubmit() {
-  formState.submitted = true;
-
-  if (
-    usernameStatus.value !== 'default' ||
-    passwordStatus.value !== 'default'
-  ) {
-    return;
+async function handleSubmit() {
+  const { valid, values } = await validate();
+  if (valid) {
+    localStorage.setItem(
+      REMEMBER_ME_KEY,
+      rememberMe.value ? values?.username : '',
+    );
+    emit('submit', values as { password: string; username: string });
   }
-
-  localStorage.setItem(
-    REMEMBER_ME_KEY,
-    formState.rememberMe ? formState.username : '',
-  );
-
-  emit('submit', {
-    password: formState.password,
-    username: formState.username,
-  });
 }
 
 function handleGo(path: string) {
   router.push(path);
 }
+
+onMounted(() => {
+  if (localUsername) {
+    setFieldValue('username', localUsername);
+  }
+});
 </script>
 
 <template>
@@ -103,34 +95,14 @@ function handleGo(path: string) {
       </Title>
     </slot>
 
-    <VbenInput
-      v-model="formState.username"
-      :autofocus="false"
-      :error-tip="$t('authentication.usernameTip')"
-      :label="$t('authentication.username')"
-      :placeholder="usernamePlaceholder || $t('authentication.username')"
-      :status="usernameStatus"
-      name="username"
-      required
-      type="text"
-    />
-    <VbenInputPassword
-      v-model="formState.password"
-      :error-tip="$t('authentication.passwordTip')"
-      :label="$t('authentication.password')"
-      :placeholder="passwordPlaceholder || $t('authentication.password')"
-      :status="passwordStatus"
-      name="password"
-      required
-      type="password"
-    />
+    <Form />
 
     <div
       v-if="showRememberMe || showForgetPassword"
-      class="mb-6 mt-4 flex justify-between"
+      class="mb-6 flex justify-between"
     >
       <div v-if="showRememberMe" class="flex-center">
-        <VbenCheckbox v-model:checked="formState.rememberMe" name="rememberMe">
+        <VbenCheckbox v-model:checked="rememberMe" name="rememberMe">
           {{ $t('authentication.rememberMe') }}
         </VbenCheckbox>
       </div>
diff --git a/packages/effects/common-ui/src/ui/authentication/register.vue b/packages/effects/common-ui/src/ui/authentication/register.vue
index c1f115b90..b69607927 100644
--- a/packages/effects/common-ui/src/ui/authentication/register.vue
+++ b/packages/effects/common-ui/src/ui/authentication/register.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
 import type { RegisterEmits } from './types';
 
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { $t } from '@vben/locales';
-import {
-  VbenButton,
-  VbenCheckbox,
-  VbenInput,
-  VbenInputPassword,
-} from '@vben-core/shadcn-ui';
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';
 
 import Title from './auth-title.vue';
 
 interface Props {
+  formSchema: VbenFormSchema[];
   /**
    * @zh_CN 是否处于加载处理状态
    */
@@ -30,6 +29,7 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<Props>(), {
+  formSchema: () => [],
   loading: false,
   loginPath: '/auth/login',
 });
@@ -38,43 +38,24 @@ const emit = defineEmits<{
   submit: RegisterEmits['submit'];
 }>();
 
+const [Form, { validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
 const router = useRouter();
 
-const formState = reactive({
-  agreePolicy: false,
-  confirmPassword: '',
-  password: '',
-  submitted: false,
-  username: '',
-});
-
-const usernameStatus = computed(() => {
-  return formState.submitted && !formState.username ? 'error' : 'default';
-});
-
-const passwordStatus = computed(() => {
-  return formState.submitted && !formState.password ? 'error' : 'default';
-});
-
-const confirmPasswordStatus = computed(() => {
-  return formState.submitted && formState.password !== formState.confirmPassword
-    ? 'error'
-    : 'default';
-});
-
-function handleSubmit() {
-  formState.submitted = true;
-  if (
-    usernameStatus.value !== 'default' ||
-    passwordStatus.value !== 'default'
-  ) {
-    return;
+async function handleSubmit() {
+  const { valid, values } = await validate();
+  if (valid) {
+    emit('submit', values as { password: string; username: string });
   }
-
-  emit('submit', {
-    password: formState.password,
-    username: formState.username,
-  });
 }
 
 function goToLogin() {
@@ -88,73 +69,11 @@ function goToLogin() {
       {{ $t('authentication.createAnAccount') }} 🚀
       <template #desc> {{ $t('authentication.signUpSubtitle') }} </template>
     </Title>
-    <VbenInput
-      v-model="formState.username"
-      :error-tip="$t('authentication.usernameTip')"
-      :label="$t('authentication.username')"
-      :placeholder="$t('authentication.username')"
-      :status="usernameStatus"
-      name="username"
-      type="text"
-    />
-    <!-- Use 8 or more characters with a mix of letters, numbers & symbols. -->
-    <VbenInputPassword
-      v-model="formState.password"
-      :error-tip="$t('authentication.passwordTip')"
-      :label="$t('authentication.password')"
-      :password-strength="true"
-      :placeholder="$t('authentication.password')"
-      :status="passwordStatus"
-      name="password"
-      required
-      type="password"
-    >
-      <template #strengthText>
-        {{ $t('authentication.passwordStrength') }}
-      </template>
-    </VbenInputPassword>
+    <Form />
 
-    <VbenInputPassword
-      v-model="formState.confirmPassword"
-      :error-tip="$t('authentication.confirmPasswordTip')"
-      :label="$t('authentication.confirmPassword')"
-      :placeholder="$t('authentication.confirmPassword')"
-      :status="confirmPasswordStatus"
-      name="confirmPassword"
-      required
-      type="password"
-    />
-
-    <div class="relative mt-4 flex pb-6">
-      <div class="flex-center">
-        <VbenCheckbox
-          v-model:checked="formState.agreePolicy"
-          name="agreePolicy"
-        >
-          {{ $t('authentication.agree') }}
-          <span class="text-primary hover:text-primary-hover">{{
-            $t('authentication.privacyPolicy')
-          }}</span>
-          &
-          <span class="text-primary hover:text-primary-hover">
-            {{ $t('authentication.terms') }}
-          </span>
-        </VbenCheckbox>
-      </div>
-      <Transition name="slide-up">
-        <p
-          v-show="formState.submitted && !formState.agreePolicy"
-          class="text-destructive absolute bottom-1 left-0 text-xs"
-        >
-          {{ $t('authentication.agreeTip') }}
-        </p>
-      </Transition>
-    </div>
-    <div>
-      <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
-        {{ $t('authentication.signUp') }}
-      </VbenButton>
-    </div>
+    <VbenButton :loading="loading" class="mt-2 w-full" @click="handleSubmit">
+      {{ $t('authentication.signUp') }}
+    </VbenButton>
     <div class="mt-4 text-center text-sm">
       {{ $t('authentication.alreadyHaveAccount') }}
       <span
diff --git a/packages/effects/common-ui/src/ui/authentication/types.ts b/packages/effects/common-ui/src/ui/authentication/types.ts
index 7eeca08a8..7b8985d4e 100644
--- a/packages/effects/common-ui/src/ui/authentication/types.ts
+++ b/packages/effects/common-ui/src/ui/authentication/types.ts
@@ -13,11 +13,6 @@ interface AuthenticationProps {
    */
   loading?: boolean;
 
-  /**
-   * @zh_CN 密码占位符
-   */
-  passwordPlaceholder?: string;
-
   /**
    * @zh_CN 二维码登录路径
    */
@@ -66,11 +61,6 @@ interface AuthenticationProps {
    * @zh_CN 登录框标题
    */
   title?: string;
-
-  /**
-   * @zh_CN 用户名占位符
-   */
-  usernamePlaceholder?: string;
 }
 
 interface LoginAndRegisterParams {
diff --git a/packages/effects/layouts/package.json b/packages/effects/layouts/package.json
index cc5a83ce4..5aef5e300 100644
--- a/packages/effects/layouts/package.json
+++ b/packages/effects/layouts/package.json
@@ -20,6 +20,7 @@
     }
   },
   "dependencies": {
+    "@vben-core/form-ui": "workspace:*",
     "@vben-core/layout-ui": "workspace:*",
     "@vben-core/menu-ui": "workspace:*",
     "@vben-core/popup-ui": "workspace:*",
diff --git a/packages/effects/layouts/src/basic/header/header.vue b/packages/effects/layouts/src/basic/header/header.vue
index d2016ed1f..a083d13f9 100644
--- a/packages/effects/layouts/src/basic/header/header.vue
+++ b/packages/effects/layouts/src/basic/header/header.vue
@@ -130,18 +130,18 @@ function clearPreferencesAndLogout() {
 
         <template v-else-if="slot.name === 'preferences'">
           <PreferencesButton
-            class="mr-2"
+            class="mr-1"
             @clear-preferences-and-logout="clearPreferencesAndLogout"
           />
         </template>
         <template v-else-if="slot.name === 'theme-toggle'">
-          <ThemeToggle class="mr-2 mt-[2px]" />
+          <ThemeToggle class="mr-1 mt-[2px]" />
         </template>
         <template v-else-if="slot.name === 'language-toggle'">
-          <LanguageToggle class="mr-2" />
+          <LanguageToggle class="mr-1" />
         </template>
         <template v-else-if="slot.name === 'fullscreen'">
-          <VbenFullScreen class="mr-2" />
+          <VbenFullScreen class="mr-1" />
         </template>
       </slot>
     </template>
diff --git a/packages/effects/layouts/src/widgets/global-search/global-search.vue b/packages/effects/layouts/src/widgets/global-search/global-search.vue
index a388fd4ef..017bc3299 100644
--- a/packages/effects/layouts/src/widgets/global-search/global-search.vue
+++ b/packages/effects/layouts/src/widgets/global-search/global-search.vue
@@ -60,7 +60,7 @@ whenever(open, () => {
 });
 
 const preventDefaultBrowserSearchHotKey = (event: KeyboardEvent) => {
-  if (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
+  if (event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
     event.preventDefault();
   }
 };
diff --git a/packages/effects/layouts/src/widgets/global-search/search-panel.vue b/packages/effects/layouts/src/widgets/global-search/search-panel.vue
index aa422a113..9f648ac3f 100644
--- a/packages/effects/layouts/src/widgets/global-search/search-panel.vue
+++ b/packages/effects/layouts/src/widgets/global-search/search-panel.vue
@@ -8,7 +8,7 @@ import { SearchX, X } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { mapTree, traverseTreeValues, uniqueByField } from '@vben/utils';
 import { VbenIcon, VbenScrollbar } from '@vben-core/shadcn-ui';
-import { isHttpUrl } from '@vben-core/shared';
+import { isHttpUrl } from '@vben-core/shared/utils';
 
 import { onKeyStroke, useLocalStorage, useThrottleFn } from '@vueuse/core';
 
diff --git a/packages/effects/layouts/src/widgets/language-toggle.vue b/packages/effects/layouts/src/widgets/language-toggle.vue
index 9d5ce409e..c8b612bba 100644
--- a/packages/effects/layouts/src/widgets/language-toggle.vue
+++ b/packages/effects/layouts/src/widgets/language-toggle.vue
@@ -30,7 +30,7 @@ async function handleUpdate(value: string) {
       @update:model-value="handleUpdate"
     >
       <VbenIconButton>
-        <Languages class="size-4" />
+        <Languages class="text-foreground size-4" />
       </VbenIconButton>
     </VbenDropdownRadioMenu>
   </div>
diff --git a/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue b/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
index 96086d826..10b443cb9 100644
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
 
+import { $t } from '@vben/locales';
+import { useVbenForm, z } from '@vben-core/form-ui';
 import { useVbenModal } from '@vben-core/popup-ui';
-import {
-  VbenAvatar,
-  VbenButton,
-  VbenInputPassword,
-} from '@vben-core/shadcn-ui';
+import { VbenAvatar, VbenButton } from '@vben-core/shadcn-ui';
 
 interface Props {
   avatar?: string;
@@ -34,10 +32,29 @@ const emit = defineEmits<{
   submit: RegisterEmits['submit'];
 }>();
 
-const formState = reactive({
-  lockScreenPassword: '',
-  submitted: false,
-});
+const [Form, { resetForm, validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => [
+      {
+        component: 'VbenInputPassword' as const,
+        componentProps: {
+          placeholder: $t('widgets.lockScreen.placeholder'),
+        },
+        fieldName: 'lockScreenPassword',
+        formFieldProps: { validateOnBlur: false },
+        label: $t('authentication.password'),
+        rules: z
+          .string()
+          .min(1, { message: $t('widgets.lockScreen.placeholder') }),
+      },
+    ]),
+    showDefaultActions: false,
+  }),
+);
 
 const [Modal] = useVbenModal({
   onConfirm() {
@@ -45,27 +62,16 @@ const [Modal] = useVbenModal({
   },
   onOpenChange(isOpen) {
     if (isOpen) {
-      // reset value reopen
-      formState.submitted = false;
-      formState.lockScreenPassword = '';
+      resetForm();
     }
   },
 });
 
-const passwordStatus = computed(() => {
-  return formState.submitted && !formState.lockScreenPassword
-    ? 'error'
-    : 'default';
-});
-
-function handleSubmit() {
-  formState.submitted = true;
-  if (passwordStatus.value !== 'default') {
-    return;
+async function handleSubmit() {
+  const { valid, values } = await validate();
+  if (valid) {
+    emit('submit', values?.lockScreenPassword);
   }
-  emit('submit', {
-    lockScreenPassword: formState.lockScreenPassword,
-  });
 }
 </script>
 
@@ -90,17 +96,8 @@ function handleSubmit() {
             {{ text }}
           </div>
         </div>
-        <VbenInputPassword
-          v-model="formState.lockScreenPassword"
-          :error-tip="$t('widgets.lockScreen.placeholder')"
-          :label="$t('widgets.lockScreen.password')"
-          :placeholder="$t('widgets.lockScreen.placeholder')"
-          :status="passwordStatus"
-          name="password"
-          required
-          type="password"
-        />
-        <VbenButton class="w-full" @click="handleSubmit">
+        <Form />
+        <VbenButton class="mt-1 w-full" @click="handleSubmit">
           {{ $t('widgets.lockScreen.screenButton') }}
         </VbenButton>
       </div>
diff --git a/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue b/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
index be3a4a032..2b7e2e9d4 100644
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
@@ -4,11 +4,8 @@ import { computed, reactive, ref } from 'vue';
 import { LockKeyhole } from '@vben/icons';
 import { $t, useI18n } from '@vben/locales';
 import { storeToRefs, useLockStore } from '@vben/stores';
-import {
-  VbenAvatar,
-  VbenButton,
-  VbenInputPassword,
-} from '@vben-core/shadcn-ui';
+import { useVbenForm, z } from '@vben-core/form-ui';
+import { VbenAvatar, VbenButton } from '@vben-core/shadcn-ui';
 
 import { useDateFormat, useNow } from '@vueuse/core';
 
@@ -38,36 +35,40 @@ const date = useDateFormat(now, 'YYYY-MM-DD dddd', { locales: locale.value });
 const showUnlockForm = ref(false);
 const { lockScreenPassword } = storeToRefs(lockStore);
 
-const formState = reactive({
-  password: '',
-  submitted: false,
-});
-
-const validPass = computed(
-  () => lockScreenPassword?.value === formState.password,
+const [Form, { form, validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => [
+      {
+        component: 'VbenInputPassword' as const,
+        componentProps: {
+          placeholder: $t('widgets.lockScreen.placeholder'),
+        },
+        fieldName: 'password',
+        label: $t('authentication.password'),
+        rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+      },
+    ]),
+    showDefaultActions: false,
+  }),
 );
 
-const passwordStatus = computed(() => {
-  if (formState.submitted && !validPass.value) {
-    return 'error';
+const validPass = computed(
+  () => lockScreenPassword?.value === form?.values?.password,
+);
+
+async function handleSubmit() {
+  const { valid } = await validate();
+  if (valid) {
+    if (validPass.value) {
+      lockStore.unlockScreen();
+    } else {
+      form.setFieldError('password', $t('authentication.passwordErrorTip'));
+    }
   }
-  return 'default';
-});
-
-const errorTip = computed(() => {
-  return lockScreenPassword?.value === undefined || !formState.password
-    ? $t('widgets.lockScreen.placeholder')
-    : $t('widgets.lockScreen.errorPasswordTip');
-});
-
-function handleSubmit() {
-  formState.submitted = true;
-
-  if (!validPass.value) {
-    return;
-  }
-
-  lockStore.unlockScreen();
 }
 
 function toggleUnlockForm() {
@@ -114,18 +115,9 @@ function toggleUnlockForm() {
       >
         <div class="flex-col-center mb-10 w-[300px]">
           <VbenAvatar :src="avatar" class="enter-x mb-6 size-20" />
+
           <div class="enter-x mb-2 w-full items-center">
-            <VbenInputPassword
-              v-model="formState.password"
-              :autofocus="true"
-              :error-tip="errorTip"
-              :label="$t('widgets.lockScreen.password')"
-              :placeholder="$t('widgets.lockScreen.placeholder')"
-              :status="passwordStatus"
-              name="password"
-              required
-              type="password"
-            />
+            <Form />
           </div>
           <VbenButton class="enter-x w-full" @click="handleSubmit">
             {{ $t('widgets.lockScreen.entry') }}
diff --git a/packages/effects/layouts/src/widgets/notification/notification.vue b/packages/effects/layouts/src/widgets/notification/notification.vue
index c9200063a..6eb4b3687 100644
--- a/packages/effects/layouts/src/widgets/notification/notification.vue
+++ b/packages/effects/layouts/src/widgets/notification/notification.vue
@@ -67,7 +67,7 @@ function handleClick(item: NotificationItem) {
   >
     <template #trigger>
       <div class="flex-center mr-2 h-full" @click.stop="toggle()">
-        <VbenIconButton class="bell-button relative">
+        <VbenIconButton class="bell-button text-foreground relative">
           <span
             v-if="dot"
             class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
diff --git a/packages/effects/layouts/src/widgets/preferences/preferences-button.vue b/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
index e277ff155..29e110d31 100644
--- a/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
@@ -13,7 +13,7 @@ function clearPreferencesAndLogout() {
 <template>
   <Preferences @clear-preferences-and-logout="clearPreferencesAndLogout">
     <VbenIconButton>
-      <Settings class="size-4" />
+      <Settings class="text-foreground size-4" />
     </VbenIconButton>
   </Preferences>
 </template>
diff --git a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
index 51a1faf91..9d02559c7 100644
--- a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
@@ -156,7 +156,7 @@ const {
   isSideMode,
   isSideNav,
 } = usePreferences();
-const { copy } = useClipboard();
+const { copy } = useClipboard({ legacy: true });
 
 const [Drawer] = useVbenDrawer();
 
diff --git a/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue b/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
index d3c47e2b9..91ac55607 100644
--- a/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
+++ b/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
@@ -130,18 +130,18 @@ function toggleTheme(event: MouseEvent) {
   }
 
   &__sun {
-    @apply fill-foreground/70 stroke-none;
+    @apply fill-foreground/90 stroke-none;
 
     transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
     transform-origin: center center;
 
     &:hover > svg > & {
-      @apply fill-foreground/70;
+      @apply fill-foreground/90;
     }
   }
 
   &__sun-beams {
-    @apply stroke-foreground/70 stroke-[2px];
+    @apply stroke-foreground/90 stroke-[2px];
 
     transition:
       transform 1.6s cubic-bezier(0.5, 1.5, 0.75, 1.25),
diff --git a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
index 85c1d2811..9a0f2d106 100644
--- a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
+++ b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
@@ -102,11 +102,7 @@ function handleOpenLock() {
   lockModalApi.open();
 }
 
-function handleSubmitLock({
-  lockScreenPassword,
-}: {
-  lockScreenPassword: string;
-}) {
+function handleSubmitLock(lockScreenPassword: string) {
   lockModalApi.close();
   lockStore.lockScreen(lockScreenPassword);
 }
diff --git a/packages/effects/request/src/request-client/request-client.ts b/packages/effects/request/src/request-client/request-client.ts
index 65dfbf66c..f1c4c08d1 100644
--- a/packages/effects/request/src/request-client/request-client.ts
+++ b/packages/effects/request/src/request-client/request-client.ts
@@ -5,7 +5,7 @@ import type {
   CreateAxiosDefaults,
 } from 'axios';
 
-import { merge } from '@vben/utils';
+import { bindMethods, merge } from '@vben/utils';
 
 import axios from 'axios';
 
@@ -44,7 +44,7 @@ class RequestClient {
     const requestConfig = merge(axiosConfig, defaultConfig);
     this.instance = axios.create(requestConfig);
 
-    this.bindMethods();
+    bindMethods(this);
 
     // 实例化拦截器管理器
     const interceptorManager = new InterceptorManager(this.instance);
@@ -61,21 +61,6 @@ class RequestClient {
     this.download = fileDownloader.download.bind(fileDownloader);
   }
 
-  private bindMethods() {
-    const propertyNames = Object.getOwnPropertyNames(
-      Object.getPrototypeOf(this),
-    );
-    propertyNames.forEach((propertyName) => {
-      const propertyValue = (this as any)[propertyName];
-      if (
-        typeof propertyValue === 'function' &&
-        propertyName !== 'constructor'
-      ) {
-        (this as any)[propertyName] = propertyValue.bind(this);
-      }
-    });
-  }
-
   /**
    * DELETE请求方法
    */
diff --git a/packages/icons/src/svg/icons/refresh.svg b/packages/icons/src/svg/icons/refresh.svg
deleted file mode 100644
index 21c56d526..000000000
--- a/packages/icons/src/svg/icons/refresh.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M3.68 11.333h-.75zm0 1.667l-.528.532a.75.75 0 0 0 1.056 0zm2.208-1.134A.75.75 0 1 0 4.83 10.8zM2.528 10.8a.75.75 0 0 0-1.056 1.065zm16.088-3.408a.75.75 0 1 0 1.277-.786zM12.079 2.25c-5.047 0-9.15 4.061-9.15 9.083h1.5c0-4.182 3.42-7.583 7.65-7.583zm-9.15 9.083V13h1.5v-1.667zm1.28 2.2l1.679-1.667L4.83 10.8l-1.68 1.667zm0-1.065L2.528 10.8l-1.057 1.065l1.68 1.666zm15.684-5.86A9.16 9.16 0 0 0 12.08 2.25v1.5a7.66 7.66 0 0 1 6.537 3.643zM20.314 11l.527-.533a.75.75 0 0 0-1.054 0zM18.1 12.133a.75.75 0 0 0 1.055 1.067zm3.373 1.067a.75.75 0 1 0 1.054-1.067zM5.318 16.606a.75.75 0 1 0-1.277.788zm6.565 5.144c5.062 0 9.18-4.058 9.18-9.083h-1.5c0 4.18-3.43 7.583-7.68 7.583zm9.18-9.083V11h-1.5v1.667zm-1.276-2.2L18.1 12.133l1.055 1.067l1.686-1.667zm0 1.066l1.686 1.667l1.054-1.067l-1.686-1.666zM4.04 17.393a9.2 9.2 0 0 0 7.842 4.357v-1.5a7.7 7.7 0 0 1-6.565-3.644z"/></svg>
diff --git a/packages/icons/src/svg/index.ts b/packages/icons/src/svg/index.ts
index 3b5fbd0bd..27d2780e6 100644
--- a/packages/icons/src/svg/index.ts
+++ b/packages/icons/src/svg/index.ts
@@ -10,7 +10,6 @@ const SvgDownloadIcon = createIconifyIcon('svg:download');
 const SvgCardIcon = createIconifyIcon('svg:card');
 const SvgBellIcon = createIconifyIcon('svg:bell');
 const SvgCakeIcon = createIconifyIcon('svg:cake');
-const SvgRefreshIcon = createIconifyIcon('svg:refresh');
 
 export {
   SvgAvatar1Icon,
@@ -21,5 +20,4 @@ export {
   SvgCakeIcon,
   SvgCardIcon,
   SvgDownloadIcon,
-  SvgRefreshIcon,
 };
diff --git a/packages/locales/src/langs/en-US.json b/packages/locales/src/langs/en-US.json
index 173f5bc8d..789fc6f20 100644
--- a/packages/locales/src/langs/en-US.json
+++ b/packages/locales/src/langs/en-US.json
@@ -54,6 +54,9 @@
       "internalServerError": "Internal Server Error. Something went wrong on our end. Please try again later."
     }
   },
+  "formRules": {
+    "required": "Please enter {0}"
+  },
   "widgets": {
     "document": "Document",
     "qa": "Q&A",
@@ -93,9 +96,11 @@
     "loginSuccess": "Login Successful",
     "loginSuccessDesc": "Welcome Back",
     "loginSubtitle": "Enter your account details to manage your projects",
+    "selectAccount": "Quick Select Account",
     "username": "Username",
     "password": "Password",
     "usernameTip": "Please enter username",
+    "passwordErrorTip": "Password is incorrect",
     "passwordTip": "Please enter password",
     "rememberMe": "Remember Me",
     "createAnAccount": "Create an Account",
@@ -115,6 +120,7 @@
     "forgetPassword": "Forget Password?",
     "forgetPasswordSubtitle": "Enter your email and we'll send you instructions to reset your password",
     "emailTip": "Please enter email",
+    "emailValidErrorTip": "The email format you entered is incorrect",
     "sendResetLink": "Send Reset Link",
     "email": "Email",
     "qrcodeSubtitle": "Scan the QR code with your phone to login",
@@ -125,7 +131,8 @@
     "codeTip": "Security code is required",
     "mobile": "Mobile",
     "mobileLogin": "Mobile Login",
-    "mobile-tip": "Please enter phone number",
+    "mobileTip": "Please enter mobile number",
+    "mobileErrortip": "The phone number format is incorrect",
     "sendCode": "Get Security code",
     "sendText": "Resend in {0}s",
     "thirdPartyLogin": "Or continue with",
diff --git a/packages/locales/src/langs/zh-CN.json b/packages/locales/src/langs/zh-CN.json
index 2a3ac9a4c..61d39c964 100644
--- a/packages/locales/src/langs/zh-CN.json
+++ b/packages/locales/src/langs/zh-CN.json
@@ -54,6 +54,9 @@
       "internalServerError": "内部服务器错误，请稍后再试。"
     }
   },
+  "formRules": {
+    "required": "请输入{0}"
+  },
   "widgets": {
     "document": "文档",
     "qa": "问题 & 帮助",
@@ -93,10 +96,12 @@
     "loginSuccess": "登录成功",
     "loginSuccessDesc": "欢迎回来",
     "loginSubtitle": "请输入您的帐户信息以开始管理您的项目",
+    "selectAccount": "快速选择账号",
     "username": "账号",
     "password": "密码",
     "usernameTip": "请输入用户名",
     "passwordTip": "请输入密码",
+    "passwordErrorTip": "密码错误",
     "rememberMe": "记住账号",
     "createAnAccount": "创建一个账号",
     "createAccount": "创建账号",
@@ -115,6 +120,7 @@
     "forgetPassword": "忘记密码?",
     "forgetPasswordSubtitle": "输入您的电子邮件，我们将向您发送重置密码的连接",
     "emailTip": "请输入邮箱",
+    "emailValidErrorTip": "你输入的邮箱格式不正确",
     "sendResetLink": "发送重置链接",
     "email": "邮箱",
     "qrcodeSubtitle": "请用手机扫描二维码登录",
@@ -124,8 +130,9 @@
     "code": "验证码",
     "codeTip": "请输入验证码",
     "mobile": "手机号码",
+    "mobileTip": "请输入手机号",
+    "mobileErrortip": "手机号码格式错误",
     "mobileLogin": "手机号登录",
-    "mobile-tip": "请输入手机号码",
     "sendCode": "获取验证码",
     "sendText": "{0}秒后重新获取",
     "thirdPartyLogin": "其他登录方式",
diff --git a/packages/stores/src/modules/tabbar.ts b/packages/stores/src/modules/tabbar.ts
index d7955d671..12ce67c02 100644
--- a/packages/stores/src/modules/tabbar.ts
+++ b/packages/stores/src/modules/tabbar.ts
@@ -3,7 +3,11 @@ import type { Router, RouteRecordNormalized } from 'vue-router';
 
 import { toRaw } from 'vue';
 
-import { openWindow, startProgress, stopProgress } from '@vben-core/shared';
+import {
+  openWindow,
+  startProgress,
+  stopProgress,
+} from '@vben-core/shared/utils';
 
 import { acceptHMRUpdate, defineStore } from 'pinia';
 
diff --git a/packages/types/src/user.d.ts b/packages/types/src/user.ts
similarity index 100%
rename from packages/types/src/user.d.ts
rename to packages/types/src/user.ts
diff --git a/packages/utils/src/helpers/generate-menus.ts b/packages/utils/src/helpers/generate-menus.ts
index 2ee0a5b5e..48c30fd6e 100644
--- a/packages/utils/src/helpers/generate-menus.ts
+++ b/packages/utils/src/helpers/generate-menus.ts
@@ -1,7 +1,7 @@
 import type { ExRouteRecordRaw, MenuRecordRaw } from '@vben-core/typings';
 import type { Router, RouteRecordRaw } from 'vue-router';
 
-import { filterTree, mapTree } from '@vben-core/shared';
+import { filterTree, mapTree } from '@vben-core/shared/utils';
 
 /**
  * 根据 routes 生成菜单列表
diff --git a/packages/utils/src/helpers/generate-routes-backend.ts b/packages/utils/src/helpers/generate-routes-backend.ts
index 09e099778..4f179080d 100644
--- a/packages/utils/src/helpers/generate-routes-backend.ts
+++ b/packages/utils/src/helpers/generate-routes-backend.ts
@@ -5,7 +5,7 @@ import type {
 } from '@vben-core/typings';
 import type { RouteRecordRaw } from 'vue-router';
 
-import { mapTree } from '@vben-core/shared';
+import { mapTree } from '@vben-core/shared/utils';
 
 /**
  * 动态生成路由 - 后端方式
diff --git a/packages/utils/src/helpers/generate-routes-frontend.ts b/packages/utils/src/helpers/generate-routes-frontend.ts
index f2353ae57..dafc8a7d3 100644
--- a/packages/utils/src/helpers/generate-routes-frontend.ts
+++ b/packages/utils/src/helpers/generate-routes-frontend.ts
@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { filterTree, mapTree } from '@vben-core/shared';
+import { filterTree, mapTree } from '@vben-core/shared/utils';
 
 /**
  * 动态生成路由 - 前端方式
diff --git a/playground/src/adapter/form.ts b/playground/src/adapter/form.ts
new file mode 100644
index 000000000..06e8cf134
--- /dev/null
+++ b/playground/src/adapter/form.ts
@@ -0,0 +1,114 @@
+import type {
+  BaseFormComponentType,
+  VbenFormSchema as FormSchema,
+  VbenFormProps,
+} from '@vben/common-ui';
+
+import { h } from 'vue';
+
+import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import {
+  AutoComplete,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  DatePicker,
+  Divider,
+  Input,
+  InputNumber,
+  InputPassword,
+  Mentions,
+  Radio,
+  RadioGroup,
+  RangePicker,
+  Rate,
+  Select,
+  Space,
+  Switch,
+  TimePicker,
+  TreeSelect,
+  Upload,
+} from 'ant-design-vue';
+
+// 业务表单组件适配
+
+export type FormComponentType =
+  | 'AutoComplete'
+  | 'Checkbox'
+  | 'CheckboxGroup'
+  | 'DatePicker'
+  | 'Divider'
+  | 'Input'
+  | 'InputNumber'
+  | 'InputPassword'
+  | 'Mentions'
+  | 'Radio'
+  | 'RadioGroup'
+  | 'RangePicker'
+  | 'Rate'
+  | 'Select'
+  | 'Space'
+  | 'Switch'
+  | 'TimePicker'
+  | 'TreeSelect'
+  | 'Upload'
+  | BaseFormComponentType;
+
+// 初始化表单组件，并注册到form组件内部
+setupVbenForm<FormComponentType>({
+  components: {
+    AutoComplete,
+    Checkbox,
+    CheckboxGroup,
+    DatePicker,
+    // 自定义默认的重置按钮
+    DefaultResetActionButton: (props, { attrs, slots }) => {
+      return h(Button, { ...props, attrs, type: 'default' }, slots);
+    },
+    // 自定义默认的提交按钮
+    DefaultSubmitActionButton: (props, { attrs, slots }) => {
+      return h(Button, { ...props, attrs, type: 'primary' }, slots);
+    },
+    Divider,
+    Input,
+    InputNumber,
+    InputPassword,
+    Mentions,
+    Radio,
+    RadioGroup,
+    RangePicker,
+    Rate,
+    Select,
+    Space,
+    Switch,
+    TimePicker,
+    TreeSelect,
+    Upload,
+  },
+  config: {
+    baseModelPropName: 'value',
+    modelPropNameMap: {
+      Checkbox: 'checked',
+      Radio: 'checked',
+      Switch: 'checked',
+      Upload: 'fileList',
+    },
+  },
+  defineRules: {
+    required: (value, _params, ctx) => {
+      if ((!value && value !== 0) || value.length === 0) {
+        return $t('formRules.required', [ctx.label]);
+      }
+      return true;
+    },
+  },
+});
+
+const useVbenForm = useForm<FormComponentType>;
+
+export { useVbenForm, z };
+
+export type VbenFormSchema = FormSchema<FormComponentType>;
+export type { VbenFormProps };
diff --git a/playground/src/adapter/index.ts b/playground/src/adapter/index.ts
new file mode 100644
index 000000000..698d687b9
--- /dev/null
+++ b/playground/src/adapter/index.ts
@@ -0,0 +1 @@
+export * from './form';
diff --git a/playground/src/layouts/basic.vue b/playground/src/layouts/basic.vue
index 9e25d99f3..3c302634b 100644
--- a/playground/src/layouts/basic.vue
+++ b/playground/src/layouts/basic.vue
@@ -13,11 +13,12 @@ import {
   UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import { storeToRefs, useAccessStore, useUserStore } from '@vben/stores';
+import { useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
 import { $t } from '#/locales';
 import { useAuthStore } from '#/store';
+import LoginForm from '#/views/_core/authentication/login.vue';
 
 const notifications = ref<NotificationItem[]>([
   {
@@ -87,8 +88,6 @@ const menus = computed(() => [
   },
 ]);
 
-const { loginLoading } = storeToRefs(authStore);
-
 const avatar = computed(() => {
   return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
 });
@@ -130,11 +129,9 @@ function handleMakeAll() {
       <AuthenticationLoginExpiredModal
         v-model:open="accessStore.loginExpired"
         :avatar
-        :loading="loginLoading"
-        password-placeholder="123456"
-        username-placeholder="vben"
-        @submit="authStore.authLogin"
-      />
+      >
+        <LoginForm />
+      </AuthenticationLoginExpiredModal>
     </template>
     <template #lock-screen>
       <LockScreen :avatar @to-login="handleLogout" />
diff --git a/playground/src/locales/langs/en-US.json b/playground/src/locales/langs/en-US.json
index 23721b03f..1577eb37c 100644
--- a/playground/src/locales/langs/en-US.json
+++ b/playground/src/locales/langs/en-US.json
@@ -72,6 +72,14 @@
       "ellipsis": {
         "title": "EllipsisText"
       },
+      "form": {
+        "title": "Form",
+        "basic": "Basic Form",
+        "query": "Query Form",
+        "rules": "Form Rules",
+        "dynamic": "Dynamic Form",
+        "custom": "Custom Component"
+      },
       "captcha": {
         "title": "Captcha"
       }
diff --git a/playground/src/locales/langs/zh-CN.json b/playground/src/locales/langs/zh-CN.json
index fe522fc39..8bcac9632 100644
--- a/playground/src/locales/langs/zh-CN.json
+++ b/playground/src/locales/langs/zh-CN.json
@@ -72,6 +72,14 @@
       "ellipsis": {
         "title": "文本省略"
       },
+      "form": {
+        "title": "表单",
+        "basic": "基础表单",
+        "query": "查询表单",
+        "rules": "表单校验",
+        "dynamic": "动态表单",
+        "custom": "自定义组件"
+      },
       "captcha": {
         "title": "验证码"
       }
diff --git a/playground/src/router/routes/modules/examples.ts b/playground/src/router/routes/modules/examples.ts
index b06ed3097..b2b6a9c79 100644
--- a/playground/src/router/routes/modules/examples.ts
+++ b/playground/src/router/routes/modules/examples.ts
@@ -47,6 +47,55 @@ const routes: RouteRecordRaw[] = [
           title: $t('page.examples.captcha.title'),
         },
       },
+      {
+        name: 'FormExample',
+        path: '/examples/form',
+        meta: {
+          title: $t('page.examples.form.title'),
+        },
+        children: [
+          {
+            name: 'FormBasicExample',
+            path: '/examples/form/basic',
+            component: () => import('#/views/examples/form/basic.vue'),
+            meta: {
+              title: $t('page.examples.form.basic'),
+            },
+          },
+          {
+            name: 'FormQueryExample',
+            path: '/examples/form/query',
+            component: () => import('#/views/examples/form/query.vue'),
+            meta: {
+              title: $t('page.examples.form.query'),
+            },
+          },
+          {
+            name: 'FormRulesExample',
+            path: '/examples/form/rules',
+            component: () => import('#/views/examples/form/rules.vue'),
+            meta: {
+              title: $t('page.examples.form.rules'),
+            },
+          },
+          {
+            name: 'FormDynamicExample',
+            path: '/examples/form/dynamic',
+            component: () => import('#/views/examples/form/dynamic.vue'),
+            meta: {
+              title: $t('page.examples.form.dynamic'),
+            },
+          },
+          {
+            name: 'FormCustomExample',
+            path: '/examples/form/custom',
+            component: () => import('#/views/examples/form/custom.vue'),
+            meta: {
+              title: $t('page.examples.form.custom'),
+            },
+          },
+        ],
+      },
     ],
   },
 ];
diff --git a/playground/src/views/_core/authentication/code-login.vue b/playground/src/views/_core/authentication/code-login.vue
index 36cf50ec0..03cf55028 100644
--- a/playground/src/views/_core/authentication/code-login.vue
+++ b/playground/src/views/_core/authentication/code-login.vue
@@ -1,15 +1,49 @@
 <script lang="ts" setup>
-import type { LoginCodeParams } from '@vben/common-ui';
+import type { LoginCodeParams, VbenFormSchema } from '@vben/common-ui';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
-import { AuthenticationCodeLogin } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationCodeLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'CodeLogin' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.mobile'),
+      },
+      fieldName: 'phoneNumber',
+      label: $t('authentication.mobile'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.mobileTip') })
+        .refine((v) => /^\d{11}$/.test(v), {
+          message: $t('authentication.mobileErrortip'),
+        }),
+    },
+    {
+      component: 'VbenPinInput',
+      componentProps: {
+        createText: (countdown: number) => {
+          const text =
+            countdown > 0
+              ? $t('authentication.sendText', [countdown])
+              : $t('authentication.sendCode');
+          return text;
+        },
+        placeholder: $t('authentication.code'),
+      },
+      fieldName: 'code',
+      label: $t('authentication.code'),
+      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+    },
+  ];
+});
 /**
  * 异步处理登录操作
  * Asynchronously handle the login process
@@ -23,8 +57,8 @@ async function handleLogin(values: LoginCodeParams) {
 
 <template>
   <AuthenticationCodeLogin
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleLogin"
   />
 </template>
diff --git a/playground/src/views/_core/authentication/forget-password.vue b/playground/src/views/_core/authentication/forget-password.vue
index 74ccc27ed..6cedf3e8a 100644
--- a/playground/src/views/_core/authentication/forget-password.vue
+++ b/playground/src/views/_core/authentication/forget-password.vue
@@ -1,13 +1,32 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { VbenFormSchema } from '@vben/common-ui';
 
-import { AuthenticationForgetPassword } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { computed, ref } from 'vue';
+
+import { AuthenticationForgetPassword, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'ForgetPassword' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: 'example@example.com',
+      },
+      fieldName: 'email',
+      label: $t('authentication.email'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.emailTip') })
+        .email($t('authentication.emailValidErrorTip')),
+    },
+  ];
+});
+
 function handleSubmit(value: string) {
   // eslint-disable-next-line no-console
   console.log('reset email:', value);
@@ -16,8 +35,8 @@ function handleSubmit(value: string) {
 
 <template>
   <AuthenticationForgetPassword
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleSubmit"
   />
 </template>
diff --git a/playground/src/views/_core/authentication/login.vue b/playground/src/views/_core/authentication/login.vue
index 3bcdd9500..f3d41c487 100644
--- a/playground/src/views/_core/authentication/login.vue
+++ b/playground/src/views/_core/authentication/login.vue
@@ -1,18 +1,108 @@
 <script lang="ts" setup>
-import { AuthenticationLogin } from '@vben/common-ui';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { BasicOption } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { AuthenticationLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 import { useAuthStore } from '#/store';
 
 defineOptions({ name: 'Login' });
 
 const authStore = useAuthStore();
+
+const MOCK_USER_OPTIONS: BasicOption[] = [
+  {
+    label: '超级管理员',
+    value: 'vben',
+  },
+  {
+    label: '管理员',
+    value: 'admin',
+  },
+  {
+    label: '用户',
+    value: 'jack',
+  },
+];
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenSelect',
+      // componentProps(_values, form) {
+      //   return {
+      //     'onUpdate:modelValue': (value: string) => {
+      //       const findItem = MOCK_USER_OPTIONS.find(
+      //         (item) => item.value === value,
+      //       );
+      //       if (findItem) {
+      //         form.setValues({
+      //           password: '123456',
+      //           username: findItem.label,
+      //         });
+      //       }
+      //     },
+      //     options: MOCK_USER_OPTIONS,
+      //     placeholder: $t('authentication.selectAccount'),
+      //   };
+      // },
+      componentProps: {
+        options: MOCK_USER_OPTIONS,
+        placeholder: $t('authentication.selectAccount'),
+      },
+      fieldName: 'selectAccount',
+      label: $t('authentication.selectAccount'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.selectAccount') })
+        .optional()
+        .default('vben'),
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      dependencies: {
+        trigger(values, form) {
+          if (values.selectAccount) {
+            const findUser = MOCK_USER_OPTIONS.find(
+              (item) => item.value === values.selectAccount,
+            );
+            if (findUser) {
+              form.setValues({
+                password: '123456',
+                username: findUser.value,
+              });
+            }
+          }
+        },
+        triggerFields: ['selectAccount'],
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+  ];
+});
 </script>
 
 <template>
   <AuthenticationLogin
+    :form-schema="formSchema"
     :loading="authStore.loginLoading"
-    password-placeholder="123456"
-    username-placeholder="vben"
     @submit="authStore.authLogin"
   />
 </template>
diff --git a/playground/src/views/_core/authentication/register.vue b/playground/src/views/_core/authentication/register.vue
index f6b227d96..5e0cad071 100644
--- a/playground/src/views/_core/authentication/register.vue
+++ b/playground/src/views/_core/authentication/register.vue
@@ -1,15 +1,91 @@
 <script lang="ts" setup>
-import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui';
 
-import { ref } from 'vue';
+import { computed, h, ref } from 'vue';
 
-import { AuthenticationRegister } from '@vben/common-ui';
-import { LOGIN_PATH } from '@vben/constants';
+import { AuthenticationRegister, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
 
 defineOptions({ name: 'Register' });
 
 const loading = ref(false);
 
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      renderComponentContent() {
+        return {
+          strengthText: () => $t('authentication.passwordStrength'),
+        };
+      },
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          const { password } = values;
+          return z
+            .string()
+            .min(1, { message: $t('authentication.passwordTip') })
+            .refine((value) => value === password, {
+              message: $t('authentication.confirmPasswordTip'),
+            });
+        },
+        triggerFields: ['password'],
+      },
+      fieldName: 'confirmPassword',
+      label: $t('authentication.confirmPassword'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenCheckbox',
+      fieldName: 'agreePolicy',
+      renderComponentContent: () => ({
+        default: () =>
+          h('span', [
+            $t('authentication.agree'),
+            h(
+              'a',
+              {
+                class:
+                  'cursor-pointer text-primary ml-1 hover:text-primary-hover',
+                href: '',
+              },
+              [
+                $t('authentication.privacyPolicy'),
+                '&',
+                $t('authentication.terms'),
+              ],
+            ),
+          ]),
+      }),
+      rules: z.boolean().refine((value) => !!value, {
+        message: $t('authentication.agreeTip'),
+      }),
+    },
+  ];
+});
+
 function handleSubmit(value: LoginAndRegisterParams) {
   // eslint-disable-next-line no-console
   console.log('register submit:', value);
@@ -18,8 +94,8 @@ function handleSubmit(value: LoginAndRegisterParams) {
 
 <template>
   <AuthenticationRegister
+    :form-schema="formSchema"
     :loading="loading"
-    :login-path="LOGIN_PATH"
     @submit="handleSubmit"
   />
 </template>
diff --git a/playground/src/views/demos/features/clipboard/index.vue b/playground/src/views/demos/features/clipboard/index.vue
index 028c18534..b904ff691 100644
--- a/playground/src/views/demos/features/clipboard/index.vue
+++ b/playground/src/views/demos/features/clipboard/index.vue
@@ -7,7 +7,7 @@ import { useClipboard } from '@vueuse/core';
 import { Button, Card, Input } from 'ant-design-vue';
 
 const source = ref('Hello');
-const { copy, text } = useClipboard({ source });
+const { copy, text } = useClipboard({ legacy: true, source });
 </script>
 
 <template>
diff --git a/playground/src/views/examples/captcha/index.vue b/playground/src/views/examples/captcha/index.vue
index 11feeadbe..f5fae2f14 100644
--- a/playground/src/views/examples/captcha/index.vue
+++ b/playground/src/views/examples/captcha/index.vue
@@ -1,14 +1,16 @@
 <script lang="ts" setup>
+import type { CaptchaPoint } from '@vben/common-ui';
+
 import { ref } from 'vue';
 
-import { Page, type Point, PointSelectionCaptcha } from '@vben/common-ui';
+import { Page, PointSelectionCaptcha } from '@vben/common-ui';
 
 import { Card } from 'ant-design-vue';
 
 import { captchaImage, hintImage } from './base64';
 
-const selectedPoints = ref<Point[]>([]);
-const handleConfirm = (points: Point[], clear: () => void) => {
+const selectedPoints = ref<CaptchaPoint[]>([]);
+const handleConfirm = (points: CaptchaPoint[], clear: () => void) => {
   selectedPoints.value = points;
   clear();
 };
diff --git a/playground/src/views/examples/drawer/form-drawer-demo.vue b/playground/src/views/examples/drawer/form-drawer-demo.vue
new file mode 100644
index 000000000..eee1c19a5
--- /dev/null
+++ b/playground/src/views/examples/drawer/form-drawer-demo.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter';
+
+defineOptions({
+  name: 'FormDrawerDemo',
+});
+
+const [Form, formApi] = useVbenForm({
+  schema: [
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'field1',
+      label: '字段1',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'field2',
+      label: '字段2',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+const [Drawer, drawerApi] = useVbenDrawer({
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm: async () => {
+    await formApi.submitForm();
+    drawerApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const { values } = drawerApi.getData<Record<string, any>>();
+      if (values) {
+        formApi.setValues(values);
+      }
+    }
+  },
+  title: '内嵌表单示例',
+});
+</script>
+<template>
+  <Drawer>
+    <Form />
+  </Drawer>
+</template>
diff --git a/playground/src/views/examples/drawer/index.vue b/playground/src/views/examples/drawer/index.vue
index 30ff0e489..fa23bbe5f 100644
--- a/playground/src/views/examples/drawer/index.vue
+++ b/playground/src/views/examples/drawer/index.vue
@@ -7,6 +7,7 @@ import DocButton from '../doc-button.vue';
 import AutoHeightDemo from './auto-height-demo.vue';
 import BaseDemo from './base-demo.vue';
 import DynamicDemo from './dynamic-demo.vue';
+import FormDrawerDemo from './form-drawer-demo.vue';
 import SharedDataDemo from './shared-data-demo.vue';
 
 const [BaseDrawer, baseDrawerApi] = useVbenDrawer({
@@ -26,6 +27,10 @@ const [SharedDataDrawer, sharedDrawerApi] = useVbenDrawer({
   connectedComponent: SharedDataDemo,
 });
 
+const [FormDrawer, formDrawerApi] = useVbenDrawer({
+  connectedComponent: FormDrawerDemo,
+});
+
 function openBaseDrawer() {
   baseDrawerApi.open();
 }
@@ -50,6 +55,14 @@ function openSharedDrawer() {
   });
   sharedDrawerApi.open();
 }
+
+function openFormDrawer() {
+  formDrawerApi.setData({
+    // 表单值
+    values: { field1: 'abc', field2: '123' },
+  });
+  formDrawerApi.open();
+}
 </script>
 
 <template>
@@ -64,6 +77,7 @@ function openSharedDrawer() {
     <AutoHeightDrawer />
     <DynamicDrawer />
     <SharedDataDrawer />
+    <FormDrawer />
 
     <Card class="mb-4" title="基本使用">
       <p class="mb-3">一个基础的抽屉示例</p>
@@ -89,5 +103,12 @@ function openSharedDrawer() {
         打开抽屉并传递数据
       </Button>
     </Card>
+
+    <Card class="mb-4" title="表单抽屉示例">
+      <p class="mb-3">打开抽屉并设置表单schema以及数据</p>
+      <Button type="primary" @click="openFormDrawer">
+        打开抽屉并设置表单schema以及数据
+      </Button>
+    </Card>
   </Page>
 </template>
diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue
new file mode 100644
index 000000000..1320e3a71
--- /dev/null
+++ b/playground/src/views/examples/form/basic.vue
@@ -0,0 +1,270 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { Button, Card, message } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { useVbenForm } from '#/adapter';
+
+const [BaseForm, baseFormApi] = useVbenForm({
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // 使用 tailwindcss grid布局
+  // 提交函数
+  handleSubmit: onSubmit,
+  // 垂直布局，label和input在不同行，值为vertical
+  layout: 'horizontal',
+  // 水平布局，label和input在同一行
+  schema: [
+    {
+      // 组件需要在 #/adapter.ts内注册，并加上类型
+      component: 'Input',
+      // 对应组件的参数
+      componentProps: {
+        placeholder: '请输入用户名',
+      },
+      // 字段名
+      fieldName: 'username',
+      // 界面显示的label
+      label: '字符串',
+    },
+    {
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入密码',
+      },
+      fieldName: 'password',
+      label: '密码',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'number',
+      label: '数字(带后缀)',
+      suffix: () => '¥',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        filterOption: true,
+        options: [
+          {
+            label: '选项1',
+            value: '1',
+          },
+          {
+            label: '选项2',
+            value: '2',
+          },
+        ],
+        placeholder: '请选择',
+        showSearch: true,
+      },
+      fieldName: 'options',
+      label: '下拉选',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '选项1',
+            value: '1',
+          },
+          {
+            label: '选项2',
+            value: '2',
+          },
+        ],
+      },
+      fieldName: 'radioGroup',
+      label: '单选组',
+    },
+    {
+      component: 'Radio',
+      fieldName: 'radio',
+      label: '',
+      renderComponentContent: () => {
+        return {
+          default: () => ['Radio'],
+        };
+      },
+    },
+    {
+      component: 'CheckboxGroup',
+      componentProps: {
+        name: 'cname',
+        options: [
+          {
+            label: '选项1',
+            value: '1',
+          },
+          {
+            label: '选项2',
+            value: '2',
+          },
+        ],
+      },
+      fieldName: 'checkboxGroup',
+      label: '多选组',
+    },
+    {
+      component: 'Checkbox',
+      fieldName: 'checkbox',
+      label: '',
+      renderComponentContent: () => {
+        return {
+          default: () => ['我已阅读并同意'],
+        };
+      },
+    },
+    {
+      component: 'Mentions',
+      componentProps: {
+        options: [
+          {
+            label: 'afc163',
+            value: 'afc163',
+          },
+          {
+            label: 'zombieJ',
+            value: 'zombieJ',
+          },
+        ],
+        placeholder: '请输入',
+      },
+      fieldName: 'mentions',
+      label: '提及',
+    },
+    {
+      component: 'Rate',
+      fieldName: 'rate',
+      label: '评分',
+    },
+    {
+      component: 'Switch',
+      componentProps: {
+        class: 'w-auto',
+      },
+      fieldName: 'switch',
+      label: '开关',
+    },
+    {
+      component: 'DatePicker',
+      fieldName: 'datePicker',
+      label: '日期选择框',
+    },
+    {
+      component: 'RangePicker',
+      fieldName: 'rangePicker',
+      label: '范围选择器',
+    },
+    {
+      component: 'TimePicker',
+      fieldName: 'timePicker',
+      label: '时间选择框',
+    },
+    {
+      component: 'TreeSelect',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请选择',
+        showSearch: true,
+        treeData: [
+          {
+            label: 'root 1',
+            value: 'root 1',
+            children: [
+              {
+                label: 'parent 1',
+                value: 'parent 1',
+                children: [
+                  {
+                    label: 'parent 1-0',
+                    value: 'parent 1-0',
+                    children: [
+                      {
+                        label: 'my leaf',
+                        value: 'leaf1',
+                      },
+                      {
+                        label: 'your leaf',
+                        value: 'leaf2',
+                      },
+                    ],
+                  },
+                  {
+                    label: 'parent 1-1',
+                    value: 'parent 1-1',
+                  },
+                ],
+              },
+              {
+                label: 'parent 2',
+                value: 'parent 2',
+              },
+            ],
+          },
+        ],
+        treeNodeFilterProp: 'label',
+      },
+      fieldName: 'treeSelect',
+      label: '树选择',
+    },
+  ],
+  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+});
+
+function onSubmit(values: Record<string, any>) {
+  message.success({
+    content: `form values: ${JSON.stringify(values)}`,
+  });
+}
+
+function handleSetFormValue() {
+  /**
+   * 设置表单值(多个)
+   */
+  baseFormApi.setValues({
+    checkboxGroup: ['1'],
+    datePicker: dayjs('2022-01-01'),
+    mentions: '@afc163',
+    number: 3,
+    options: '1',
+    password: '2',
+    radioGroup: '1',
+    rangePicker: [dayjs('2022-01-01'), dayjs('2022-01-02')],
+    rate: 3,
+    switch: true,
+    timePicker: dayjs('2022-01-01 12:00:00'),
+    treeSelect: 'leaf1',
+    username: '1',
+  });
+
+  // 设置单个表单值
+  baseFormApi.setFieldValue('checkbox', true);
+}
+</script>
+
+<template>
+  <Page
+    description="表单组件基础示例，请注意，该页面用到的参数代码会添加一些简单注释，方便理解，请仔细查看。"
+    title="表单组件"
+  >
+    <Card title="基础示例">
+      <template #extra>
+        <Button type="primary" @click="handleSetFormValue">设置表单值</Button>
+      </template>
+      <BaseForm />
+    </Card>
+  </Page>
+</template>
diff --git a/playground/src/views/examples/form/custom.vue b/playground/src/views/examples/form/custom.vue
new file mode 100644
index 000000000..6bbf0f243
--- /dev/null
+++ b/playground/src/views/examples/form/custom.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { h } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Card, Input, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+const [BaseForm] = useVbenForm({
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 200,
+  },
+  // 使用 tailwindcss grid布局
+  // 提交函数
+  handleSubmit: onSubmit,
+  // 垂直布局，label和input在不同行，值为vertical
+  layout: 'horizontal',
+  // 水平布局，label和input在同一行
+  schema: [
+    {
+      // 组件需要在 #/adapter.ts内注册，并加上类型
+      component: 'Input',
+      fieldName: 'field',
+      label: '自定义后缀',
+      suffix: () => h('span', { class: 'text-red-600' }, '元'),
+    },
+    {
+      // 组件需要在 #/adapter.ts内注册，并加上类型
+      component: 'Input',
+      fieldName: 'field1',
+      label: '自定义组件slot',
+      renderComponentContent: () => ({
+        prefix: () => 'prefix',
+        suffix: () => 'suffix',
+      }),
+    },
+    {
+      // 组件需要在 #/adapter.ts内注册，并加上类型
+      component: h(Input, { placeholder: '请输入' }),
+      fieldName: 'field2',
+      label: '自定义组件',
+      rules: 'required',
+    },
+    {
+      // 组件需要在 #/adapter.ts内注册，并加上类型
+      component: 'Input',
+      fieldName: 'field3',
+      label: '自定义组件(slot)',
+      rules: 'required',
+    },
+  ],
+  // 中屏一行显示2个，小屏一行显示1个
+  wrapperClass: 'grid-cols-1 md:grid-cols-2',
+});
+
+function onSubmit(values: Record<string, any>) {
+  message.success({
+    content: `form values: ${JSON.stringify(values)}`,
+  });
+}
+</script>
+
+<template>
+  <Page description="表单组件自定义示例" title="表单组件">
+    <Card title="基础示例">
+      <BaseForm>
+        <template #field3="slotProps">
+          <Input placeholder="请输入" v-bind="slotProps" />
+        </template>
+      </BaseForm>
+    </Card>
+  </Page>
+</template>
diff --git a/playground/src/views/examples/form/dynamic.vue b/playground/src/views/examples/form/dynamic.vue
new file mode 100644
index 000000000..948dd629b
--- /dev/null
+++ b/playground/src/views/examples/form/dynamic.vue
@@ -0,0 +1,271 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { Button, Card, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+const [Form, formApi] = useVbenForm({
+  // 使用 tailwindcss grid布局
+  // 提交函数
+  handleSubmit: onSubmit,
+  // 水平布局，label和input在同一行
+  schema: [
+    {
+      component: 'Switch',
+      defaultValue: true,
+      fieldName: 'field1Switch',
+      help: '通过Dom控制销毁',
+      label: '显示字段1',
+    },
+    {
+      component: 'Switch',
+      defaultValue: true,
+      fieldName: 'field2Switch',
+      help: '通过css控制隐藏',
+      label: '显示字段2',
+    },
+    {
+      component: 'Switch',
+      fieldName: 'field3Switch',
+      label: '禁用字段3',
+    },
+    {
+      component: 'Switch',
+      fieldName: 'field4Switch',
+      label: '字段4必填',
+    },
+    {
+      component: 'Input',
+      dependencies: {
+        if(values) {
+          return !!values.field1Switch;
+        },
+        // 只有指定的字段改变时，才会触发
+        triggerFields: ['field1Switch'],
+      },
+      // 字段名
+      fieldName: 'field1',
+      // 界面显示的label
+      label: '字段1',
+    },
+    {
+      component: 'Input',
+      dependencies: {
+        show(values) {
+          return !!values.field2Switch;
+        },
+        // 只有指定的字段改变时，才会触发
+        triggerFields: ['field2Switch'],
+      },
+      // 字段名
+      fieldName: 'field2',
+      // 界面显示的label
+      label: '字段2',
+    },
+    {
+      component: 'Input',
+      dependencies: {
+        disabled(values) {
+          return !!values.field3Switch;
+        },
+        // 只有指定的字段改变时，才会触发
+        triggerFields: ['field3Switch'],
+      },
+      // 字段名
+      fieldName: 'field3',
+      // 界面显示的label
+      label: '字段3',
+    },
+    {
+      component: 'Input',
+      dependencies: {
+        required(values) {
+          return !!values.field4Switch;
+        },
+        // 只有指定的字段改变时，才会触发
+        triggerFields: ['field4Switch'],
+      },
+      // 字段名
+      fieldName: 'field4',
+      // 界面显示的label
+      label: '字段4',
+    },
+    {
+      component: 'Input',
+      dependencies: {
+        rules(values) {
+          if (values.field1 === '123') {
+            return 'required';
+          }
+          return null;
+        },
+        // 只有指定的字段改变时，才会触发
+        triggerFields: ['field1'],
+      },
+      // 字段名
+      fieldName: 'field5',
+      help: '当字段1的值为`123`时，必填',
+      // 界面显示的label
+      label: '动态rules',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        class: 'w-full',
+        filterOption: true,
+        options: [
+          {
+            label: '选项1',
+            value: '1',
+          },
+          {
+            label: '选项2',
+            value: '2',
+          },
+        ],
+        placeholder: '请选择',
+        showSearch: true,
+      },
+      dependencies: {
+        componentProps(values) {
+          if (values.field2 === '123') {
+            return {
+              options: [
+                {
+                  label: '选项1',
+                  value: '1',
+                },
+                {
+                  label: '选项2',
+                  value: '2',
+                },
+                {
+                  label: '选项3',
+                  value: '3',
+                },
+              ],
+            };
+          }
+          return {};
+        },
+        // 只有指定的字段改变时，才会触发
+        triggerFields: ['field2'],
+      },
+      // 字段名
+      fieldName: 'field6',
+      help: '当字段2的值为`123`时，更改下拉选项',
+      // 界面显示的label
+      label: '动态配置',
+    },
+    {
+      component: 'Input',
+      fieldName: 'field7',
+      label: '字段7',
+    },
+  ],
+  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
+  wrapperClass: 'grid-cols-1 md:grid-cols-3 lg:grid-cols-4',
+});
+
+const [SyncForm] = useVbenForm({
+  handleSubmit: onSubmit,
+  schema: [
+    {
+      component: 'Input',
+      // 字段名
+      fieldName: 'field1',
+      // 界面显示的label
+      label: '字段1',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+      dependencies: {
+        trigger(values, form) {
+          form.setFieldValue('field2', values.field1);
+        },
+        // 只有指定的字段改变时，才会触发
+        triggerFields: ['field1'],
+      },
+      // 字段名
+      fieldName: 'field2',
+      // 界面显示的label
+      label: '字段2',
+    },
+  ],
+  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
+  wrapperClass: 'grid-cols-1 md:grid-cols-3 lg:grid-cols-4',
+});
+
+function onSubmit(values: Record<string, any>) {
+  message.success({
+    content: `form values: ${JSON.stringify(values)}`,
+  });
+}
+
+function handleDelete() {
+  formApi.setState((prev) => {
+    return {
+      ...prev,
+      schema: prev.schema?.filter((item) => item.fieldName !== 'field7'),
+    };
+  });
+}
+
+function handleAdd() {
+  formApi.setState((prev) => {
+    return {
+      ...prev,
+      schema: [
+        ...(prev?.schema ?? []),
+        {
+          component: 'Input',
+          fieldName: `field${Date.now()}`,
+          label: '字段+',
+        },
+      ],
+    };
+  });
+}
+
+function handleUpdate() {
+  formApi.setState((prev) => {
+    return {
+      ...prev,
+      schema: prev.schema?.map((item) => {
+        if (item.fieldName === 'field3') {
+          return {
+            ...item,
+            label: '字段3-修改',
+          };
+        }
+        return item;
+      }),
+    };
+  });
+}
+</script>
+
+<template>
+  <Page
+    description="表单组件动态联动示例，包含了常用的场景。增删改，本质上是修改schema，你也可以通过 `setState` 动态修改schema。"
+    title="表单组件"
+  >
+    <Card title="表单动态联动示例">
+      <template #extra>
+        <Button class="mr-2" @click="handleUpdate">修改字段3</Button>
+        <Button class="mr-2" @click="handleDelete">删除字段7</Button>
+        <Button @click="handleAdd">添加字段</Button>
+      </template>
+      <Form />
+    </Card>
+
+    <Card class="mt-5" title="字段同步，字段1数据与字段2数据同步">
+      <SyncForm />
+    </Card>
+  </Page>
+</template>
diff --git a/playground/src/views/examples/form/query.vue b/playground/src/views/examples/form/query.vue
new file mode 100644
index 000000000..d65ea23bf
--- /dev/null
+++ b/playground/src/views/examples/form/query.vue
@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { Card, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // 提交函数
+  handleSubmit: onSubmit,
+  // 垂直布局，label和input在不同行，值为vertical
+  layout: 'horizontal',
+  // 使用 tailwindcss grid布局
+  // 水平布局，label和input在同一行
+  schema: [
+    {
+      // 组件需要在 #/adapter.ts内注册，并加上类型
+      component: 'Input',
+      // 对应组件的参数
+      componentProps: {
+        placeholder: '请输入用户名',
+      },
+      // 字段名
+      fieldName: 'username',
+      // 界面显示的label
+      label: '字符串',
+    },
+    {
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入密码',
+      },
+      fieldName: 'password',
+      label: '密码',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'number',
+      label: '数字(带后缀)',
+      suffix: () => '¥',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        filterOption: true,
+        options: [
+          {
+            label: '选项1',
+            value: '1',
+          },
+          {
+            label: '选项2',
+            value: '2',
+          },
+        ],
+        placeholder: '请选择',
+        showSearch: true,
+      },
+      fieldName: 'options',
+      label: '下拉选',
+    },
+    {
+      component: 'DatePicker',
+      fieldName: 'datePicker',
+      label: '日期选择框',
+    },
+  ],
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+});
+
+const [QueryForm1] = useVbenForm({
+  // 默认展开
+  collapsed: true,
+  collapsedRows: 2,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // 提交函数
+  handleSubmit: onSubmit,
+  // 垂直布局，label和input在不同行，值为vertical
+  layout: 'horizontal',
+  // 使用 tailwindcss grid布局
+  // 水平布局，label和input在同一行
+  schema: (() => {
+    const schema = [];
+    for (let index = 0; index < 14; index++) {
+      schema.push({
+        // 组件需要在 #/adapter.ts内注册，并加上类型
+        component: 'Input',
+        // 字段名
+        fieldName: `field${index}`,
+        // 界面显示的label
+        label: `字段${index}`,
+      });
+    }
+    return schema;
+  })(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+});
+
+function onSubmit(values: Record<string, any>) {
+  message.success({
+    content: `form values: ${JSON.stringify(values)}`,
+  });
+}
+</script>
+
+<template>
+  <Page
+    description="查询表单，常用语和表格组合使用，可进行收缩展开。"
+    title="表单组件"
+  >
+    <Card class="mb-5" title="查询表单，默认展开">
+      <QueryForm />
+    </Card>
+    <Card title="查询表单，默认折叠，折叠时保留2行">
+      <QueryForm1 />
+    </Card>
+  </Page>
+</template>
diff --git a/playground/src/views/examples/form/rules.vue b/playground/src/views/examples/form/rules.vue
new file mode 100644
index 000000000..81744037a
--- /dev/null
+++ b/playground/src/views/examples/form/rules.vue
@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { Button, Card, message } from 'ant-design-vue';
+
+import { useVbenForm, z } from '#/adapter';
+
+const [Form, formApi] = useVbenForm({
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // 使用 tailwindcss grid布局
+  // 提交函数
+  handleSubmit: onSubmit,
+  // 垂直布局，label和input在不同行，值为vertical
+  layout: 'horizontal',
+  // 水平布局，label和input在同一行
+  schema: [
+    {
+      // 组件需要在 #/adapter.ts内注册，并加上类型
+      component: 'Input',
+      // 对应组件的参数
+      componentProps: {
+        placeholder: '请输入',
+      },
+      // 字段名
+      fieldName: 'field1',
+      // 界面显示的label
+      label: '字段1',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      defaultValue: '默认值',
+      fieldName: 'field2',
+      label: '默认值(必填)',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'field3',
+      label: '默认值(非必填)',
+      rules: z.string().default('默认值').optional(),
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'field31',
+      label: '自定义信息',
+      rules: z.string().min(1, { message: '最少输入1个字符' }),
+    },
+    {
+      component: 'Input',
+      // 对应组件的参数
+      componentProps: {
+        placeholder: '请输入',
+      },
+      // 字段名
+      fieldName: 'field4',
+      // 界面显示的label
+      label: '邮箱',
+      rules: z.string().email('请输入正确的邮箱'),
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'number',
+      label: '数字',
+      // 预处理函数，将空字符串或null转换为undefined
+      rules: 'required',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        filterOption: true,
+        options: [
+          {
+            label: '选项1',
+            value: '1',
+          },
+          {
+            label: '选项2',
+            value: '2',
+          },
+        ],
+        placeholder: '请选择',
+        showSearch: true,
+      },
+      defaultValue: undefined,
+      fieldName: 'options',
+      label: '下拉选',
+      rules: 'required',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '选项1',
+            value: '1',
+          },
+          {
+            label: '选项2',
+            value: '2',
+          },
+        ],
+      },
+      fieldName: 'radioGroup',
+      label: '单选组',
+      rules: 'required',
+    },
+    {
+      component: 'CheckboxGroup',
+      componentProps: {
+        name: 'cname',
+        options: [
+          {
+            label: '选项1',
+            value: '1',
+          },
+          {
+            label: '选项2',
+            value: '2',
+          },
+        ],
+      },
+      fieldName: 'checkboxGroup',
+      label: '多选组',
+      rules: 'required',
+    },
+    {
+      component: 'Checkbox',
+      fieldName: 'checkbox',
+      label: '',
+      renderComponentContent: () => {
+        return {
+          default: () => ['我已阅读并同意'],
+        };
+      },
+      rules: 'required',
+    },
+    {
+      component: 'DatePicker',
+      defaultValue: undefined,
+      fieldName: 'datePicker',
+      label: '日期选择框',
+      rules: 'required',
+    },
+  ],
+  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+});
+
+function onSubmit(values: Record<string, any>) {
+  message.success({
+    content: `form values: ${JSON.stringify(values)}`,
+  });
+}
+</script>
+
+<template>
+  <Page description="表单校验示例" title="表单组件">
+    <Card title="基础组件校验示例">
+      <template #extra>
+        <Button @click="() => formApi.validate()">校验表单</Button>
+        <Button class="mx-2" @click="() => formApi.resetValidate()">
+          清空校验信息
+        </Button>
+      </template>
+      <Form />
+    </Card>
+  </Page>
+</template>
diff --git a/playground/src/views/examples/modal/form-model-demo.vue b/playground/src/views/examples/modal/form-model-demo.vue
new file mode 100644
index 000000000..a7da44fd1
--- /dev/null
+++ b/playground/src/views/examples/modal/form-model-demo.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter';
+
+defineOptions({
+  name: 'FormModelDemo',
+});
+
+const [Form, formApi] = useVbenForm({
+  schema: [
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'field1',
+      label: '字段1',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'field2',
+      label: '字段2',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    await formApi.submitForm();
+    modalApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const { values } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        formApi.setValues(values);
+      }
+    }
+  },
+  title: '内嵌表单示例',
+});
+</script>
+<template>
+  <Modal>
+    <Form />
+  </Modal>
+</template>
diff --git a/playground/src/views/examples/modal/index.vue b/playground/src/views/examples/modal/index.vue
index 14a939b40..9d250603c 100644
--- a/playground/src/views/examples/modal/index.vue
+++ b/playground/src/views/examples/modal/index.vue
@@ -8,6 +8,7 @@ import AutoHeightDemo from './auto-height-demo.vue';
 import BaseDemo from './base-demo.vue';
 import DragDemo from './drag-demo.vue';
 import DynamicDemo from './dynamic-demo.vue';
+import FormModalDemo from './form-model-demo.vue';
 import SharedDataDemo from './shared-data-demo.vue';
 
 const [BaseModal, baseModalApi] = useVbenModal({
@@ -31,6 +32,10 @@ const [SharedDataModal, sharedModalApi] = useVbenModal({
   connectedComponent: SharedDataDemo,
 });
 
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
 function openBaseModal() {
   baseModalApi.open();
 }
@@ -59,6 +64,14 @@ function handleUpdateTitle() {
   dynamicModalApi.setState({ title: '外部动态标题' });
   dynamicModalApi.open();
 }
+
+function openFormModal() {
+  formModalApi.setData({
+    // 表单值
+    values: { field1: 'abc' },
+  });
+  formModalApi.open();
+}
 </script>
 
 <template>
@@ -74,7 +87,7 @@ function handleUpdateTitle() {
     <DragModal />
     <DynamicModal />
     <SharedDataModal />
-
+    <FormModal />
     <Card class="mb-4" title="基本使用">
       <p class="mb-3">一个基础的弹窗示例</p>
       <Button type="primary" @click="openBaseModal">打开弹窗</Button>
@@ -104,5 +117,10 @@ function handleUpdateTitle() {
         打开弹窗并传递数据
       </Button>
     </Card>
+
+    <Card class="mb-4" title="表单弹窗示例">
+      <p class="mb-3">弹窗与表单结合</p>
+      <Button type="primary" @click="openFormModal"> 打开弹窗 </Button>
+    </Card>
   </Page>
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2293ba3e7..db53e7131 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -780,6 +780,36 @@ importers:
         specifier: 3.5.3
         version: 3.5.3(typescript@5.5.4)
 
+  packages/@core/ui-kit/form-ui:
+    dependencies:
+      '@vben-core/composables':
+        specifier: workspace:*
+        version: link:../../composables
+      '@vben-core/shadcn-ui':
+        specifier: workspace:*
+        version: link:../shadcn-ui
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../../base/shared
+      '@vee-validate/zod':
+        specifier: ^4.13.2
+        version: 4.13.2(vue@3.5.3(typescript@5.5.4))
+      '@vueuse/core':
+        specifier: ^11.0.3
+        version: 11.0.3(vue@3.5.3(typescript@5.5.4))
+      vee-validate:
+        specifier: ^4.13.2
+        version: 4.13.2(vue@3.5.3(typescript@5.5.4))
+      vue:
+        specifier: 3.5.3
+        version: 3.5.3(typescript@5.5.4)
+      zod:
+        specifier: ^3.23.8
+        version: 3.23.8
+      zod-defaults:
+        specifier: ^0.1.3
+        version: 0.1.3(zod@3.23.8)
+
   packages/@core/ui-kit/layout-ui:
     dependencies:
       '@vben-core/composables':
@@ -872,6 +902,9 @@ importers:
       radix-vue:
         specifier: ^1.9.5
         version: 1.9.5(vue@3.5.3(typescript@5.5.4))
+      vee-validate:
+        specifier: ^4.13.2
+        version: 4.13.2(vue@3.5.3(typescript@5.5.4))
       vue:
         specifier: 3.5.3
         version: 3.5.3(typescript@5.5.4)
@@ -923,6 +956,9 @@ importers:
 
   packages/effects/common-ui:
     dependencies:
+      '@vben-core/form-ui':
+        specifier: workspace:*
+        version: link:../../@core/ui-kit/form-ui
       '@vben-core/popup-ui':
         specifier: workspace:*
         version: link:../../@core/ui-kit/popup-ui
@@ -932,9 +968,6 @@ importers:
       '@vben/constants':
         specifier: workspace:*
         version: link:../../constants
-      '@vben/hooks':
-        specifier: workspace:*
-        version: link:../hooks
       '@vben/icons':
         specifier: workspace:*
         version: link:../../icons
@@ -990,6 +1023,9 @@ importers:
 
   packages/effects/layouts:
     dependencies:
+      '@vben-core/form-ui':
+        specifier: workspace:*
+        version: link:../../@core/ui-kit/form-ui
       '@vben-core/layout-ui':
         specifier: workspace:*
         version: link:../../@core/ui-kit/layout-ui
@@ -4243,6 +4279,9 @@ packages:
     resolution: {integrity: sha512-zTQD6WLNTre1hj5wp09nBIDiOc2U5r/qmzo7wxPn4ZgAjHql09EofqhF9WF+fZHzL5aCyaIpPcT2hyxl73kr9A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@vee-validate/zod@4.13.2':
+    resolution: {integrity: sha512-y1aqelutD6btX2ayZk3w8udClAykptphlGLwu0vlCqY2r9mrJqMn1EKqtcwXAvEom+ceTcHJOwGr2FUA7i+ZEg==}
+
   '@vercel/nft@0.26.5':
     resolution: {integrity: sha512-NHxohEqad6Ra/r4lGknO52uc/GrWILXAMs1BB4401GTqww0fw1bAqzpG1XHuDO+dprg4GvsD9ZLLSsdo78p9hQ==}
     engines: {node: '>=16'}
@@ -9515,6 +9554,11 @@ packages:
     peerDependencies:
       vue: 3.5.3
 
+  vee-validate@4.13.2:
+    resolution: {integrity: sha512-HlpR/6MJ92TW9f135umMZKUqdd/tFQTxLNSf2ImbU4Y/MlLVAUpF1l64VdjTOhbClAqPjCb5p/SqHDxLpUHXrw==}
+    peerDependencies:
+      vue: 3.5.3
+
   vite-hot-client@0.2.3:
     resolution: {integrity: sha512-rOGAV7rUlUHX89fP2p2v0A2WWvV3QMX2UYq0fRqsWSvFvev4atHWqjwGoKaZT1VTKyLGk533ecu3eyd0o59CAg==}
     peerDependencies:
@@ -9989,6 +10033,14 @@ packages:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
 
+  zod-defaults@0.1.3:
+    resolution: {integrity: sha512-Cp4UjuVfXqwaOx8A5LlM0IRBZs8B7AXgF+XOZWF8CjMDhsY/Jki+y7VS4adVtQj9NNSsAPwylUlJp9INuxPEnA==}
+    peerDependencies:
+      zod: ^3.23.8
+
+  zod@3.23.8:
+    resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
+
   zrender@5.6.0:
     resolution: {integrity: sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==}
 
@@ -13217,6 +13269,14 @@ snapshots:
       '@typescript-eslint/types': 8.4.0
       eslint-visitor-keys: 3.4.3
 
+  '@vee-validate/zod@4.13.2(vue@3.5.3(typescript@5.5.4))':
+    dependencies:
+      type-fest: 4.25.0
+      vee-validate: 4.13.2(vue@3.5.3(typescript@5.5.4))
+      zod: 3.23.8
+    transitivePeerDependencies:
+      - vue
+
   '@vercel/nft@0.26.5(encoding@0.1.13)':
     dependencies:
       '@mapbox/node-pre-gyp': 1.0.11(encoding@0.1.13)
@@ -19150,6 +19210,12 @@ snapshots:
       evtd: 0.2.4
       vue: 3.5.3(typescript@5.5.4)
 
+  vee-validate@4.13.2(vue@3.5.3(typescript@5.5.4)):
+    dependencies:
+      '@vue/devtools-api': 6.6.3
+      type-fest: 4.25.0
+      vue: 3.5.3(typescript@5.5.4)
+
   vite-hot-client@0.2.3(vite@5.4.3(@types/node@22.5.4)(less@4.2.0)(sass@1.78.0)(terser@5.31.6)):
     dependencies:
       vite: 5.4.3(@types/node@22.5.4)(less@4.2.0)(sass@1.78.0)(terser@5.31.6)
@@ -19778,6 +19844,12 @@ snapshots:
       compress-commons: 6.0.2
       readable-stream: 4.5.2
 
+  zod-defaults@0.1.3(zod@3.23.8):
+    dependencies:
+      zod: 3.23.8
+
+  zod@3.23.8: {}
+
   zrender@5.6.0:
     dependencies:
       tslib: 2.3.0
diff --git a/vben-admin.code-workspace b/vben-admin.code-workspace
index 27818aef7..aa8205bda 100644
--- a/vben-admin.code-workspace
+++ b/vben-admin.code-workspace
@@ -76,6 +76,10 @@
       "name": "@vben-core/preferences",
       "path": "packages/@core/preferences",
     },
+    {
+      "name": "@vben-core/form-ui",
+      "path": "packages/@core/ui-kit/form-ui",
+    },
     {
       "name": "@vben-core/layout-ui",
       "path": "packages/@core/ui-kit/layout-ui",