diff --git a/src/plugins/components/tabs/index.ts b/src/plugins/components/tabs/index.ts
index 3b231e1..a7b61bf 100644
--- a/src/plugins/components/tabs/index.ts
+++ b/src/plugins/components/tabs/index.ts
@@ -38,23 +38,6 @@ export default plugin(({ addComponents, theme }) => {
         //Transition
         [`@apply transition-${config.item.transition.property} duration-${config.item.transition.duration}`]:
           {},
-        //Item:inactive
-        '&:not(.nui-active)': {
-          //Base
-          '@apply border-transparent': {},
-          //Color
-          [`@apply text-${config.item.font.color.inactive.light} dark:text-${config.item.font.color.inactive.dark}`]:
-            {},
-        },
-        //Item:active
-        '&.nui-active': {
-          //Border
-          [`@apply border-${config.item.border.active.light} dark:border-${config.item.border.active.dark}`]:
-            {},
-          //Color
-          [`@apply text-${config.item.font.color.active.light} dark:text-${config.item.font.color.active.dark}`]:
-            {},
-        },
         //Item:icon
         '&.nui-has-icon': {
           '@apply flex items-center gap-1': {},
@@ -68,24 +51,6 @@ export default plugin(({ addComponents, theme }) => {
         //Transition
         [`@apply transition-${config.pill.transition.property} duration-${config.pill.transition.duration}`]:
           {},
-        //Item:inactive
-        '&:not(.nui-active)': {
-          //color
-          [`@apply text-${config.pill.font.color.inactive.light} dark:text-${config.pill.font.color.inactive.dark}`]:
-            {},
-        },
-        //Item:active
-        '&.nui-active': {
-          //Color
-          [`@apply !text-${config.pill.font.color.active.light} dark:!text-${config.pill.font.color.active.dark}`]:
-            {},
-          //Background
-          [`@apply !bg-${config.pill.background.active.light} dark:!bg-${config.pill.background.active.dark}`]:
-            {},
-          //Shadow
-          [`@apply shadow-${config.pill.shadow.active.size} bg-${config.pill.shadow.active.light} dark:bg-${config.pill.shadow.active.dark}`]:
-            {},
-        },
         //Item:no-icon
         '&:not(.nui-has-icon)': {
           '@apply flex items-center gap-1 py-2': {},
@@ -95,6 +60,229 @@ export default plugin(({ addComponents, theme }) => {
           '@apply flex items-center gap-1 py-3': {},
         },
       },
+      //Color: default
+      '&.nui-tabs-default': {
+        //Tabs:item
+        '.nui-tab-item': {
+          //Item:inactive
+          '&:not(.nui-active)': {
+            //Base
+            '@apply border-transparent': {},
+            //Color
+            [`@apply text-${config.tabs.color.default.font.inactive.light} dark:text-${config.tabs.color.default.font.inactive.dark}`]:
+              {},
+          },
+          //Item:active
+          '&.nui-active': {
+            //Border
+            [`@apply border-${config.tabs.color.default.border.active.light} dark:border-${config.tabs.color.default.border.active.dark}`]:
+              {},
+            //Color
+            [`@apply text-${config.tabs.color.default.font.active.light} dark:text-${config.tabs.color.default.font.active.dark}`]:
+              {},
+          },
+        },
+        //Pills:item
+        '.nui-pill-item': {
+          //Item:inactive
+          '&:not(.nui-active)': {
+            //Color
+            [`@apply text-${config.pill.color.default.font.inactive.light} dark:text-${config.pill.color.default.font.inactive.dark}`]:
+              {},
+          },
+          //Item:active
+          '&.nui-active': {
+            //Color
+            [`@apply text-${config.pill.color.default.font.active.light} dark:text-${config.pill.color.default.font.active.dark}`]:
+              {},
+            //Background
+            [`@apply bg-${config.pill.color.default.background.active.light} dark:bg-${config.pill.color.default.background.active.dark}`]:
+              {},
+            //border
+            [`@apply border border-${config.pill.color.default.border.active.light} dark:border-${config.pill.color.default.border.active.dark}`]:
+              {},
+            //Shadow
+            [`@apply shadow-${config.pill.color.default.shadow.active.size} shadow-${config.pill.color.default.shadow.active.light} dark:shadow-${config.pill.color.default.shadow.active.dark}`]:
+              {},
+          },
+        },
+      },
+      //Color: primary
+      '&.nui-tabs-primary': {
+        //Tabs:item
+        '.nui-tab-item': {
+          //Item:inactive
+          '&:not(.nui-active)': {
+            //Base
+            '@apply border-transparent': {},
+            //Color
+            [`@apply text-${config.tabs.color.primary.font.inactive.light} dark:text-${config.tabs.color.primary.font.inactive.dark}`]:
+              {},
+          },
+          //Item:active
+          '&.nui-active': {
+            //Border
+            [`@apply border-${config.tabs.color.primary.border.active.light} dark:border-${config.tabs.color.primary.border.active.dark}`]:
+              {},
+            //Color
+            [`@apply text-${config.tabs.color.primary.font.active.light} dark:text-${config.tabs.color.primary.font.active.dark}`]:
+              {},
+          },
+        },
+        //Pills:item
+        '.nui-pill-item': {
+          //Item:inactive
+          '&:not(.nui-active)': {
+            //Color
+            [`@apply text-${config.pill.color.primary.font.inactive.light} dark:text-${config.pill.color.primary.font.inactive.dark}`]:
+              {},
+          },
+          //Item:active
+          '&.nui-active': {
+            //Color
+            [`@apply text-${config.pill.color.primary.font.active.light} dark:text-${config.pill.color.primary.font.active.dark}`]:
+              {},
+            //Background
+            [`@apply !bg-${config.pill.color.primary.background.active.light} dark:!bg-${config.pill.color.primary.background.active.dark}`]:
+              {},
+            //Shadow
+            [`@apply shadow-${config.pill.color.primary.shadow.active.size} bg-${config.pill.color.primary.shadow.active.light} dark:bg-${config.pill.color.primary.shadow.active.dark}`]:
+              {},
+          },
+        },
+      },
+      //Color: light
+      '&.nui-tabs-light': {
+        //Tabs:item
+        '.nui-tab-item': {
+          //Item:inactive
+          '&:not(.nui-active)': {
+            //Base
+            '@apply border-transparent': {},
+            //Color
+            [`@apply text-${config.tabs.color.light.font.inactive.light} dark:text-${config.tabs.color.light.font.inactive.dark}`]:
+              {},
+          },
+          //Item:active
+          '&.nui-active': {
+            //Border
+            [`@apply border-${config.tabs.color.light.border.active.light} dark:border-${config.tabs.color.light.border.active.dark}`]:
+              {},
+            //Color
+            [`@apply text-${config.tabs.color.light.font.active.light} dark:text-${config.tabs.color.light.font.active.dark}`]:
+              {},
+          },
+        },
+        //Pills:item
+        '.nui-pill-item': {
+          //Item:inactive
+          '&:not(.nui-active)': {
+            //Color
+            [`@apply text-${config.pill.color.light.font.inactive.light} dark:text-${config.pill.color.light.font.inactive.dark}`]:
+              {},
+          },
+          //Item:active
+          '&.nui-active': {
+            //Color
+            [`@apply text-${config.pill.color.light.font.active.light} dark:text-${config.pill.color.light.font.active.dark}`]:
+              {},
+            //Background
+            [`@apply !bg-${config.pill.color.light.background.active.light} dark:!bg-${config.pill.color.light.background.active.dark}`]:
+              {},
+            //Shadow
+            [`@apply shadow-${config.pill.color.light.shadow.active.size} shadow-${config.pill.color.light.shadow.active.light} dark:shadow-${config.pill.color.light.shadow.active.dark}`]:
+              {},
+          },
+        },
+      },
+      //Color: dark
+      '&.nui-tabs-dark': {
+        //Tabs:item
+        '.nui-tab-item': {
+          //Item:inactive
+          '&:not(.nui-active)': {
+            //Base
+            '@apply border-transparent': {},
+            //Color
+            [`@apply text-${config.tabs.color.dark.font.inactive.light} dark:text-${config.tabs.color.dark.font.inactive.dark}`]:
+              {},
+          },
+          //Item:active
+          '&.nui-active': {
+            //Border
+            [`@apply border-${config.tabs.color.dark.border.active.light} dark:border-${config.tabs.color.dark.border.active.dark}`]:
+              {},
+            //Color
+            [`@apply text-${config.tabs.color.dark.font.active.light} dark:text-${config.tabs.color.dark.font.active.dark}`]:
+              {},
+          },
+        },
+        //Pills:item
+        '.nui-pill-item': {
+          //Item:inactive
+          '&:not(.nui-active)': {
+            //Color
+            [`@apply text-${config.pill.color.dark.font.inactive.light} dark:text-${config.pill.color.dark.font.inactive.dark}`]:
+              {},
+          },
+          //Item:active
+          '&.nui-active': {
+            //Color
+            [`@apply text-${config.pill.color.dark.font.active.light} dark:text-${config.pill.color.dark.font.active.dark}`]:
+              {},
+            //Background
+            [`@apply !bg-${config.pill.color.dark.background.active.light} dark:!bg-${config.pill.color.dark.background.active.dark}`]:
+              {},
+            //Shadow
+            [`@apply shadow-${config.pill.color.dark.shadow.active.size} shadow-${config.pill.color.dark.shadow.active.light} dark:shadow-${config.pill.color.dark.shadow.active.dark}`]:
+              {},
+          },
+        },
+      },
+      //Color: black
+      '&.nui-tabs-black': {
+        //Tabs:item
+        '.nui-tab-item': {
+          //Item:inactive
+          '&:not(.nui-active)': {
+            //Base
+            '@apply border-transparent': {},
+            //Color
+            [`@apply text-${config.tabs.color.black.font.inactive.light} dark:text-${config.tabs.color.black.font.inactive.dark}`]:
+              {},
+          },
+          //Item:active
+          '&.nui-active': {
+            //Border
+            [`@apply border-${config.tabs.color.black.border.active.light} dark:border-${config.tabs.color.black.border.active.dark}`]:
+              {},
+            //Color
+            [`@apply text-${config.tabs.color.black.font.active.light} dark:text-${config.tabs.color.black.font.active.dark}`]:
+              {},
+          },
+        },
+        //Pills:item
+        '.nui-pill-item': {
+          //Item:inactive
+          '&:not(.nui-active)': {
+            //Color
+            [`@apply text-${config.pill.color.black.font.inactive.light} dark:text-${config.pill.color.black.font.inactive.dark}`]:
+              {},
+          },
+          //Item:active
+          '&.nui-active': {
+            //Color
+            [`@apply text-${config.pill.color.black.font.active.light} dark:text-${config.pill.color.black.font.active.dark}`]:
+              {},
+            //Background
+            [`@apply !bg-${config.pill.color.black.background.active.light} dark:!bg-${config.pill.color.black.background.active.dark}`]:
+              {},
+            //Shadow
+            [`@apply shadow-${config.pill.color.black.shadow.active.size} shadow-${config.pill.color.black.shadow.active.light} dark:shadow-${config.pill.color.black.shadow.active.dark}`]:
+              {},
+          },
+        },
+      },
       //Tabs:content
       '.nui-tab-content': {
         '@apply relative block': {},
diff --git a/src/plugins/components/tabs/tabs.component.ts b/src/plugins/components/tabs/tabs.component.ts
index 506cbe1..347fd3c 100644
--- a/src/plugins/components/tabs/tabs.component.ts
+++ b/src/plugins/components/tabs/tabs.component.ts
@@ -11,6 +11,7 @@ export const Tabs = ({
   tabs,
   type = 'tabs',
   justify = 'start',
+  color = 'primary',
   hideLabel,
   bordered = true,
   classes,
@@ -22,6 +23,7 @@ export const Tabs = ({
       class=${[
         'nui-tabs',
         justify && variants.justify[justify],
+        color && variants.color[color],
         type === 'tabs' && bordered && 'nui-tabs-bordered',
         classes?.wrapper,
       ]
diff --git a/src/plugins/components/tabs/tabs.config.ts b/src/plugins/components/tabs/tabs.config.ts
index 409df71..984834c 100644
--- a/src/plugins/components/tabs/tabs.config.ts
+++ b/src/plugins/components/tabs/tabs.config.ts
@@ -12,30 +12,124 @@ export const defaultConfig = {
   item: {
     font: {
       size: 'sm',
-      color: {
-        active: {
-          light: 'muted-800',
-          dark: 'muted-100',
+    },
+    transition: {
+      property: 'all',
+      duration: '300',
+    },
+  },
+  tabs: {
+    color: {
+      default: {
+        font: {
+          active: {
+            light: 'muted-800',
+            dark: 'muted-100',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
         },
-        inactive: {
-          light: 'muted-400',
-          dark: 'muted-400',
+        border: {
+          active: {
+            light: 'muted-500',
+            dark: 'muted-100',
+          },
+          inactive: {
+            light: 'transparent',
+            dark: 'transparent',
+          },
         },
       },
-    },
-    border: {
-      active: {
-        light: 'primary-500',
-        dark: 'primary-500',
+      primary: {
+        font: {
+          active: {
+            light: 'muted-800',
+            dark: 'muted-100',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+        border: {
+          active: {
+            light: 'primary-500',
+            dark: 'primary-500',
+          },
+          inactive: {
+            light: 'transparent',
+            dark: 'transparent',
+          },
+        },
+      },
+      light: {
+        font: {
+          active: {
+            light: 'muted-600',
+            dark: 'muted-100',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+        border: {
+          active: {
+            light: 'muted-600',
+            dark: 'muted-100',
+          },
+          inactive: {
+            light: 'transparent',
+            dark: 'transparent',
+          },
+        },
       },
-      inactive: {
-        light: 'transparent',
-        dark: 'transparent',
+      dark: {
+        font: {
+          active: {
+            light: 'muted-900',
+            dark: 'muted-100',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+        border: {
+          active: {
+            light: 'muted-900',
+            dark: 'muted-100',
+          },
+          inactive: {
+            light: 'transparent',
+            dark: 'transparent',
+          },
+        },
+      },
+      black: {
+        font: {
+          active: {
+            light: 'black',
+            dark: 'white',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+        border: {
+          active: {
+            light: 'black',
+            dark: 'white',
+          },
+          inactive: {
+            light: 'transparent',
+            dark: 'transparent',
+          },
+        },
       },
-    },
-    transition: {
-      property: 'all',
-      duration: '300',
     },
   },
   pill: {
@@ -43,28 +137,138 @@ export const defaultConfig = {
     font: {
       align: 'center',
       size: 'xs',
-      color: {
-        active: {
-          light: 'primary-invert',
-          dark: 'primary-invert',
+    },
+    color: {
+      default: {
+        font: {
+          active: {
+            light: 'muted-800',
+            dark: 'muted-100',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+        background: {
+          active: {
+            light: 'white',
+            dark: 'muted-800',
+          },
         },
-        inactive: {
-          light: 'muted-400',
-          dark: 'muted-400',
+        border: {
+          active: {
+            light: 'muted-200',
+            dark: 'muted-700',
+          },
+        },
+        shadow: {
+          active: {
+            size: 'lg',
+            light: 'muted-500/30',
+            dark: 'muted-800/50',
+          },
         },
       },
-    },
-    background: {
-      active: {
-        light: 'primary-600',
-        dark: 'primary-600',
+      primary: {
+        font: {
+          active: {
+            light: 'primary-invert',
+            dark: 'primary-invert',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+        background: {
+          active: {
+            light: 'primary-600',
+            dark: 'primary-600',
+          },
+        },
+        shadow: {
+          active: {
+            size: 'lg',
+            light: 'primary-500/50',
+            dark: 'primary-500/50',
+          },
+        },
       },
-    },
-    shadow: {
-      active: {
-        size: 'lg',
-        light: 'primary-500/50',
-        dark: 'primary-500/50',
+      light: {
+        font: {
+          active: {
+            light: 'muted-700',
+            dark: 'muted-100',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+        background: {
+          active: {
+            light: 'muted-100',
+            dark: 'muted-800',
+          },
+        },
+        shadow: {
+          active: {
+            size: 'lg',
+            light: 'muted-500/30',
+            dark: 'muted-800/50',
+          },
+        },
+      },
+      dark: {
+        font: {
+          active: {
+            light: 'muted-100',
+            dark: 'muted-900',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+        background: {
+          active: {
+            light: 'muted-900',
+            dark: 'muted-100',
+          },
+        },
+        shadow: {
+          active: {
+            size: 'lg',
+            light: 'muted-500/30',
+            dark: 'muted-800/50',
+          },
+        },
+      },
+      black: {
+        font: {
+          active: {
+            light: 'white',
+            dark: 'black',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+        background: {
+          active: {
+            light: 'black',
+            dark: 'white',
+          },
+        },
+        shadow: {
+          active: {
+            size: 'lg',
+            light: 'muted-500/30',
+            dark: 'muted-800/50',
+          },
+        },
       },
     },
     transition: {
diff --git a/src/plugins/components/tabs/tabs.stories.ts b/src/plugins/components/tabs/tabs.stories.ts
index 0b159f3..d2f596c 100644
--- a/src/plugins/components/tabs/tabs.stories.ts
+++ b/src/plugins/components/tabs/tabs.stories.ts
@@ -10,6 +10,11 @@ const meta = {
   // tags: ['autodocs'],
   render: (args) => Tabs(args),
   argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['default', 'primary', 'light', 'dark', 'black'],
+      defaultValue: 'primary',
+    },
     type: {
       control: { type: 'select' },
       options: ['tabs', 'box'],
diff --git a/src/plugins/components/tabs/tabs.types.ts b/src/plugins/components/tabs/tabs.types.ts
index 89d4971..d0b45fc 100644
--- a/src/plugins/components/tabs/tabs.types.ts
+++ b/src/plugins/components/tabs/tabs.types.ts
@@ -8,6 +8,7 @@ export interface TabsProps extends Record<string, unknown> {
   }[]
   type?: 'tabs' | 'box'
   justify?: 'start' | 'center' | 'end'
+  color?: 'default' | 'primary' | 'light' | 'dark' | 'black'
   hideLabel?: boolean
   bordered?: boolean
   classes?: {
diff --git a/src/plugins/components/tabs/tabs.variants.ts b/src/plugins/components/tabs/tabs.variants.ts
index 1d6a44e..e26858a 100644
--- a/src/plugins/components/tabs/tabs.variants.ts
+++ b/src/plugins/components/tabs/tabs.variants.ts
@@ -10,3 +10,11 @@ export const type = {
   tabs: 'nui-tab-item',
   box: 'nui-pill-item',
 } as const satisfies TabsVariant<'type'>
+
+export const color = {
+  default: 'nui-tabs-default',
+  primary: 'nui-tabs-primary',
+  light: 'nui-tabs-light',
+  dark: 'nui-tabs-dark',
+  black: 'nui-tabs-black',
+} as const satisfies TabsVariant<'color'>