diff --git a/.gitignore b/.gitignore
index b208e40..e84fb2e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,4 +29,5 @@ pnpm-debug.log*
 .eslintcache
 .stylelintcache
 yarn.lock
-
+pnpm-lock.yaml
+pnpm-workspace.yaml
diff --git a/packages/lang/fr-FR.ts b/packages/lang/fr-FR.ts
new file mode 100644
index 0000000..aedbc07
--- /dev/null
+++ b/packages/lang/fr-FR.ts
@@ -0,0 +1,8 @@
+export default {
+  start: "Début",
+  end: "Fin",
+  pure: "Pur",
+  gradient: "Dégradé",
+  linear: "Linéaire",
+  radial: "Radial",
+};
diff --git a/packages/lang/index.ts b/packages/lang/index.ts
index 3084d90..01eec64 100644
--- a/packages/lang/index.ts
+++ b/packages/lang/index.ts
@@ -1,9 +1,11 @@
 import enUS from "./en-US";
 import zhCn from "./zh-CN";
+import frFR from "./fr-FR";
 
-export type Lang = "ZH-cn" | "En";
+export type Lang = "ZH-cn" | "En" | "Fr";
 
 export const Local: { [K in Lang]: { [key: string]: string } } = {
   En: enUS,
+  Fr: frFR,
   "ZH-cn": zhCn,
 };
diff --git a/packages/utils/type.ts b/packages/utils/type.ts
index 20a794a..c586d18 100644
--- a/packages/utils/type.ts
+++ b/packages/utils/type.ts
@@ -1,6 +1,6 @@
 import { ComputedRef } from "vue";
 
-export type SupportLang = "ZH-cn" | "En";
+export type SupportLang = "ZH-cn" | "En" | "Fr";
 
 export interface ColorPickerProvider {
   lang: ComputedRef<{ [key: string]: string }>;
diff --git a/src/stories/ColorPicker.stories.ts b/src/stories/ColorPicker.stories.ts
index 0da6534..6437f38 100644
--- a/src/stories/ColorPicker.stories.ts
+++ b/src/stories/ColorPicker.stories.ts
@@ -115,9 +115,9 @@ export default {
     },
     lang: {
       type: "string",
-      description: "ZH-cn | En",
+      description: "ZH-cn | En | Fr",
       control: { type: "select" },
-      options: ["ZH-cn", "En"],
+      options: ["ZH-cn", "En", "Fr"],
       table: {
         defaultValue: {
           summary: "ZH-cn",