diff --git a/component-docs/public/mdx/component/chip-tabs.mdx b/component-docs/public/mdx/component/chip-tabs.mdx
index 8b4ef180a..0585c6b6e 100644
--- a/component-docs/public/mdx/component/chip-tabs.mdx
+++ b/component-docs/public/mdx/component/chip-tabs.mdx
@@ -11,8 +11,8 @@ import {
   useLazyContents,
   type UseLazyContentsProps,
 } from "@seed-design/react-tabs";
-import { chipTabs } from "@seed-design/recipe/chipTabs";
-import { chipTab } from "@seed-design/recipe/chipTab";
+import { chipTabs, ChipTabsVariant } from "@seed-design/recipe/chipTabs";
+import { chipTab, ChipTabVariant } from "@seed-design/recipe/chipTab";
 
 import "@seed-design/stylesheet/chipTab.css";
 import "@seed-design/stylesheet/chipTabs.css";
@@ -23,6 +23,7 @@ interface ChipTabsContextValue {
   api: ReturnType<typeof useTabs>;
   classNames: ReturnType<typeof chipTabs>;
   shouldRender: (value: string) => boolean;
+  variant: ChipTabsVariant["variant"];
 }
 
 const ChipTabsContext = React.createContext<ChipTabsContextValue | null>(null);
