diff --git a/apps/web-naive/src/bootstrap.ts b/apps/web-naive/src/bootstrap.ts
index fc7f961d6..40416d826 100644
--- a/apps/web-naive/src/bootstrap.ts
+++ b/apps/web-naive/src/bootstrap.ts
@@ -4,6 +4,7 @@ import { registerAccessDirective } from '@vben/access';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
+import '@vben/styles/naive';
 
 import { useTitle } from '@vueuse/core';
 
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 5bfae7e59..518aea367 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -21,6 +21,9 @@
     "./ele": {
       "default": "./src/ele/index.css"
     },
+    "./naive": {
+      "default": "./src/naive/index.css"
+    },
     "./global": {
       "default": "./src/global/index.scss"
     }
diff --git a/packages/styles/src/naive/index.css b/packages/styles/src/naive/index.css
new file mode 100644
index 000000000..a7751165b
--- /dev/null
+++ b/packages/styles/src/naive/index.css
@@ -0,0 +1,20 @@
+.form-valid-error {
+  .n-base-selection__state-border,
+  .n-input__state-border,
+  .n-radio-group__splitor {
+    border: var(--n-border-error);
+  }
+
+  .n-radio-group .n-radio-button,
+  .n-radio-group .n-radio-group__splitor {
+    --n-button-border-color: rgb(255 56 96);
+  }
+
+  .n-radio__dot {
+    --n-box-shadow: inset 0 0 0 1px rgb(255 56 96);
+  }
+
+  .n-checkbox-box__border {
+    --n-border: 1px solid rgb(255 56 96);
+  }
+}