@@ -37,12 +38,15 @@ const useChipTabsContext = () => {
 
 export interface ChipTabsProps
   extends Assign<React.HTMLAttributes<HTMLDivElement>, Omit<UseTabsProps, "layout">>,
+    ChipTabsVariant,
     Omit<UseLazyContentsProps, "currentValue"> {}
 
 export const ChipTabs = React.forwardRef<HTMLDivElement, ChipTabsProps>((props, ref) => {
-  const { className, lazyMode, isLazy } = props;
+  const { className, lazyMode, isLazy, variant } = props;
   const api = useTabs(props);
-  const classNames = chipTabs();
+  const classNames = chipTabs({
+    variant,
+  });
   const { rootProps, value, restProps } = api;
   const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy });
 
@@ -53,6 +57,7 @@ export const ChipTabs = React.forwardRef<HTMLDivElement, ChipTabsProps>((props,
           api,
           classNames,
           shouldRender,
+          variant,
         }}
       >
         {props.children}
@@ -102,9 +107,11 @@ export interface ChipTabTriggerProps
 
 export const ChipTabTrigger = React.forwardRef<HTMLButtonElement, ChipTabTriggerProps>(
   ({ className, children, value, ...otherProps }, ref) => {
-    const { api } = useChipTabsContext();
+    const { api, variant } = useChipTabsContext();
     const { getTabTriggerProps } = api;
-    const { label, root } = chipTab();
+    const { label, root } = chipTab({
+      variant,
+    });
     const { rootProps, labelProps } = getTabTriggerProps({ value });
 
     return (
diff --git a/component-docs/public/mdx/react/chip-tabs-preview.mdx b/component-docs/public/mdx/react/chip-tabs-preview.mdx
index c4916c298..2483cd4e6 100644
--- a/component-docs/public/mdx/react/chip-tabs-preview.mdx
+++ b/component-docs/public/mdx/react/chip-tabs-preview.mdx
@@ -6,7 +6,12 @@ export default function ChipTabsPreview() {
   const [value, setValue] = React.useState("1");
   return (
     <>
-      <ChipTabs defaultValue="1" value={value} onValueChange={(value) => setValue(value)}>
+      <ChipTabs
+        variant="neutralSolid"
+        defaultValue="1"
+        value={value}
+        onValueChange={(value) => setValue(value)}
+      >
         <ChipTabTriggerList>
           <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
           <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
diff --git a/component-docs/public/mdx/react/chip-tabs-variant-brand-weak.mdx b/component-docs/public/mdx/react/chip-tabs-variant-brand-weak.mdx
new file mode 100644
index 000000000..6b9ef7674
--- /dev/null
+++ b/component-docs/public/mdx/react/chip-tabs-variant-brand-weak.mdx
@@ -0,0 +1,28 @@
+```tsx copy
+import * as React from "react";
+import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "seed-design/ui/chip-tabs";
+
+export default function ChipTabsVariantBrandWeak() {
+  const [value, setValue] = React.useState("1");
+  return (
+    <>
+      <ChipTabs
+        variant="brandWeak"
+        defaultValue="1"
+        value={value}
+        onValueChange={(value) => setValue(value)}
+      >
+        <ChipTabTriggerList>
+          <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
+          <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
+          <ChipTabTrigger value="3">라벨3</ChipTabTrigger>
+        </ChipTabTriggerList>
+      </ChipTabs>
+      {value === "1" && <div>content 1</div>}
+      {value === "2" && <div>content 2</div>}
+      {value === "3" && <div>content 3</div>}
+    </>
+  );
+}
+
+```
diff --git a/component-docs/public/mdx/react/chip-tabs-variant-neutral-solid.mdx b/component-docs/public/mdx/react/chip-tabs-variant-neutral-solid.mdx
new file mode 100644
index 000000000..5a0c8a3fb
--- /dev/null
+++ b/component-docs/public/mdx/react/chip-tabs-variant-neutral-solid.mdx
@@ -0,0 +1,28 @@
+```tsx copy
+import * as React from "react";
+import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "seed-design/ui/chip-tabs";
+
+export default function ChipTabsVariantNeutralSolid() {
+  const [value, setValue] = React.useState("1");
+  return (
+    <>
+      <ChipTabs
+        variant="neutralSolid"
+        defaultValue="1"
+        value={value}
+        onValueChange={(value) => setValue(value)}
+      >
+        <ChipTabTriggerList>
+          <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
+          <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
+          <ChipTabTrigger value="3">라벨3</ChipTabTrigger>
+        </ChipTabTriggerList>
+      </ChipTabs>
+      {value === "1" && <div>content 1</div>}
+      {value === "2" && <div>content 2</div>}
+      {value === "3" && <div>content 3</div>}
+    </>
+  );
+}
+
+```
diff --git a/component-docs/public/mdx/stackflow/chip-tabs-basic-activity.mdx b/component-docs/public/mdx/stackflow/chip-tabs-basic-activity.mdx
index 7a94ec361..d4190500c 100644
--- a/component-docs/public/mdx/stackflow/chip-tabs-basic-activity.mdx
+++ b/component-docs/public/mdx/stackflow/chip-tabs-basic-activity.mdx
@@ -27,7 +27,12 @@ const ChipTabsBasicActivity: ActivityComponentType<"ChipTabsBasic"> = () => {
 
   return (
     <AppScreen>
-      <ChipTabs defaultValue="1" value={value} onValueChange={(value) => setValue(value)}>
+      <ChipTabs
+        variant="neutralSolid"
+        defaultValue="1"
+        value={value}
+        onValueChange={(value) => setValue(value)}
+      >
         <ChipTabTriggerList>
           <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
           <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
diff --git a/component-docs/public/registry/component/chip-tabs.json b/component-docs/public/registry/component/chip-tabs.json
index cb0578707..c773165fa 100644
--- a/component-docs/public/registry/component/chip-tabs.json
+++ b/component-docs/public/registry/component/chip-tabs.json
@@ -6,7 +6,7 @@
   "registries": [
     {
       "name": "chip-tabs.tsx",
-      "content": "\"use client\";\n\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport {\n  useTabs,\n  type UseTabsProps,\n  type TriggerProps,\n  type ContentProps,\n  useLazyContents,\n  type UseLazyContentsProps,\n} from \"@seed-design/react-tabs\";\nimport { chipTabs } from \"@seed-design/recipe/chipTabs\";\nimport { chipTab } from \"@seed-design/recipe/chipTab\";\n\nimport \"@seed-design/stylesheet/chipTab.css\";\nimport \"@seed-design/stylesheet/chipTabs.css\";\n\ntype Assign<T, U> = Omit<T, keyof U> & U;\n\ninterface ChipTabsContextValue {\n  api: ReturnType<typeof useTabs>;\n  classNames: ReturnType<typeof chipTabs>;\n  shouldRender: (value: string) => boolean;\n}\n\nconst ChipTabsContext = React.createContext<ChipTabsContextValue | null>(null);\n\nconst useChipTabsContext = () => {\n  const context = React.useContext(ChipTabsContext);\n  if (!context) {\n    throw new Error(\"Tabs cannot be rendered outside the Tabs\");\n  }\n  return context;\n};\n\nexport interface ChipTabsProps\n  extends Assign<React.HTMLAttributes<HTMLDivElement>, Omit<UseTabsProps, \"layout\">>,\n    Omit<UseLazyContentsProps, \"currentValue\"> {}\n\nexport const ChipTabs = React.forwardRef<HTMLDivElement, ChipTabsProps>((props, ref) => {\n  const { className, lazyMode, isLazy } = props;\n  const api = useTabs(props);\n  const classNames = chipTabs();\n  const { rootProps, value, restProps } = api;\n  const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy });\n\n  return (\n    <div ref={ref} {...rootProps} {...restProps} className={clsx(classNames.root, className)}>\n      <ChipTabsContext.Provider\n        value={{\n          api,\n          classNames,\n          shouldRender,\n        }}\n      >\n        {props.children}\n      </ChipTabsContext.Provider>\n    </div>\n  );\n});\nChipTabs.displayName = \"ChipTabs\";\n\nexport const ChipTabTriggerList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...otherProps }, ref) => {\n  const { api, classNames } = useChipTabsContext();\n  const { tabTriggerListProps, triggerSize } = api;\n  const { left } = triggerSize;\n  const { triggerList } = classNames;\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      containerRef.current?.scrollTo({\n        // NOTE: 27px is half of tab's min-width\n        left: left - 27,\n        behavior: \"smooth\",\n      });\n    }\n  }, [left]);\n\n  return (\n    <div\n      ref={containerRef}\n      {...tabTriggerListProps}\n      className={clsx(triggerList, className)}\n      {...otherProps}\n    >\n      {children}\n    </div>\n  );\n});\nChipTabTriggerList.displayName = \"ChipTabTriggerList\";\n\nexport interface ChipTabTriggerProps\n  extends Assign<React.HTMLAttributes<HTMLButtonElement>, Omit<TriggerProps, \"isDisabled\">> {}\n\nexport const ChipTabTrigger = React.forwardRef<HTMLButtonElement, ChipTabTriggerProps>(\n  ({ className, children, value, ...otherProps }, ref) => {\n    const { api } = useChipTabsContext();\n    const { getTabTriggerProps } = api;\n    const { label, root } = chipTab();\n    const { rootProps, labelProps } = getTabTriggerProps({ value });\n\n    return (\n      <button ref={ref} {...rootProps} className={clsx(root, className)} {...otherProps}>\n        <span className={label} {...labelProps}>\n          {children}\n        </span>\n      </button>\n    );\n  },\n);\nChipTabTrigger.displayName = \"ChipTabTrigger\";\n\nexport const ChipTabContent = React.forwardRef<\n  HTMLDivElement,\n  Assign<React.HTMLAttributes<HTMLDivElement>, ContentProps>\n>(({ className, children, value, ...otherProps }, ref) => {\n  const { api, classNames, shouldRender } = useChipTabsContext();\n  const { getTabContentProps } = api;\n  const { content } = classNames;\n  const tabContentProps = getTabContentProps({ value });\n  const isRender = shouldRender(value);\n\n  return (\n    <div ref={ref} {...tabContentProps} className={clsx(content, className)} {...otherProps}>\n      {isRender && children}\n    </div>\n  );\n});\nChipTabContent.displayName = \"ChipTabContent\";\n"
+      "content": "\"use client\";\n\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport {\n  useTabs,\n  type UseTabsProps,\n  type TriggerProps,\n  type ContentProps,\n  useLazyContents,\n  type UseLazyContentsProps,\n} from \"@seed-design/react-tabs\";\nimport { chipTabs, ChipTabsVariant } from \"@seed-design/recipe/chipTabs\";\nimport { chipTab, ChipTabVariant } from \"@seed-design/recipe/chipTab\";\n\nimport \"@seed-design/stylesheet/chipTab.css\";\nimport \"@seed-design/stylesheet/chipTabs.css\";\n\ntype Assign<T, U> = Omit<T, keyof U> & U;\n\ninterface ChipTabsContextValue {\n  api: ReturnType<typeof useTabs>;\n  classNames: ReturnType<typeof chipTabs>;\n  shouldRender: (value: string) => boolean;\n  variant: ChipTabsVariant[\"variant\"];\n}\n\nconst ChipTabsContext = React.createContext<ChipTabsContextValue | null>(null);\n\nconst useChipTabsContext = () => {\n  const context = React.useContext(ChipTabsContext);\n  if (!context) {\n    throw new Error(\"Tabs cannot be rendered outside the Tabs\");\n  }\n  return context;\n};\n\nexport interface ChipTabsProps\n  extends Assign<React.HTMLAttributes<HTMLDivElement>, Omit<UseTabsProps, \"layout\">>,\n    ChipTabsVariant,\n    Omit<UseLazyContentsProps, \"currentValue\"> {}\n\nexport const ChipTabs = React.forwardRef<HTMLDivElement, ChipTabsProps>((props, ref) => {\n  const { className, lazyMode, isLazy, variant } = props;\n  const api = useTabs(props);\n  const classNames = chipTabs({\n    variant,\n  });\n  const { rootProps, value, restProps } = api;\n  const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy });\n\n  return (\n    <div ref={ref} {...rootProps} {...restProps} className={clsx(classNames.root, className)}>\n      <ChipTabsContext.Provider\n        value={{\n          api,\n          classNames,\n          shouldRender,\n          variant,\n        }}\n      >\n        {props.children}\n      </ChipTabsContext.Provider>\n    </div>\n  );\n});\nChipTabs.displayName = \"ChipTabs\";\n\nexport const ChipTabTriggerList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...otherProps }, ref) => {\n  const { api, classNames } = useChipTabsContext();\n  const { tabTriggerListProps, triggerSize } = api;\n  const { left } = triggerSize;\n  const { triggerList } = classNames;\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      containerRef.current?.scrollTo({\n        // NOTE: 27px is half of tab's min-width\n        left: left - 27,\n        behavior: \"smooth\",\n      });\n    }\n  }, [left]);\n\n  return (\n    <div\n      ref={containerRef}\n      {...tabTriggerListProps}\n      className={clsx(triggerList, className)}\n      {...otherProps}\n    >\n      {children}\n    </div>\n  );\n});\nChipTabTriggerList.displayName = \"ChipTabTriggerList\";\n\nexport interface ChipTabTriggerProps\n  extends Assign<React.HTMLAttributes<HTMLButtonElement>, Omit<TriggerProps, \"isDisabled\">> {}\n\nexport const ChipTabTrigger = React.forwardRef<HTMLButtonElement, ChipTabTriggerProps>(\n  ({ className, children, value, ...otherProps }, ref) => {\n    const { api, variant } = useChipTabsContext();\n    const { getTabTriggerProps } = api;\n    const { label, root } = chipTab({\n      variant,\n    });\n    const { rootProps, labelProps } = getTabTriggerProps({ value });\n\n    return (\n      <button ref={ref} {...rootProps} className={clsx(root, className)} {...otherProps}>\n        <span className={label} {...labelProps}>\n          {children}\n        </span>\n      </button>\n    );\n  },\n);\nChipTabTrigger.displayName = \"ChipTabTrigger\";\n\nexport const ChipTabContent = React.forwardRef<\n  HTMLDivElement,\n  Assign<React.HTMLAttributes<HTMLDivElement>, ContentProps>\n>(({ className, children, value, ...otherProps }, ref) => {\n  const { api, classNames, shouldRender } = useChipTabsContext();\n  const { getTabContentProps } = api;\n  const { content } = classNames;\n  const tabContentProps = getTabContentProps({ value });\n  const isRender = shouldRender(value);\n\n  return (\n    <div ref={ref} {...tabContentProps} className={clsx(content, className)} {...otherProps}>\n      {isRender && children}\n    </div>\n  );\n});\nChipTabContent.displayName = \"ChipTabContent\";\n"
     }
   ],
   "type": "component"
diff --git a/component-docs/seed-design/ui/chip-tabs.tsx b/component-docs/seed-design/ui/chip-tabs.tsx
index 1c1ad65bf..3441fb2d5 100644
--- a/component-docs/seed-design/ui/chip-tabs.tsx
+++ b/component-docs/seed-design/ui/chip-tabs.tsx
@@ -3,13 +3,13 @@
 import {
   useLazyContents,
   useTabs,
+  type ContentProps,
   type TriggerProps,
   type UseLazyContentsProps,
   type UseTabsProps,
-  type ContentProps,
 } from "@seed-design/react-tabs";
 import { chipTab } from "@seed-design/recipe/chipTab";
-import { chipTabs } from "@seed-design/recipe/chipTabs";
+import { ChipTabsVariant, chipTabs } from "@seed-design/recipe/chipTabs";
 import clsx from "clsx";
 import * as React from "react";
 
@@ -22,6 +22,7 @@ interface ChipTabsContextValue {
   api: ReturnType<typeof useTabs>;
   classNames: ReturnType<typeof chipTabs>;
   shouldRender: (value: string) => boolean;
+  variant: ChipTabsVariant["variant"];
 }
 
 const ChipTabsContext = React.createContext<ChipTabsContextValue | null>(null);
@@ -36,12 +37,15 @@ const useChipTabsContext = () => {
 
 export interface ChipTabsProps
   extends Assign<React.HTMLAttributes<HTMLDivElement>, Omit<UseTabsProps, "layout">>,
+    ChipTabsVariant,
     Omit<UseLazyContentsProps, "currentValue"> {}
 
 export const ChipTabs = React.forwardRef<HTMLDivElement, ChipTabsProps>((props, ref) => {
-  const { className, lazyMode, isLazy } = props;
+  const { className, lazyMode, isLazy, variant } = props;
   const api = useTabs(props);
-  const classNames = chipTabs();
+  const classNames = chipTabs({
+    variant,
+  });
   const { rootProps, value, restProps } = api;
   const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy });
 
@@ -52,6 +56,7 @@ export const ChipTabs = React.forwardRef<HTMLDivElement, ChipTabsProps>((props,
           api,
           classNames,
           shouldRender,
+          variant,
         }}
       >
         {props.children}
@@ -97,14 +102,16 @@ export const ChipTabTriggerList = React.forwardRef<
 ChipTabTriggerList.displayName = "ChipTabTriggerList";
 
 export interface ChipTabTriggerProps
-  extends Assign<React.HTMLAttributes<HTMLButtonElement>, TriggerProps> {}
+  extends Assign<React.HTMLAttributes<HTMLButtonElement>, Omit<TriggerProps, "isDisabled">> {}
 
 export const ChipTabTrigger = React.forwardRef<HTMLButtonElement, ChipTabTriggerProps>(
-  ({ className, children, value, isDisabled, ...otherProps }, ref) => {
-    const { api } = useChipTabsContext();
+  ({ className, children, value, ...otherProps }, ref) => {
+    const { api, variant } = useChipTabsContext();
     const { getTabTriggerProps } = api;
-    const { label, root } = chipTab();
-    const { rootProps, labelProps } = getTabTriggerProps({ value, isDisabled });
+    const { label, root } = chipTab({
+      variant,
+    });
+    const { rootProps, labelProps } = getTabTriggerProps({ value });
 
     return (
       <button ref={ref} {...rootProps} className={clsx(root, className)} {...otherProps}>
@@ -124,10 +131,7 @@ export const ChipTabContent = React.forwardRef<
   const { api, classNames, shouldRender } = useChipTabsContext();
   const { getTabContentProps } = api;
   const { content } = classNames;
-  const tabContentProps = getTabContentProps({
-    value,
-    visibilityMode: "hidden",
-  });
+  const tabContentProps = getTabContentProps({ value });
   const isRender = shouldRender(value);
 
   return (
diff --git a/component-docs/snippets/component/chip-tabs.tsx b/component-docs/snippets/component/chip-tabs.tsx
index fca21778d..6b62ddb2b 100644
--- a/component-docs/snippets/component/chip-tabs.tsx
+++ b/component-docs/snippets/component/chip-tabs.tsx
@@ -10,8 +10,8 @@ import {
   useLazyContents,
   type UseLazyContentsProps,
 } from "@seed-design/react-tabs";
-import { chipTabs } from "@seed-design/recipe/chipTabs";
-import { chipTab } from "@seed-design/recipe/chipTab";
+import { chipTabs, ChipTabsVariant } from "@seed-design/recipe/chipTabs";
+import { chipTab, ChipTabVariant } from "@seed-design/recipe/chipTab";
 
 import "@seed-design/stylesheet/chipTab.css";
 import "@seed-design/stylesheet/chipTabs.css";
@@ -22,6 +22,7 @@ interface ChipTabsContextValue {
   api: ReturnType<typeof useTabs>;
   classNames: ReturnType<typeof chipTabs>;
   shouldRender: (value: string) => boolean;
+  variant: ChipTabsVariant["variant"];
 }
 
 const ChipTabsContext = React.createContext<ChipTabsContextValue | null>(null);
@@ -36,12 +37,15 @@ const useChipTabsContext = () => {
 
 export interface ChipTabsProps
   extends Assign<React.HTMLAttributes<HTMLDivElement>, Omit<UseTabsProps, "layout">>,
+    ChipTabsVariant,
     Omit<UseLazyContentsProps, "currentValue"> {}
 
 export const ChipTabs = React.forwardRef<HTMLDivElement, ChipTabsProps>((props, ref) => {
-  const { className, lazyMode, isLazy } = props;
+  const { className, lazyMode, isLazy, variant } = props;
   const api = useTabs(props);
-  const classNames = chipTabs();
+  const classNames = chipTabs({
+    variant,
+  });
   const { rootProps, value, restProps } = api;
   const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy });
 
@@ -52,6 +56,7 @@ export const ChipTabs = React.forwardRef<HTMLDivElement, ChipTabsProps>((props,
           api,
           classNames,
           shouldRender,
+          variant,
         }}
       >
         {props.children}
@@ -101,9 +106,11 @@ export interface ChipTabTriggerProps
 
 export const ChipTabTrigger = React.forwardRef<HTMLButtonElement, ChipTabTriggerProps>(
   ({ className, children, value, ...otherProps }, ref) => {
-    const { api } = useChipTabsContext();
+    const { api, variant } = useChipTabsContext();
     const { getTabTriggerProps } = api;
-    const { label, root } = chipTab();
+    const { label, root } = chipTab({
+      variant,
+    });
     const { rootProps, labelProps } = getTabTriggerProps({ value });
 
     return (
diff --git a/component-docs/snippets/example/react/chip-tabs-preview.tsx b/component-docs/snippets/example/react/chip-tabs-preview.tsx
index 7fbc68393..481de3290 100644
--- a/component-docs/snippets/example/react/chip-tabs-preview.tsx
+++ b/component-docs/snippets/example/react/chip-tabs-preview.tsx
@@ -5,7 +5,12 @@ export default function ChipTabsPreview() {
   const [value, setValue] = React.useState("1");
   return (
     <>
-      <ChipTabs defaultValue="1" value={value} onValueChange={(value) => setValue(value)}>
+      <ChipTabs
+        variant="neutralSolid"
+        defaultValue="1"
+        value={value}
+        onValueChange={(value) => setValue(value)}
+      >
         <ChipTabTriggerList>
           <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
           <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
diff --git a/component-docs/snippets/example/react/chip-tabs-variant-brand-weak.tsx b/component-docs/snippets/example/react/chip-tabs-variant-brand-weak.tsx
new file mode 100644
index 000000000..3db22f824
--- /dev/null
+++ b/component-docs/snippets/example/react/chip-tabs-variant-brand-weak.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "seed-design/ui/chip-tabs";
+
+export default function ChipTabsVariantBrandWeak() {
+  const [value, setValue] = React.useState("1");
+  return (
+    <>
+      <ChipTabs
+        variant="brandWeak"
+        defaultValue="1"
+        value={value}
+        onValueChange={(value) => setValue(value)}
+      >
+        <ChipTabTriggerList>
+          <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
+          <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
+          <ChipTabTrigger value="3">라벨3</ChipTabTrigger>
+        </ChipTabTriggerList>
+      </ChipTabs>
+      {value === "1" && <div>content 1</div>}
+      {value === "2" && <div>content 2</div>}
+      {value === "3" && <div>content 3</div>}
+    </>
+  );
+}
diff --git a/component-docs/snippets/example/react/chip-tabs-variant-neutral-solid.tsx b/component-docs/snippets/example/react/chip-tabs-variant-neutral-solid.tsx
new file mode 100644
index 000000000..e698b322c
--- /dev/null
+++ b/component-docs/snippets/example/react/chip-tabs-variant-neutral-solid.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "seed-design/ui/chip-tabs";
+
+export default function ChipTabsVariantNeutralSolid() {
+  const [value, setValue] = React.useState("1");
+  return (
+    <>
+      <ChipTabs
+        variant="neutralSolid"
+        defaultValue="1"
+        value={value}
+        onValueChange={(value) => setValue(value)}
+      >
+        <ChipTabTriggerList>
+          <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
+          <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
+          <ChipTabTrigger value="3">라벨3</ChipTabTrigger>
+        </ChipTabTriggerList>
+      </ChipTabs>
+      {value === "1" && <div>content 1</div>}
+      {value === "2" && <div>content 2</div>}
+      {value === "3" && <div>content 3</div>}
+    </>
+  );
+}
diff --git a/component-docs/snippets/example/stackflow/chip-tabs-basic-activity.tsx b/component-docs/snippets/example/stackflow/chip-tabs-basic-activity.tsx
index 241b4b6ae..23dac0f3f 100644
--- a/component-docs/snippets/example/stackflow/chip-tabs-basic-activity.tsx
+++ b/component-docs/snippets/example/stackflow/chip-tabs-basic-activity.tsx
@@ -26,7 +26,12 @@ const ChipTabsBasicActivity: ActivityComponentType<"ChipTabsBasic"> = () => {
 
   return (
     <AppScreen>
-      <ChipTabs defaultValue="1" value={value} onValueChange={(value) => setValue(value)}>
+      <ChipTabs
+        variant="neutralSolid"
+        defaultValue="1"
+        value={value}
+        onValueChange={(value) => setValue(value)}
+      >
         <ChipTabTriggerList>
           <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
           <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
diff --git a/component-docs/src/components/ComponentExample.tsx b/component-docs/src/components/ComponentExample.tsx
index d316437e6..372d255a1 100644
--- a/component-docs/src/components/ComponentExample.tsx
+++ b/component-docs/src/components/ComponentExample.tsx
@@ -40,6 +40,7 @@ export function ComponentExample(props: ComponentExampleProps) {
                 minHeight: "300px",
                 width: "100%",
                 display: "flex",
+                flexDirection: "column",
                 justifyContent: "center",
                 alignItems: "center",
                 padding: "10px",
diff --git a/component-docs/src/pages/components/tabs/chip-tabs.mdx b/component-docs/src/pages/components/tabs/chip-tabs.mdx
index 2a5964148..6c179d683 100644
--- a/component-docs/src/pages/components/tabs/chip-tabs.mdx
+++ b/component-docs/src/pages/components/tabs/chip-tabs.mdx
@@ -1,5 +1,3 @@
-import ChipTabsBasicActivity from "@/snippets/example/stackflow/chip-tabs-basic-activity";
-
 # ChipTabs
 
 <ComponentExample name="chip-tabs-preview" />
@@ -8,6 +6,12 @@ import ChipTabsBasicActivity from "@/snippets/example/stackflow/chip-tabs-basic-
 
 <Installation name="chip-tabs" />
 
-### Example
+### Examples
+
+#### variant=neutralSolid
+
+<ComponentExample name="chip-tabs-variant-neutral-solid" />
+
+#### variant=brandWeak
 
-<StackflowExample activity={ChipTabsBasicActivity} />
+<ComponentExample name="chip-tabs-variant-brand-weak" />
diff --git a/packages/component-spec/artifacts/chip-tab.yaml b/packages/component-spec/artifacts/chip-tab.yaml
index d1dc562a2..beb5ee68e 100644
--- a/packages/component-spec/artifacts/chip-tab.yaml
+++ b/packages/component-spec/artifacts/chip-tab.yaml
@@ -1,3 +1,5 @@
+# parts: root, label
+# states: enabled, pressed, selected, disabled
 base:
   enabled:
     root:
@@ -6,23 +8,58 @@ base:
       cornerRadius: $radii.full
       minHeight: 36px
     label:
-      color: $color.fg.neutral
       fontSize: $font-size[100]
       fontWeight: $font-weight.bold
+
+variant=neutral solid:
+  enabled:
+    root:
+      color: $color.bg.neutral
+    label:
+      color: $color.fg.neutral
+      fontWeight: $font-weight.bold
   enabled,pressed:
     root:
       color: $color.bg.layer-default-pressed
   selected:
     root:
-      color: $color.bg.neutral-inverted
+      color: $color.bg.neutral-solid
     label:
       color: $color.fg.neutral-inverted
   selected,pressed:
     root:
-      color: $color.bg.neutral-inverted-pressed
+      color: $color.bg.neutral-solid-pressed
+  disabled:
+    label:
+      color: $color.fg.disabled
+  selected,disabled:
+    root:
+      color: $color.bg.disabled
+    label:
+      color: $color.fg.disabled
+
+variant=brand weak:
+  enabled:
+    root:
+      color: $color.bg.neutral-weak
+    label:
+      color: $color.fg.neutral
+      fontWeight: $font-weight.medium
+  enabled,pressed:
+    root:
+      color: $color.bg.neutral-weak-pressed
+  selected:
+    root:
+      color: $color.bg.brand-weak
+    label:
+      color: $color.fg.brand-contrast
+      fontWeight: $font-weight.bold
+  selected,pressed:
+    root:
+      color: $color.bg.brand-weak-pressed
   disabled:
     label:
       color: $color.fg.disabled
   selected,disabled:
     root:
-      color: $color.bg.disabled-2
+      color: $color.bg.disabled-2
\ No newline at end of file
diff --git a/packages/component-spec/artifacts/chip-tablist.yaml b/packages/component-spec/artifacts/chip-tablist.yaml
index 1a2cd8b0e..d6d7ca35d 100644
--- a/packages/component-spec/artifacts/chip-tablist.yaml
+++ b/packages/component-spec/artifacts/chip-tablist.yaml
@@ -1,4 +1,16 @@
+# parts: root, triggerList, trigger
+# states: enabled
 base:
   enabled:
     root:
       paddingX: $unit[4] # global gutter
+
+variant=neutral solid:
+  enabled:
+    triggerList:
+      gap: 0px
+
+variant=brand weak:
+  enabled:
+    triggerList:
+      gap: 8px
diff --git a/packages/component-spec/artifacts/tab.yaml b/packages/component-spec/artifacts/tab.yaml
index eb46c7e2a..6e5da9561 100644
--- a/packages/component-spec/artifacts/tab.yaml
+++ b/packages/component-spec/artifacts/tab.yaml
@@ -1,3 +1,5 @@
+# parts: root, label, notification
+# states: enabled, selected, disabled
 base:
   enabled:
     label:
diff --git a/packages/recipe-generator/preset/src/__generated__/chip-tab.vars.ts b/packages/recipe-generator/preset/src/__generated__/chip-tab.vars.ts
index be42f80b6..3c5792139 100644
--- a/packages/recipe-generator/preset/src/__generated__/chip-tab.vars.ts
+++ b/packages/recipe-generator/preset/src/__generated__/chip-tab.vars.ts
@@ -8,10 +8,20 @@ export const vars = {
         "minHeight": "36px"
       },
       "label": {
-        "color": "var(--seed-color-fg-neutral)",
         "fontSize": "var(--seed-font-size-100)",
         "fontWeight": "var(--seed-font-weight-bold)"
       }
+    }
+  },
+  "variantNeutralSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
     },
     "enabledPressed": {
       "root": {
@@ -20,7 +30,7 @@ export const vars = {
     },
     "selected": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
+        "color": "var(--seed-color-bg-neutral-solid)"
       },
       "label": {
         "color": "var(--seed-color-fg-neutral-inverted)"
@@ -28,7 +38,50 @@ export const vars = {
     },
     "selectedPressed": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+        "color": "var(--seed-color-bg-neutral-solid-pressed)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "selectedDisabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "variantBrandWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    },
+    "enabledPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-brand-contrast)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-weak-pressed)"
       }
     },
     "disabled": {
diff --git a/packages/recipe-generator/preset/src/__generated__/chip-tablist.vars.ts b/packages/recipe-generator/preset/src/__generated__/chip-tablist.vars.ts
index 63bd28ba9..eb29548b9 100644
--- a/packages/recipe-generator/preset/src/__generated__/chip-tablist.vars.ts
+++ b/packages/recipe-generator/preset/src/__generated__/chip-tablist.vars.ts
@@ -5,5 +5,19 @@ export const vars = {
         "paddingX": "var(--seed-unit-4)"
       }
     }
+  },
+  "variantNeutralSolid": {
+    "enabled": {
+      "triggerList": {
+        "gap": "0px"
+      }
+    }
+  },
+  "variantBrandWeak": {
+    "enabled": {
+      "triggerList": {
+        "gap": "8px"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/packages/recipe-generator/preset/src/chip-tab.recipe.ts b/packages/recipe-generator/preset/src/chip-tab.recipe.ts
index 94d95cdec..382c8c727 100644
--- a/packages/recipe-generator/preset/src/chip-tab.recipe.ts
+++ b/packages/recipe-generator/preset/src/chip-tab.recipe.ts
@@ -17,43 +17,97 @@ const chipTab = defineRecipe({
       boxSizing: "border-box",
       whiteSpace: "nowrap",
       minHeight: vars.base.enabled.root.minHeight,
+    },
+    label: {
+      fontSize: vars.base.enabled.label.fontSize,
+      fontWeight: vars.base.enabled.label.fontWeight,
+    },
+  },
+  variants: {
+    variant: {
+      neutralSolid: {
+        root: {
+          [pseudo(selected)]: {
+            backgroundColor: vars.variantNeutralSolid.selected.root.color,
+          },
 
-      [pseudo(selected)]: {
-        backgroundColor: vars.base.selected.root.color,
-      },
+          [pseudo(active, not(disabled))]: {
+            backgroundColor: vars.variantNeutralSolid.enabled.root.color,
+          },
 
-      [pseudo(active, not(disabled))]: {
-        backgroundColor: vars.base.enabledPressed.root.color,
-      },
+          [pseudo(selected, active)]: {
+            backgroundColor: vars.variantNeutralSolid.selected.root.color,
+          },
 
-      [pseudo(selected, active)]: {
-        backgroundColor: vars.base.selectedPressed.root.color,
-      },
+          [pseudo(disabled)]: {
+            cursor: "not-allowed",
+            backgroundColor: undefined,
+          },
 
-      [pseudo(disabled)]: {
-        cursor: "not-allowed",
-        backgroundColor: undefined,
-      },
+          [pseudo(disabled, selected)]: {
+            backgroundColor: vars.variantNeutralSolid.selectedDisabled.root.color,
+          },
+        },
 
-      [pseudo(disabled, selected)]: {
-        backgroundColor: vars.base.selectedDisabled.root.color,
-      },
-    },
-    label: {
-      color: vars.base.enabled.label.color,
-      fontSize: vars.base.enabled.label.fontSize,
-      fontWeight: vars.base.enabled.label.fontWeight,
+        label: {
+          color: vars.variantNeutralSolid.enabled.label.color,
+          fontWeight: vars.base.enabled.label.fontWeight,
 
-      [pseudo(selected)]: {
-        color: vars.base.selected.label.color,
+          [pseudo(selected)]: {
+            color: vars.variantNeutralSolid.selected.label.color,
+          },
+
+          [pseudo(disabled)]: {
+            color: vars.variantNeutralSolid.disabled.label.color,
+          },
+
+          [pseudo(disabled, selected)]: {
+            color: vars.variantNeutralSolid.selectedDisabled.label.color,
+          },
+        },
       },
+      brandWeak: {
+        root: {
+          fontWeight: vars.base.enabled.label.fontWeight,
+
+          [pseudo(selected)]: {
+            backgroundColor: vars.variantBrandWeak.selected.root.color,
+          },
+
+          [pseudo(active, not(disabled))]: {
+            backgroundColor: vars.variantBrandWeak.enabled.root.color,
+          },
+
+          [pseudo(selected, active)]: {
+            backgroundColor: vars.variantBrandWeak.selected.root.color,
+          },
+
+          [pseudo(disabled)]: {
+            cursor: "not-allowed",
+            backgroundColor: undefined,
+          },
+
+          [pseudo(disabled, selected)]: {
+            backgroundColor: vars.variantBrandWeak.selectedDisabled.root.color,
+          },
+        },
+
+        label: {
+          color: vars.variantBrandWeak.enabled.label.color,
+          fontWeight: vars.variantBrandWeak.enabled.label.fontWeight,
+
+          [pseudo(selected)]: {
+            color: vars.variantBrandWeak.selected.label.color,
+            fontWeight: vars.variantBrandWeak.selected.label.fontWeight,
+          },
 
-      [pseudo(disabled)]: {
-        color: vars.base.disabled.label.color,
+          [pseudo(disabled)]: {
+            color: vars.variantBrandWeak.disabled.label.color,
+          },
+        },
       },
     },
   },
-  variants: {},
 });
 
 export default chipTab;
diff --git a/packages/recipe-generator/preset/src/chip-tabs.recipe.ts b/packages/recipe-generator/preset/src/chip-tabs.recipe.ts
index ec8e3660b..d7e728881 100644
--- a/packages/recipe-generator/preset/src/chip-tabs.recipe.ts
+++ b/packages/recipe-generator/preset/src/chip-tabs.recipe.ts
@@ -39,7 +39,20 @@ const chipTabs = defineRecipe({
       overflow: "auto",
     },
   },
-  variants: {},
+  variants: {
+    variant: {
+      neutralSolid: {
+        triggerList: {
+          gap: vars.variantNeutralSolid.enabled.triggerList.gap,
+        },
+      },
+      brandWeak: {
+        triggerList: {
+          gap: vars.variantBrandWeak.enabled.triggerList.gap,
+        },
+      },
+    },
+  },
 });
 
 export default chipTabs;
diff --git a/packages/recipe/lib/chipTab.d.ts b/packages/recipe/lib/chipTab.d.ts
index f6d232348..404029b8e 100644
--- a/packages/recipe/lib/chipTab.d.ts
+++ b/packages/recipe/lib/chipTab.d.ts
@@ -1,5 +1,5 @@
 interface ChipTabVariant {
-  
+  variant: "neutralSolid" | "brandWeak"
 }
 
 type ChipTabVariantMap = {
diff --git a/packages/recipe/lib/chipTab.mjs b/packages/recipe/lib/chipTab.mjs
index c11fd4b98..13cace33a 100644
--- a/packages/recipe/lib/chipTab.mjs
+++ b/packages/recipe/lib/chipTab.mjs
@@ -15,7 +15,12 @@ const defaultVariant = {};
 
 const compoundVariants = [];
 
-export const chipTabVariantMap = {};
+export const chipTabVariantMap = {
+  "variant": [
+    "neutralSolid",
+    "brandWeak"
+  ]
+};
 
 export const chipTabVariantKeys = Object.keys(chipTabVariantMap);
 
diff --git a/packages/recipe/lib/chipTabs.d.ts b/packages/recipe/lib/chipTabs.d.ts
index a2b3a6a33..171d89f4d 100644
--- a/packages/recipe/lib/chipTabs.d.ts
+++ b/packages/recipe/lib/chipTabs.d.ts
@@ -1,5 +1,5 @@
 interface ChipTabsVariant {
-  
+  variant: "neutralSolid" | "brandWeak"
 }
 
 type ChipTabsVariantMap = {
diff --git a/packages/recipe/lib/chipTabs.mjs b/packages/recipe/lib/chipTabs.mjs
index 0b10a85e5..d01d784f2 100644
--- a/packages/recipe/lib/chipTabs.mjs
+++ b/packages/recipe/lib/chipTabs.mjs
@@ -27,7 +27,12 @@ const defaultVariant = {};
 
 const compoundVariants = [];
 
-export const chipTabsVariantMap = {};
+export const chipTabsVariantMap = {
+  "variant": [
+    "neutralSolid",
+    "brandWeak"
+  ]
+};
 
 export const chipTabsVariantKeys = Object.keys(chipTabsVariantMap);
 
diff --git a/packages/stylesheet/chipTab.css b/packages/stylesheet/chipTab.css
index 3d7d94231..33f291845 100644
--- a/packages/stylesheet/chipTab.css
+++ b/packages/stylesheet/chipTab.css
@@ -10,29 +10,64 @@
     white-space: nowrap;
     min-height: 36px;
 }
-.chipTab__root:is(:selected, [data-selected]) {
-    background-color: var(--seed-color-bg-neutral-inverted);
+.chipTab__label {
+    font-size: var(--seed-font-size-100);
+    font-weight: var(--seed-font-weight-bold);
 }
-.chipTab__root:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
-    background-color: var(--seed-color-bg-layer-default-pressed);
+.chipTab__root--variant_neutralSolid:is(:selected, [data-selected]) {
+    background-color: var(--seed-color-bg-neutral-solid);
 }
-.chipTab__root:is(:selected, [data-selected]):is(:active, [data-active]) {
-    background-color: var(--seed-color-bg-neutral-inverted-pressed);
+.chipTab__root--variant_neutralSolid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
+    background-color: var(--seed-color-bg-neutral);
 }
-.chipTab__root:is(:disabled, [disabled], [data-disabled]) {
+.chipTab__root--variant_neutralSolid:is(:selected, [data-selected]):is(:active, [data-active]) {
+    background-color: var(--seed-color-bg-neutral-solid);
+}
+.chipTab__root--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
 }
-.chipTab__root:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
-    background-color: var(--seed-color-bg-disabled-2);
+.chipTab__root--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
+    background-color: var(--seed-color-bg-disabled);
 }
-.chipTab__label {
+.chipTab__label--variant_neutralSolid {
     color: var(--seed-color-fg-neutral);
-    font-size: var(--seed-font-size-100);
     font-weight: var(--seed-font-weight-bold);
 }
-.chipTab__label:is(:selected, [data-selected]) {
+.chipTab__label--variant_neutralSolid:is(:selected, [data-selected]) {
     color: var(--seed-color-fg-neutral-inverted);
 }
-.chipTab__label:is(:disabled, [disabled], [data-disabled]) {
+.chipTab__label--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
+.chipTab__label--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
+    color: var(--seed-color-fg-disabled);
+}
+.chipTab__root--variant_brandWeak {
+    font-weight: var(--seed-font-weight-bold);
+}
+.chipTab__root--variant_brandWeak:is(:selected, [data-selected]) {
+    background-color: var(--seed-color-bg-brand-weak);
+}
+.chipTab__root--variant_brandWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
+    background-color: var(--seed-color-bg-neutral-weak);
+}
+.chipTab__root--variant_brandWeak:is(:selected, [data-selected]):is(:active, [data-active]) {
+    background-color: var(--seed-color-bg-brand-weak);
+}
+.chipTab__root--variant_brandWeak:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+}
+.chipTab__root--variant_brandWeak:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
+    background-color: var(--seed-color-bg-disabled-2);
+}
+.chipTab__label--variant_brandWeak {
+    color: var(--seed-color-fg-neutral);
+    font-weight: var(--seed-font-weight-medium);
+}
+.chipTab__label--variant_brandWeak:is(:selected, [data-selected]) {
+    color: var(--seed-color-fg-brand-contrast);
+    font-weight: var(--seed-font-weight-bold);
+}
+.chipTab__label--variant_brandWeak:is(:disabled, [disabled], [data-disabled]) {
     color: var(--seed-color-fg-disabled);
 }
\ No newline at end of file
diff --git a/packages/stylesheet/chipTabs.css b/packages/stylesheet/chipTabs.css
index 9e7f7d6a2..9211b758a 100644
--- a/packages/stylesheet/chipTabs.css
+++ b/packages/stylesheet/chipTabs.css
@@ -27,4 +27,10 @@
     height: 100%;
     flex-shrink: 0;
     overflow: auto;
+}
+.chipTabs__triggerList--variant_neutralSolid {
+    gap: 0px;
+}
+.chipTabs__triggerList--variant_brandWeak {
+    gap: 8px;
 }
\ No newline at end of file