From 5299993ad8200404b91c14dd001fc58c3483cedf Mon Sep 17 00:00:00 2001
From: MGREMY <miguel.gremy72+pro@gmail.com>
Date: Sat, 2 Aug 2025 13:25:43 +0200
Subject: [PATCH 1/3] docs: add theme section (#136)

* docs: add theme section

* docs: coderabbit suggestion
---
 apps/docs/docs/components/accordion/index.md  |  3 +++
 .../docs/components/accordion/ng-doc.page.ts  | 17 +++++++++++++
 apps/docs/docs/components/alert/index.md      |  3 +++
 .../docs/docs/components/alert/ng-doc.page.ts | 15 ++++++++++++
 apps/docs/docs/components/badge/index.md      |  3 +++
 .../docs/docs/components/badge/ng-doc.page.ts | 15 ++++++++++++
 apps/docs/docs/components/breadcrumb/index.md |  3 +++
 .../docs/components/breadcrumb/ng-doc.page.ts | 15 ++++++++++++
 apps/docs/docs/components/button/index.md     |  3 +++
 .../docs/components/button/ng-doc.page.ts     |  7 ++++++
 apps/docs/docs/components/card/index.md       |  3 +++
 apps/docs/docs/components/card/ng-doc.page.ts | 15 ++++++++++++
 apps/docs/docs/components/clipboard/index.md  |  3 +++
 .../docs/components/clipboard/ng-doc.page.ts  |  9 +++++++
 apps/docs/docs/components/dropdown/index.md   |  3 +++
 .../docs/components/dropdown/ng-doc.page.ts   | 15 ++++++++++++
 apps/docs/docs/components/icon/index.md       |  3 +++
 apps/docs/docs/components/icon/ng-doc.page.ts |  7 ++++++
 apps/docs/docs/components/indicator/index.md  |  3 +++
 .../docs/components/indicator/ng-doc.page.ts  |  9 +++++++
 apps/docs/docs/components/input/index.md      |  3 +++
 .../docs/docs/components/input/ng-doc.page.ts | 17 +++++++++++++
 apps/docs/docs/components/modal/index.md      |  3 +++
 .../docs/docs/components/modal/ng-doc.page.ts | 19 +++++++++++++++
 apps/docs/docs/components/navbar/index.md     |  3 +++
 .../docs/components/navbar/ng-doc.page.ts     | 21 ++++++++++++++++
 apps/docs/docs/components/pagination/index.md |  3 +++
 .../docs/components/pagination/ng-doc.page.ts | 21 ++++++++++++++++
 apps/docs/docs/components/sidebar/index.md    |  3 +++
 .../docs/components/sidebar/ng-doc.page.ts    | 17 +++++++++++++
 apps/docs/docs/components/tab/index.md        |  3 +++
 apps/docs/docs/components/tab/ng-doc.page.ts  | 17 +++++++++++++
 apps/docs/docs/components/tooltip/index.md    |  3 +++
 .../docs/components/tooltip/ng-doc.page.ts    |  9 +++++++
 apps/docs/docs/customize/dark-mode/index.md   | 10 ++++----
 .../customize/override-base-style/index.md    |  4 ++--
 .../override-base-style/ng-doc.page.ts        |  2 +-
 .../docs/customize/use-custom-style/index.md  | 10 ++++----
 apps/docs/docs/doc-theme.model.ts             |  8 +++++++
 apps/docs/docs/ng-doc.api.ts                  |  1 -
 apps/docs/docs/shared/theme-macro.md          | 24 +++++++++++++++++++
 41 files changed, 341 insertions(+), 14 deletions(-)
 create mode 100644 apps/docs/docs/doc-theme.model.ts
 create mode 100644 apps/docs/docs/shared/theme-macro.md

diff --git a/apps/docs/docs/components/accordion/index.md b/apps/docs/docs/components/accordion/index.md
index f9be3bec..060cec05 100644
--- a/apps/docs/docs/components/accordion/index.md
+++ b/apps/docs/docs/components/accordion/index.md
@@ -61,3 +61,6 @@ keyword: AccordionPage
 ```angular-ts file="./_icon.component.ts" group="icon" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/accordion/ng-doc.page.ts b/apps/docs/docs/components/accordion/ng-doc.page.ts
index b3459cb7..afc4f701 100644
--- a/apps/docs/docs/components/accordion/ng-doc.page.ts
+++ b/apps/docs/docs/components/accordion/ng-doc.page.ts
@@ -1,3 +1,5 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteAlwaysOpenComponent } from './_always-open.component';
 import { FlowbiteColorComponent } from './_color.component';
@@ -5,6 +7,13 @@ import { FlowbiteDefaultComponent } from './_default.component';
 import { FlowbiteFlushComponent } from './_flush.component';
 import { FlowbiteIconComponent } from './_icon.component';
 
+import {
+  flowbiteAccordionContentTheme,
+  flowbiteAccordionItemTheme,
+  flowbiteAccordionTheme,
+  flowbiteAccordionTitleTheme,
+} from 'flowbite-angular/accordion';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -21,6 +30,14 @@ const Accordion: NgDocPage = {
     flowbiteFlushComponent: FlowbiteFlushComponent,
     flowbiteIconComponent: FlowbiteIconComponent,
   },
+  data: {
+    themes: [
+      { title: 'Accordion theme', content: toIndentedJson(flowbiteAccordionTheme) },
+      { title: 'Accordion item content', content: toIndentedJson(flowbiteAccordionItemTheme) },
+      { title: 'Accordion title theme', content: toIndentedJson(flowbiteAccordionTitleTheme) },
+      { title: 'Accordion content', content: toIndentedJson(flowbiteAccordionContentTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Accordion;
diff --git a/apps/docs/docs/components/alert/index.md b/apps/docs/docs/components/alert/index.md
index 47090b7d..d8d49c21 100644
--- a/apps/docs/docs/components/alert/index.md
+++ b/apps/docs/docs/components/alert/index.md
@@ -61,3 +61,6 @@ keyword: AlertPage
 ```angular-ts file="./_border-accent.component.ts" group="borderAccent" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/alert/ng-doc.page.ts b/apps/docs/docs/components/alert/ng-doc.page.ts
index 87bd4fee..34f8436b 100644
--- a/apps/docs/docs/components/alert/ng-doc.page.ts
+++ b/apps/docs/docs/components/alert/ng-doc.page.ts
@@ -1,3 +1,5 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteBorderAccentComponent } from './_border-accent.component';
 import { FlowbiteBorderComponent } from './_border.component';
@@ -5,6 +7,12 @@ import { FlowbiteDefaultComponent } from './_default.component';
 import { FlowbiteDismissableComponent } from './_dismissable.component';
 import { FlowbiteIconComponent } from './_icon.component';
 
+import {
+  flowbiteAlertButtonTheme,
+  flowbiteAlertContentTheme,
+  flowbiteAlertTheme,
+} from 'flowbite-angular/alert';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -21,6 +29,13 @@ const Alert: NgDocPage = {
     flowbiteBorderAccentComponent: FlowbiteBorderAccentComponent,
     flowbiteDismissableComponent: FlowbiteDismissableComponent,
   },
+  data: {
+    themes: [
+      { title: 'Alert theme', content: toIndentedJson(flowbiteAlertTheme) },
+      { title: 'Alert content theme', content: toIndentedJson(flowbiteAlertContentTheme) },
+      { title: 'Alert button theme', content: toIndentedJson(flowbiteAlertButtonTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Alert;
diff --git a/apps/docs/docs/components/badge/index.md b/apps/docs/docs/components/badge/index.md
index 6e832b34..507590c2 100644
--- a/apps/docs/docs/components/badge/index.md
+++ b/apps/docs/docs/components/badge/index.md
@@ -61,3 +61,6 @@ keyword: BadgePage
 ```angular-ts file="./_dismiss.component.ts" group="dismiss" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/badge/ng-doc.page.ts b/apps/docs/docs/components/badge/ng-doc.page.ts
index a0f5a6a3..5d1e3829 100644
--- a/apps/docs/docs/components/badge/ng-doc.page.ts
+++ b/apps/docs/docs/components/badge/ng-doc.page.ts
@@ -1,3 +1,5 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteBorderComponent } from './_border.component';
 import { FlowbiteDefaultComponent } from './_default.component';
@@ -5,6 +7,12 @@ import { FlowbiteDismissComponent } from './_dismiss.component';
 import { FlowbiteIconComponent } from './_icon.component';
 import { FlowbiteLinkComponent } from './_link.component';
 
+import {
+  flowbiteBadgeButtonTheme,
+  flowbiteBadgeLinkTheme,
+  flowbiteBadgeTheme,
+} from 'flowbite-angular/badge';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -21,6 +29,13 @@ const Badge: NgDocPage = {
     flowbiteIconComponent: FlowbiteIconComponent,
     flowbiteDismissComponent: FlowbiteDismissComponent,
   },
+  data: {
+    themes: [
+      { title: 'Badge', content: toIndentedJson(flowbiteBadgeTheme) },
+      { title: 'Badge link', content: toIndentedJson(flowbiteBadgeLinkTheme) },
+      { title: 'Badge button', content: toIndentedJson(flowbiteBadgeButtonTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Badge;
diff --git a/apps/docs/docs/components/breadcrumb/index.md b/apps/docs/docs/components/breadcrumb/index.md
index 215dfa6a..8503986f 100644
--- a/apps/docs/docs/components/breadcrumb/index.md
+++ b/apps/docs/docs/components/breadcrumb/index.md
@@ -13,3 +13,6 @@ keyword: BreadcrumbPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/breadcrumb/ng-doc.page.ts b/apps/docs/docs/components/breadcrumb/ng-doc.page.ts
index b7456cf4..ce2e1285 100644
--- a/apps/docs/docs/components/breadcrumb/ng-doc.page.ts
+++ b/apps/docs/docs/components/breadcrumb/ng-doc.page.ts
@@ -1,6 +1,14 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import {
+  flowbiteBreadcrumbContentTheme,
+  flowbiteBreadcrumbItemTheme,
+  flowbiteBreadcrumbTheme,
+} from 'flowbite-angular/breadcrumb';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +21,13 @@ const Breadcrumb: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Breadcrumb', content: toIndentedJson(flowbiteBreadcrumbTheme) },
+      { title: 'Breadcrumb content', content: toIndentedJson(flowbiteBreadcrumbContentTheme) },
+      { title: 'Breadcrumb item', content: toIndentedJson(flowbiteBreadcrumbItemTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Breadcrumb;
diff --git a/apps/docs/docs/components/button/index.md b/apps/docs/docs/components/button/index.md
index 2c0c1d73..88270748 100644
--- a/apps/docs/docs/components/button/index.md
+++ b/apps/docs/docs/components/button/index.md
@@ -85,3 +85,6 @@ keyword: ButtonPage
 ```angular-ts file="./_group.component.ts" group="group" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/button/ng-doc.page.ts b/apps/docs/docs/components/button/ng-doc.page.ts
index 288a4d69..692f19cf 100644
--- a/apps/docs/docs/components/button/ng-doc.page.ts
+++ b/apps/docs/docs/components/button/ng-doc.page.ts
@@ -1,3 +1,5 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 import { FlowbiteDisabledComponent } from './_disabled.component';
@@ -7,6 +9,8 @@ import { FlowbiteOutlineComponent } from './_outline.component';
 import { FlowbitePillComponent } from './_pill.component';
 import { FlowbiteSizeComponent } from './_size.component';
 
+import { flowbiteButtonTheme } from 'flowbite-angular/button';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -25,6 +29,9 @@ const Button: NgDocPage = {
     flowbiteDisabledComponent: FlowbiteDisabledComponent,
     flowbiteGroupComponent: FlowbiteGroupComponent,
   },
+  data: {
+    themes: [{ title: 'Button', content: toIndentedJson(flowbiteButtonTheme) }] satisfies DocThemes,
+  },
 };
 
 export default Button;
diff --git a/apps/docs/docs/components/card/index.md b/apps/docs/docs/components/card/index.md
index abf175a7..4909cfd1 100644
--- a/apps/docs/docs/components/card/index.md
+++ b/apps/docs/docs/components/card/index.md
@@ -13,3 +13,6 @@ keyword: CardPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/card/ng-doc.page.ts b/apps/docs/docs/components/card/ng-doc.page.ts
index ed236931..39b58878 100644
--- a/apps/docs/docs/components/card/ng-doc.page.ts
+++ b/apps/docs/docs/components/card/ng-doc.page.ts
@@ -1,6 +1,14 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import {
+  flowbiteCardContentTheme,
+  flowbiteCardHeaderTheme,
+  flowbiteCardTheme,
+} from 'flowbite-angular/card';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +21,13 @@ const Card: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Card content', content: toIndentedJson(flowbiteCardContentTheme) },
+      { title: 'Card header', content: toIndentedJson(flowbiteCardHeaderTheme) },
+      { title: 'Card', content: toIndentedJson(flowbiteCardTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Card;
diff --git a/apps/docs/docs/components/clipboard/index.md b/apps/docs/docs/components/clipboard/index.md
index badfa253..51143a15 100644
--- a/apps/docs/docs/components/clipboard/index.md
+++ b/apps/docs/docs/components/clipboard/index.md
@@ -13,3 +13,6 @@ keyword: ClipboardPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/clipboard/ng-doc.page.ts b/apps/docs/docs/components/clipboard/ng-doc.page.ts
index 1a5004da..79b9514d 100644
--- a/apps/docs/docs/components/clipboard/ng-doc.page.ts
+++ b/apps/docs/docs/components/clipboard/ng-doc.page.ts
@@ -1,6 +1,10 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import { flowbiteClipboardTheme } from 'flowbite-angular/clipboard';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +17,11 @@ const Clipboard: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Clipboard', content: toIndentedJson(flowbiteClipboardTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Clipboard;
diff --git a/apps/docs/docs/components/dropdown/index.md b/apps/docs/docs/components/dropdown/index.md
index 94b12103..68777ded 100644
--- a/apps/docs/docs/components/dropdown/index.md
+++ b/apps/docs/docs/components/dropdown/index.md
@@ -13,3 +13,6 @@ keyword: DropdownPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/dropdown/ng-doc.page.ts b/apps/docs/docs/components/dropdown/ng-doc.page.ts
index 6db14845..3754f163 100644
--- a/apps/docs/docs/components/dropdown/ng-doc.page.ts
+++ b/apps/docs/docs/components/dropdown/ng-doc.page.ts
@@ -1,6 +1,14 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import {
+  flowbiteDropdownContentTheme,
+  flowbiteDropdownItemTheme,
+  flowbiteDropdownTheme,
+} from 'flowbite-angular/dropdown';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +21,13 @@ const Dropdown: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Dropdown content', content: toIndentedJson(flowbiteDropdownContentTheme) },
+      { title: 'Dropdown item', content: toIndentedJson(flowbiteDropdownItemTheme) },
+      { title: 'Dropdown', content: toIndentedJson(flowbiteDropdownTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Dropdown;
diff --git a/apps/docs/docs/components/icon/index.md b/apps/docs/docs/components/icon/index.md
index 60e733d1..0ca1bddb 100644
--- a/apps/docs/docs/components/icon/index.md
+++ b/apps/docs/docs/components/icon/index.md
@@ -13,3 +13,6 @@ keyword: IconPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/icon/ng-doc.page.ts b/apps/docs/docs/components/icon/ng-doc.page.ts
index 16c561e4..7f9d3f94 100644
--- a/apps/docs/docs/components/icon/ng-doc.page.ts
+++ b/apps/docs/docs/components/icon/ng-doc.page.ts
@@ -1,6 +1,10 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import { flowbiteIconTheme } from 'flowbite-angular/icon';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +17,9 @@ const Icon: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [{ title: 'Icon', content: toIndentedJson(flowbiteIconTheme) }] satisfies DocThemes,
+  },
 };
 
 export default Icon;
diff --git a/apps/docs/docs/components/indicator/index.md b/apps/docs/docs/components/indicator/index.md
index e588075f..7d31966b 100644
--- a/apps/docs/docs/components/indicator/index.md
+++ b/apps/docs/docs/components/indicator/index.md
@@ -13,3 +13,6 @@ keyword: IndicatorPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/indicator/ng-doc.page.ts b/apps/docs/docs/components/indicator/ng-doc.page.ts
index f661017a..a0fb9735 100644
--- a/apps/docs/docs/components/indicator/ng-doc.page.ts
+++ b/apps/docs/docs/components/indicator/ng-doc.page.ts
@@ -1,6 +1,10 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import { flowbiteIndicatorTheme } from 'flowbite-angular/indicator';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +17,11 @@ const Indicator: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Indicator', content: toIndentedJson(flowbiteIndicatorTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Indicator;
diff --git a/apps/docs/docs/components/input/index.md b/apps/docs/docs/components/input/index.md
index c3fcdae3..8534d8bb 100644
--- a/apps/docs/docs/components/input/index.md
+++ b/apps/docs/docs/components/input/index.md
@@ -13,3 +13,6 @@ keyword: InputFieldPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/input/ng-doc.page.ts b/apps/docs/docs/components/input/ng-doc.page.ts
index f6fad599..1e1e2d6f 100644
--- a/apps/docs/docs/components/input/ng-doc.page.ts
+++ b/apps/docs/docs/components/input/ng-doc.page.ts
@@ -1,6 +1,15 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import {
+  flowbiteFormControlTheme,
+  flowbiteFormFieldTheme,
+  flowbiteHelperTheme,
+  flowbiteLabelTheme,
+} from 'flowbite-angular/form';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +22,14 @@ const Input: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Form control', content: toIndentedJson(flowbiteFormControlTheme) },
+      { title: 'Form field', content: toIndentedJson(flowbiteFormFieldTheme) },
+      { title: 'Helper', content: toIndentedJson(flowbiteHelperTheme) },
+      { title: 'Label', content: toIndentedJson(flowbiteLabelTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Input;
diff --git a/apps/docs/docs/components/modal/index.md b/apps/docs/docs/components/modal/index.md
index 947e4e3b..cccdfe66 100644
--- a/apps/docs/docs/components/modal/index.md
+++ b/apps/docs/docs/components/modal/index.md
@@ -37,3 +37,6 @@ keyword: ModalPage
 ```angular-ts file="./_position.component.ts" group="position" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/modal/ng-doc.page.ts b/apps/docs/docs/components/modal/ng-doc.page.ts
index a158b57d..da6b4f24 100644
--- a/apps/docs/docs/components/modal/ng-doc.page.ts
+++ b/apps/docs/docs/components/modal/ng-doc.page.ts
@@ -1,8 +1,18 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 import { FlowbiteOpenprogramaticallyComponent } from './_open-programatically.component';
 import { FlowbitePositionComponent } from './_position.component';
 
+import {
+  flowbiteModalContentTheme,
+  flowbiteModalFooterTheme,
+  flowbiteModalHeaderTheme,
+  flowbiteModalOverlayTheme,
+  flowbiteModalTheme,
+} from 'flowbite-angular/modal';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -17,6 +27,15 @@ const Modal: NgDocPage = {
     flowbiteOpenprogramaticallyComponent: FlowbiteOpenprogramaticallyComponent,
     flowbitePositionComponent: FlowbitePositionComponent,
   },
+  data: {
+    themes: [
+      { title: 'Modal content', content: toIndentedJson(flowbiteModalContentTheme) },
+      { title: 'Modal footer', content: toIndentedJson(flowbiteModalFooterTheme) },
+      { title: 'Modal header', content: toIndentedJson(flowbiteModalHeaderTheme) },
+      { title: 'Modal overlay', content: toIndentedJson(flowbiteModalOverlayTheme) },
+      { title: 'Modal', content: toIndentedJson(flowbiteModalTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Modal;
diff --git a/apps/docs/docs/components/navbar/index.md b/apps/docs/docs/components/navbar/index.md
index ab272d74..113adea5 100644
--- a/apps/docs/docs/components/navbar/index.md
+++ b/apps/docs/docs/components/navbar/index.md
@@ -13,3 +13,6 @@ keyword: NavbarPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/navbar/ng-doc.page.ts b/apps/docs/docs/components/navbar/ng-doc.page.ts
index 1672b4df..8c10608f 100644
--- a/apps/docs/docs/components/navbar/ng-doc.page.ts
+++ b/apps/docs/docs/components/navbar/ng-doc.page.ts
@@ -1,6 +1,17 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import {
+  flowbiteNavbarBrandTheme,
+  flowbiteNavbarContentTheme,
+  flowbiteNavbarIconItemTheme,
+  flowbiteNavbarItemTheme,
+  flowbiteNavbarTheme,
+  flowbiteNavbarToggleTheme,
+} from 'flowbite-angular/navbar';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +24,16 @@ const Navbar: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Navbar brand', content: toIndentedJson(flowbiteNavbarBrandTheme) },
+      { title: 'Navbar content', content: toIndentedJson(flowbiteNavbarContentTheme) },
+      { title: 'Navbar icon item', content: toIndentedJson(flowbiteNavbarIconItemTheme) },
+      { title: 'Navbar item', content: toIndentedJson(flowbiteNavbarItemTheme) },
+      { title: 'Navbar', content: toIndentedJson(flowbiteNavbarTheme) },
+      { title: 'Navbar toggle', content: toIndentedJson(flowbiteNavbarToggleTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Navbar;
diff --git a/apps/docs/docs/components/pagination/index.md b/apps/docs/docs/components/pagination/index.md
index 06fa8c95..394bb1f2 100644
--- a/apps/docs/docs/components/pagination/index.md
+++ b/apps/docs/docs/components/pagination/index.md
@@ -13,3 +13,6 @@ keyword: PaginationPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/pagination/ng-doc.page.ts b/apps/docs/docs/components/pagination/ng-doc.page.ts
index 4b9a8bd4..a1c9c353 100644
--- a/apps/docs/docs/components/pagination/ng-doc.page.ts
+++ b/apps/docs/docs/components/pagination/ng-doc.page.ts
@@ -1,6 +1,17 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import {
+  flowbitePaginationButtonTheme,
+  flowbitePaginationFirstTheme,
+  flowbitePaginationLastTheme,
+  flowbitePaginationNextTheme,
+  flowbitePaginationPreviousTheme,
+  flowbitePaginationTheme,
+} from 'flowbite-angular/pagination';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +24,16 @@ const Pagination: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Pagination button', content: toIndentedJson(flowbitePaginationButtonTheme) },
+      { title: 'Pagination first', content: toIndentedJson(flowbitePaginationFirstTheme) },
+      { title: 'Pagination last', content: toIndentedJson(flowbitePaginationLastTheme) },
+      { title: 'Pagination next', content: toIndentedJson(flowbitePaginationNextTheme) },
+      { title: 'Pagination previous', content: toIndentedJson(flowbitePaginationPreviousTheme) },
+      { title: 'Pagination', content: toIndentedJson(flowbitePaginationTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Pagination;
diff --git a/apps/docs/docs/components/sidebar/index.md b/apps/docs/docs/components/sidebar/index.md
index 8f8d5995..0c4cd733 100644
--- a/apps/docs/docs/components/sidebar/index.md
+++ b/apps/docs/docs/components/sidebar/index.md
@@ -13,3 +13,6 @@ keyword: SidebarPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/sidebar/ng-doc.page.ts b/apps/docs/docs/components/sidebar/ng-doc.page.ts
index 4fc29ef4..b132eab4 100644
--- a/apps/docs/docs/components/sidebar/ng-doc.page.ts
+++ b/apps/docs/docs/components/sidebar/ng-doc.page.ts
@@ -1,6 +1,15 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import {
+  flowbiteSidebarContentTheme,
+  flowbiteSidebarItemTheme,
+  flowbiteSidebarTheme,
+  flowbiteSidebarToggleTheme,
+} from 'flowbite-angular/sidebar';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +22,14 @@ const Sidebar: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Sidebar content', content: toIndentedJson(flowbiteSidebarContentTheme) },
+      { title: 'Sidebar item', content: toIndentedJson(flowbiteSidebarItemTheme) },
+      { title: 'Sidebar', content: toIndentedJson(flowbiteSidebarTheme) },
+      { title: 'Sidebar toggle', content: toIndentedJson(flowbiteSidebarToggleTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Sidebar;
diff --git a/apps/docs/docs/components/tab/index.md b/apps/docs/docs/components/tab/index.md
index 05f57589..839e6245 100644
--- a/apps/docs/docs/components/tab/index.md
+++ b/apps/docs/docs/components/tab/index.md
@@ -13,3 +13,6 @@ keyword: TabPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/tab/ng-doc.page.ts b/apps/docs/docs/components/tab/ng-doc.page.ts
index 47b823a2..398ab9b1 100644
--- a/apps/docs/docs/components/tab/ng-doc.page.ts
+++ b/apps/docs/docs/components/tab/ng-doc.page.ts
@@ -1,6 +1,15 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import {
+  flowbiteTabButtonTheme,
+  flowbiteTabContentTheme,
+  flowbiteTabListTheme,
+  flowbiteTabTheme,
+} from 'flowbite-angular/tab';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +22,14 @@ const Tab: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Tab button', content: toIndentedJson(flowbiteTabButtonTheme) },
+      { title: 'Tab content', content: toIndentedJson(flowbiteTabContentTheme) },
+      { title: 'Tab list', content: toIndentedJson(flowbiteTabListTheme) },
+      { title: 'Tab', content: toIndentedJson(flowbiteTabTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Tab;
diff --git a/apps/docs/docs/components/tooltip/index.md b/apps/docs/docs/components/tooltip/index.md
index e27d8f95..e8f1f27e 100644
--- a/apps/docs/docs/components/tooltip/index.md
+++ b/apps/docs/docs/components/tooltip/index.md
@@ -13,3 +13,6 @@ keyword: TooltipPage
 ```angular-ts file="./_default.component.ts" group="default" name="typescript"
 
 ```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/tooltip/ng-doc.page.ts b/apps/docs/docs/components/tooltip/ng-doc.page.ts
index 3dfe2465..d00cfc57 100644
--- a/apps/docs/docs/components/tooltip/ng-doc.page.ts
+++ b/apps/docs/docs/components/tooltip/ng-doc.page.ts
@@ -1,6 +1,10 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteDefaultComponent } from './_default.component';
 
+import { flowbiteTooltipTheme } from 'flowbite-angular/tooltip';
+
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
@@ -13,6 +17,11 @@ const Tooltip: NgDocPage = {
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
   },
+  data: {
+    themes: [
+      { title: 'Tooltip', content: toIndentedJson(flowbiteTooltipTheme) },
+    ] satisfies DocThemes,
+  },
 };
 
 export default Tooltip;
diff --git a/apps/docs/docs/customize/dark-mode/index.md b/apps/docs/docs/customize/dark-mode/index.md
index a222da21..bb390337 100644
--- a/apps/docs/docs/customize/dark-mode/index.md
+++ b/apps/docs/docs/customize/dark-mode/index.md
@@ -20,9 +20,9 @@ export class AppComponent {
 }
 ```
 
-The configuration needed for tailwind will depend on the type value of FlowbiteThemeDirective. In
-the FlowbiteThemeDirective, you are able to change its behavior. Here is an example of configuration
-to make it use data-attributes :
+The Tailwind configuration depends on the `type` of `Theme`. In `Theme`, you can change its
+behavior.  
+Here is an example configuration to make it rely on data attributes:
 
 ```angular-ts
 provideFlowbiteThemeConfig({
@@ -36,5 +36,5 @@ provideFlowbiteThemeConfig({
 
 ## Get or set theme manually
 
-In order to access or to update the application theme manually, you simply have to inject
-`FlowbiteThemeDirective` into your component and call one of the provided functions.
+To access or update the application theme manually, inject `Theme` into your component and call one
+of its helper functions.
diff --git a/apps/docs/docs/customize/override-base-style/index.md b/apps/docs/docs/customize/override-base-style/index.md
index 66a0ba89..87dee004 100644
--- a/apps/docs/docs/customize/override-base-style/index.md
+++ b/apps/docs/docs/customize/override-base-style/index.md
@@ -7,14 +7,14 @@ keyword: OverrideBaseStylePage
 Each component provide its own configuration method. Configuration methods are named as follow :
 
 <span class="text-xs md:text-base">
-  <ul class="list-disc list-outside">
+  <ul class="list-none list-inside">
     <li>
       provideFlowbite<span class="text-primary-500">Component</span>Config
     </li>
   </ul>
 </span>
 
-You can used them to override the default behavior of components, and the style applied styles.
+You can use them to override the default behavior of components and the applied styles.
 
 ```typescript
 import { provideFlowbiteBaseButtonConfig } from 'flowbite-angular/button';
diff --git a/apps/docs/docs/customize/override-base-style/ng-doc.page.ts b/apps/docs/docs/customize/override-base-style/ng-doc.page.ts
index 5cba3470..7c41599e 100644
--- a/apps/docs/docs/customize/override-base-style/ng-doc.page.ts
+++ b/apps/docs/docs/customize/override-base-style/ng-doc.page.ts
@@ -3,7 +3,7 @@ import CustomizeCategory from '../ng-doc.category';
 import type { NgDocPage } from '@ng-doc/core';
 
 /**
- * Customize flowbite-angular's component style by override their default style.
+ * Customize Flowbite Angular components by overriding their default styles.
  */
 const OverrideBaseStyle: NgDocPage = {
   title: 'Override base style',
diff --git a/apps/docs/docs/customize/use-custom-style/index.md b/apps/docs/docs/customize/use-custom-style/index.md
index 34d19050..b16efede 100644
--- a/apps/docs/docs/customize/use-custom-style/index.md
+++ b/apps/docs/docs/customize/use-custom-style/index.md
@@ -2,15 +2,15 @@
 keyword: UseCustomStylePage
 ---
 
-## Giving customStyle value
+## Passing customTheme values
 
-On each component call, you can give a <span class="docs highlight">customStyle</span> value.
+For each component call, you can pass a <span class="text-primary-500">customTheme</span> value.
 
 ```angular-html
-<div flowbiteAlert [customStyle]='{ root: { base: 'bg-black' } }'>
-    Hello World !
+<div flowbiteAlert [customTheme]="{ root: { base: 'bg-black' } }">
+    Hello World!
 </div>
 ```
 
 You can then pass TailwindCSS classes, following the component's base theme. If one or more keys are
-not filled in the customStyle, then the base style from the component will be used.
+not filled in the customTheme, the component falls back to its base styles.
diff --git a/apps/docs/docs/doc-theme.model.ts b/apps/docs/docs/doc-theme.model.ts
new file mode 100644
index 00000000..89d3f5eb
--- /dev/null
+++ b/apps/docs/docs/doc-theme.model.ts
@@ -0,0 +1,8 @@
+export type DocTheme = { title: string; content: string; description?: string | undefined };
+export type DocThemes = DocTheme[];
+
+export const toIndentedJson = (
+  value: unknown,
+  replacer?: (this: unknown, key: string, value: unknown) => unknown,
+  space: number = 2
+): string => JSON.stringify(value, replacer, space);
diff --git a/apps/docs/docs/ng-doc.api.ts b/apps/docs/docs/ng-doc.api.ts
index a5fdd4ff..d07abf0e 100644
--- a/apps/docs/docs/ng-doc.api.ts
+++ b/apps/docs/docs/ng-doc.api.ts
@@ -21,7 +21,6 @@ const api: NgDocApi = {
         'libs/flowbite-angular/button-group/src/index.ts',
         'libs/flowbite-angular/card/src/index.ts',
         'libs/flowbite-angular/clipboard/src/index.ts',
-        'libs/flowbite-angular/core/src/index.ts',
         'libs/flowbite-angular/dropdown/src/index.ts',
         'libs/flowbite-angular/form/src/index.ts',
         'libs/flowbite-angular/icon/src/index.ts',
diff --git a/apps/docs/docs/shared/theme-macro.md b/apps/docs/docs/shared/theme-macro.md
new file mode 100644
index 00000000..da81868e
--- /dev/null
+++ b/apps/docs/docs/shared/theme-macro.md
@@ -0,0 +1,24 @@
+{% macro display(themes) %}
+
+<div class="border-t border-gray-300 dark:border-gray-600 my-4"></div>
+
+# Themes
+
+{% for theme in themes %}
+
+## {{ theme.title }}
+
+{% if theme.description %}
+
+<!-- prettier-ignore -->
+> **Note**
+> {{ theme.description }}
+
+{% endif %}
+
+<!-- prettier-ignore -->
+```typescript
+{{ theme.content }}
+```
+
+{% endfor %} {% endmacro %}

From 16391316ae79d058416aa12738d31ccb1ce0f37d Mon Sep 17 00:00:00 2001
From: MGREMY <miguel.gremy72+pro@gmail.com>
Date: Sun, 17 Aug 2025 15:45:21 +0200
Subject: [PATCH 2/3] docs: update README

---
 libs/flowbite-angular/README.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/libs/flowbite-angular/README.md b/libs/flowbite-angular/README.md
index 03251216..f958d3ba 100644
--- a/libs/flowbite-angular/README.md
+++ b/libs/flowbite-angular/README.md
@@ -56,13 +56,15 @@ npm i tailwindcss
 2. Install `flowbite-angular` as a dependency using `npm` by running the following command:
 
 ```bash
-npm i flowbite-angular
+npm i flowbite-angular ng-primitives @ng-icons/core
 ```
 
 3. Import `flowbite-angular` inside your `style.css` file:
 
 ```css
-@import 'node_modules/flowbite-angular/styles/flowbite-angular.css';
+@import 'tailwindcss';
+
+@source "node_modules/flowbite-angular";
 ```
 
 # Components

From 3aaf641820e880aba912fb3f574ff6d3254ee3eb Mon Sep 17 00:00:00 2001
From: MGREMY <miguel.gremy72+pro@gmail.com>
Date: Sun, 17 Aug 2025 22:07:46 +0200
Subject: [PATCH 3/3] feat(table): create table component (#137)

* feat(table): create table component
---
 .vscode/settings.json                         |   2 +-
 .../components/table/_default.component.html  |  54 ++++++++
 .../components/table/_default.component.ts    |  18 +++
 apps/docs/docs/components/table/index.md      |  18 +++
 .../docs/docs/components/table/ng-doc.page.ts |  35 +++++
 apps/docs/docs/ng-doc.api.ts                  |   1 +
 apps/storybook/src/table.component.stories.ts | 125 ++++++++++++++++++
 libs/flowbite-angular/table/README.md         |   4 +
 libs/flowbite-angular/table/ng-package.json   |   5 +
 .../table/src/config/table-body-config.ts     |  49 +++++++
 .../table/src/config/table-config.ts          |  57 ++++++++
 .../table/src/config/table-foot-config.ts     |  49 +++++++
 .../table/src/config/table-head-config.ts     |  49 +++++++
 libs/flowbite-angular/table/src/index.ts      |  27 ++++
 .../table/src/table-body/table-body-state.ts  |  13 ++
 .../src/table-body/table-body.directive.ts    |  49 +++++++
 .../table/src/table-body/theme.ts             |  44 ++++++
 .../table/src/table-foot/table-foot-state.ts  |  13 ++
 .../src/table-foot/table-foot.directive.ts    |  46 +++++++
 .../table/src/table-foot/theme.ts             |  44 ++++++
 .../table/src/table-head/table-head-state.ts  |  13 ++
 .../src/table-head/table-head.directive.ts    |  46 +++++++
 .../table/src/table-head/theme.ts             |  44 ++++++
 .../table/src/table/table-state.ts            |  13 ++
 .../table/src/table/table.component.ts        |  84 ++++++++++++
 .../flowbite-angular/table/src/table/theme.ts |  48 +++++++
 .../__fileName__-state.ts.template            |   6 +-
 tsconfig.base.json                            |   1 +
 28 files changed, 953 insertions(+), 4 deletions(-)
 create mode 100644 apps/docs/docs/components/table/_default.component.html
 create mode 100644 apps/docs/docs/components/table/_default.component.ts
 create mode 100644 apps/docs/docs/components/table/index.md
 create mode 100644 apps/docs/docs/components/table/ng-doc.page.ts
 create mode 100644 apps/storybook/src/table.component.stories.ts
 create mode 100644 libs/flowbite-angular/table/README.md
 create mode 100644 libs/flowbite-angular/table/ng-package.json
 create mode 100644 libs/flowbite-angular/table/src/config/table-body-config.ts
 create mode 100644 libs/flowbite-angular/table/src/config/table-config.ts
 create mode 100644 libs/flowbite-angular/table/src/config/table-foot-config.ts
 create mode 100644 libs/flowbite-angular/table/src/config/table-head-config.ts
 create mode 100644 libs/flowbite-angular/table/src/index.ts
 create mode 100644 libs/flowbite-angular/table/src/table-body/table-body-state.ts
 create mode 100644 libs/flowbite-angular/table/src/table-body/table-body.directive.ts
 create mode 100644 libs/flowbite-angular/table/src/table-body/theme.ts
 create mode 100644 libs/flowbite-angular/table/src/table-foot/table-foot-state.ts
 create mode 100644 libs/flowbite-angular/table/src/table-foot/table-foot.directive.ts
 create mode 100644 libs/flowbite-angular/table/src/table-foot/theme.ts
 create mode 100644 libs/flowbite-angular/table/src/table-head/table-head-state.ts
 create mode 100644 libs/flowbite-angular/table/src/table-head/table-head.directive.ts
 create mode 100644 libs/flowbite-angular/table/src/table-head/theme.ts
 create mode 100644 libs/flowbite-angular/table/src/table/table-state.ts
 create mode 100644 libs/flowbite-angular/table/src/table/table.component.ts
 create mode 100644 libs/flowbite-angular/table/src/table/theme.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e4ea8aee..ac8e05f6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,7 +5,7 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "files.eol": "\r\n",
   "editor.formatOnSave": true,
-  "tailwindCSS.experimental.configFile": "libs/flowbite-angular/styles/flowbite-angular.css",
+  "tailwindCSS.experimental.configFile": "apps/docs/public/css/styles.css",
   "tailwindCSS.classAttributes": ["class", "className", "ngClass", "customStyle"],
   "tailwindCSS.classFunctions": ["twMerge", "createTheme"],
   "typescript.tsdk": "node_modules/typescript/lib",
diff --git a/apps/docs/docs/components/table/_default.component.html b/apps/docs/docs/components/table/_default.component.html
new file mode 100644
index 00000000..d0662fc7
--- /dev/null
+++ b/apps/docs/docs/components/table/_default.component.html
@@ -0,0 +1,54 @@
+<table
+  flowbiteTable
+  [tableHead]="tableHeader"
+  [tableBody]="tableBody"
+  [tableFoot]="tableFooter"
+  [data]="data">
+  <ng-template #tableHeader>
+    <tr flowbiteTableHead>
+      <th
+        scope="col"
+        class="rounded-s-lg px-6 py-3">
+        Product name
+      </th>
+      <th
+        scope="col"
+        class="px-6 py-3">
+        Qty
+      </th>
+      <th
+        scope="col"
+        class="rounded-e-lg px-6 py-3">
+        Price
+      </th>
+    </tr>
+  </ng-template>
+  <ng-template
+    #tableBody
+    let-data>
+    <tr flowbiteTableBody>
+      <td
+        scope="row"
+        class="px-6 py-4">
+        {{ data.name }}
+      </td>
+      <td class="px-6 py-4">
+        {{ data.qty }}
+      </td>
+      <td class="px-6 py-4">
+        {{ data.price }}
+      </td>
+    </tr>
+  </ng-template>
+  <ng-template #tableFooter>
+    <tr flowbiteTableFoot>
+      <td
+        scope="row"
+        class="px-6 py-4">
+        Total
+      </td>
+      <td class="px-6 py-4">10</td>
+      <td class="px-6 py-4">30</td>
+    </tr>
+  </ng-template>
+</table>
diff --git a/apps/docs/docs/components/table/_default.component.ts b/apps/docs/docs/components/table/_default.component.ts
new file mode 100644
index 00000000..87261cfe
--- /dev/null
+++ b/apps/docs/docs/components/table/_default.component.ts
@@ -0,0 +1,18 @@
+import { Table, TableBody, TableFoot, TableHead } from 'flowbite-angular/table';
+
+import { Component } from '@angular/core';
+
+@Component({
+  imports: [Table, TableBody, TableFoot, TableHead],
+  templateUrl: './_default.component.html',
+  host: {
+    class: 'flex flex-wrap flex-row gap-3 p-6',
+  },
+})
+export class FlowbiteDefaultComponent {
+  readonly data = Array.from({ length: 5 }, (_, i) => i++).map((x) => ({
+    name: `Product ${x}`,
+    qty: x,
+    price: x * x,
+  }));
+}
diff --git a/apps/docs/docs/components/table/index.md b/apps/docs/docs/components/table/index.md
new file mode 100644
index 00000000..8fbead47
--- /dev/null
+++ b/apps/docs/docs/components/table/index.md
@@ -0,0 +1,18 @@
+---
+keyword: TablePage
+---
+
+## Default Table
+
+{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
+
+```angular-html file="./_default.component.html" group="default" name="html"
+
+```
+
+```angular-ts file="./_default.component.ts" group="default" name="typescript"
+
+```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}
diff --git a/apps/docs/docs/components/table/ng-doc.page.ts b/apps/docs/docs/components/table/ng-doc.page.ts
new file mode 100644
index 00000000..44feb99e
--- /dev/null
+++ b/apps/docs/docs/components/table/ng-doc.page.ts
@@ -0,0 +1,35 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
+import ComponentCategory from '../ng-doc.category';
+import { FlowbiteDefaultComponent } from './_default.component';
+
+import {
+  flowbiteTableBodyTheme,
+  flowbiteTableFootTheme,
+  flowbiteTableHeadTheme,
+  flowbiteTableTheme,
+} from 'flowbite-angular/table';
+
+import type { NgDocPage } from '@ng-doc/core';
+
+/**
+ *
+ */
+const Table: NgDocPage = {
+  title: 'Table',
+  mdFile: './index.md',
+  category: ComponentCategory,
+  demos: {
+    flowbiteDefaultComponent: FlowbiteDefaultComponent,
+  },
+  data: {
+    themes: [
+      { title: 'Table', content: toIndentedJson(flowbiteTableTheme) },
+      { title: 'Table Head', content: toIndentedJson(flowbiteTableHeadTheme) },
+      { title: 'Table Body', content: toIndentedJson(flowbiteTableBodyTheme) },
+      { title: 'Table Foot', content: toIndentedJson(flowbiteTableFootTheme) },
+    ] satisfies DocThemes,
+  },
+};
+
+export default Table;
diff --git a/apps/docs/docs/ng-doc.api.ts b/apps/docs/docs/ng-doc.api.ts
index d07abf0e..312d1223 100644
--- a/apps/docs/docs/ng-doc.api.ts
+++ b/apps/docs/docs/ng-doc.api.ts
@@ -31,6 +31,7 @@ const api: NgDocApi = {
         'libs/flowbite-angular/sidebar/src/index.ts',
         'libs/flowbite-angular/tab/src/index.ts',
         'libs/flowbite-angular/theme-toggle/src/index.ts',
+        'libs/flowbite-angular/table/src/index.ts',
         'libs/flowbite-angular/tooltip/src/index.ts',
       ],
     },
diff --git a/apps/storybook/src/table.component.stories.ts b/apps/storybook/src/table.component.stories.ts
new file mode 100644
index 00000000..6b8f20fb
--- /dev/null
+++ b/apps/storybook/src/table.component.stories.ts
@@ -0,0 +1,125 @@
+import {
+  defaultFlowbiteTableConfig,
+  Table,
+  TableBody,
+  TableFoot,
+  TableHead,
+} from 'flowbite-angular/table';
+
+import type { Meta, StoryObj } from '@storybook/angular';
+import { argsToTemplate, moduleMetadata } from '@storybook/angular';
+
+type StoryType = Table;
+
+export default {
+  title: 'Component/Table',
+  component: Table,
+  decorators: [
+    moduleMetadata({
+      imports: [TableHead, TableBody, TableFoot],
+    }),
+  ],
+  argTypes: {
+    color: {
+      control: 'select',
+      type: 'string',
+      options: ['default', 'info', 'failure', 'success', 'warning', 'primary'],
+      table: {
+        category: 'Input',
+        defaultValue: {
+          summary: JSON.stringify(defaultFlowbiteTableConfig.color),
+        },
+      },
+    },
+    striped: {
+      control: 'boolean',
+      type: 'boolean',
+      table: {
+        category: 'Input',
+        defaultValue: {
+          summary: JSON.stringify(defaultFlowbiteTableConfig.striped),
+        },
+      },
+    },
+    data: {
+      control: 'object',
+      type: 'symbol',
+      table: {
+        category: 'Input',
+        defaultValue: {
+          summary: JSON.stringify([]),
+        },
+      },
+    },
+    customTheme: {
+      control: 'object',
+      type: 'symbol',
+      table: {
+        category: 'Input',
+        defaultValue: {
+          summary: JSON.stringify(defaultFlowbiteTableConfig.customTheme),
+        },
+      },
+    },
+  },
+} as Meta<StoryType>;
+
+export const Default: StoryObj<StoryType> = {
+  name: 'Default',
+  args: {
+    color: defaultFlowbiteTableConfig.color,
+    striped: defaultFlowbiteTableConfig.striped,
+    data: Array.from({ length: 5 }, (_, i) => i++).map((x) => ({
+      name: `Product ${x}`,
+      qty: x,
+      price: x * x,
+    })),
+    customTheme: defaultFlowbiteTableConfig.customTheme,
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <table flowbiteTable [tableHead]="tableHeader" [tableBody]="tableBody" [tableFoot]="tableFooter" ${argsToTemplate(args)}>
+        <ng-template #tableHeader>
+          <tr flowbiteTableHead>
+            <th scope="col" class="px-6 py-3 rounded-s-lg">
+                Product name
+            </th>
+            <th scope="col" class="px-6 py-3">
+                Qty
+            </th>
+            <th scope="col" class="px-6 py-3 rounded-e-lg">
+                Price
+            </th>
+          </tr>
+        </ng-template>
+        <ng-template #tableBody let-data>
+          <tr flowbiteTableBody>
+            <td scope="row" class="px-6 py-4">
+              {{ data.name }}
+            </td>
+            <td class="px-6 py-4">
+                {{ data.qty }}
+            </td>
+            <td class="px-6 py-4">
+                {{ data.price }}
+            </td>
+          </tr>
+        </ng-template>
+        <ng-template #tableFooter>
+          <tr flowbiteTableFoot>
+            <td scope="row" class="px-6 py-4">
+              Total
+            </td>
+            <td class="px-6 py-4">
+                10
+            </td>
+            <td class="px-6 py-4">
+                30
+            </td>
+          </tr>
+        </ng-template>
+      </table>
+    `,
+  }),
+};
diff --git a/libs/flowbite-angular/table/README.md b/libs/flowbite-angular/table/README.md
new file mode 100644
index 00000000..b6d036db
--- /dev/null
+++ b/libs/flowbite-angular/table/README.md
@@ -0,0 +1,4 @@
+# flowbite-angular/table
+
+Secondary entry point of `flowbite-angular`. It can be used by importing from
+`flowbite-angular/table`.
diff --git a/libs/flowbite-angular/table/ng-package.json b/libs/flowbite-angular/table/ng-package.json
new file mode 100644
index 00000000..c781f0df
--- /dev/null
+++ b/libs/flowbite-angular/table/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}
diff --git a/libs/flowbite-angular/table/src/config/table-body-config.ts b/libs/flowbite-angular/table/src/config/table-body-config.ts
new file mode 100644
index 00000000..a43c3260
--- /dev/null
+++ b/libs/flowbite-angular/table/src/config/table-body-config.ts
@@ -0,0 +1,49 @@
+import { flowbiteTableBodyTheme, type FlowbiteTableBodyTheme } from '../table-body/theme';
+
+import type { DeepPartial } from 'flowbite-angular';
+
+import type { Provider } from '@angular/core';
+import { inject, InjectionToken } from '@angular/core';
+
+export interface FlowbiteTableBodyConfig {
+  /**
+   * The default theme of table-body
+   */
+  baseTheme: FlowbiteTableBodyTheme;
+
+  /**
+   * The custom theme of table-body
+   */
+  customTheme: DeepPartial<FlowbiteTableBodyTheme>;
+}
+
+export const defaultFlowbiteTableBodyConfig: FlowbiteTableBodyConfig = {
+  baseTheme: flowbiteTableBodyTheme,
+  customTheme: {},
+};
+
+export const FlowbiteTableBodyConfigToken = new InjectionToken<FlowbiteTableBodyConfig>(
+  'FlowbiteTableBodyConfigToken'
+);
+
+/**
+ * Provide the default TableBody configuration
+ * @param config The TableBody configuration
+ * @returns The provider
+ */
+export const provideFlowbiteTableBodyConfig = (
+  config: Partial<FlowbiteTableBodyConfig>
+): Provider[] => [
+  {
+    provide: FlowbiteTableBodyConfigToken,
+    useValue: { ...defaultFlowbiteTableBodyConfig, ...config },
+  },
+];
+
+/**
+ * Inject the TableBody configuration
+ * @see {@link defaultFlowbiteTableBodyConfig}
+ * @returns The configuration
+ */
+export const injectFlowbiteTableBodyConfig = (): FlowbiteTableBodyConfig =>
+  inject(FlowbiteTableBodyConfigToken, { optional: true }) ?? defaultFlowbiteTableBodyConfig;
diff --git a/libs/flowbite-angular/table/src/config/table-config.ts b/libs/flowbite-angular/table/src/config/table-config.ts
new file mode 100644
index 00000000..5ad1274d
--- /dev/null
+++ b/libs/flowbite-angular/table/src/config/table-config.ts
@@ -0,0 +1,57 @@
+import type { FlowbiteTableColors } from '../table/theme';
+import { flowbiteTableTheme, type FlowbiteTableTheme } from '../table/theme';
+
+import type { DeepPartial } from 'flowbite-angular';
+
+import type { Provider } from '@angular/core';
+import { inject, InjectionToken } from '@angular/core';
+
+export interface FlowbiteTableConfig {
+  /**
+   * The default theme of table
+   */
+  baseTheme: FlowbiteTableTheme;
+  /**
+   * The default color of table.
+   */
+  color: keyof FlowbiteTableColors;
+  /**
+   * Whether the table is striped.
+   */
+  striped: boolean;
+  /**
+   * The custom theme of table
+   */
+  customTheme: DeepPartial<FlowbiteTableTheme>;
+}
+
+export const defaultFlowbiteTableConfig: FlowbiteTableConfig = {
+  baseTheme: flowbiteTableTheme,
+  color: 'default',
+  striped: false,
+  customTheme: {},
+};
+
+export const FlowbiteTableConfigToken = new InjectionToken<FlowbiteTableConfig>(
+  'FlowbiteTableConfigToken'
+);
+
+/**
+ * Provide the default Table configuration
+ * @param config The Table configuration
+ * @returns The provider
+ */
+export const provideFlowbiteTableConfig = (config: Partial<FlowbiteTableConfig>): Provider[] => [
+  {
+    provide: FlowbiteTableConfigToken,
+    useValue: { ...defaultFlowbiteTableConfig, ...config },
+  },
+];
+
+/**
+ * Inject the Table configuration
+ * @see {@link defaultFlowbiteTableConfig}
+ * @returns The configuration
+ */
+export const injectFlowbiteTableConfig = (): FlowbiteTableConfig =>
+  inject(FlowbiteTableConfigToken, { optional: true }) ?? defaultFlowbiteTableConfig;
diff --git a/libs/flowbite-angular/table/src/config/table-foot-config.ts b/libs/flowbite-angular/table/src/config/table-foot-config.ts
new file mode 100644
index 00000000..49f314dc
--- /dev/null
+++ b/libs/flowbite-angular/table/src/config/table-foot-config.ts
@@ -0,0 +1,49 @@
+import { flowbiteTableFootTheme, type FlowbiteTableFootTheme } from '../table-foot/theme';
+
+import type { DeepPartial } from 'flowbite-angular';
+
+import type { Provider } from '@angular/core';
+import { inject, InjectionToken } from '@angular/core';
+
+export interface FlowbiteTableFootConfig {
+  /**
+   * The default theme of table-foot
+   */
+  baseTheme: FlowbiteTableFootTheme;
+
+  /**
+   * The custom theme of table-foot
+   */
+  customTheme: DeepPartial<FlowbiteTableFootTheme>;
+}
+
+export const defaultFlowbiteTableFootConfig: FlowbiteTableFootConfig = {
+  baseTheme: flowbiteTableFootTheme,
+  customTheme: {},
+};
+
+export const FlowbiteTableFootConfigToken = new InjectionToken<FlowbiteTableFootConfig>(
+  'FlowbiteTableFootConfigToken'
+);
+
+/**
+ * Provide the default TableFoot configuration
+ * @param config The TableFoot configuration
+ * @returns The provider
+ */
+export const provideFlowbiteTableFootConfig = (
+  config: Partial<FlowbiteTableFootConfig>
+): Provider[] => [
+  {
+    provide: FlowbiteTableFootConfigToken,
+    useValue: { ...defaultFlowbiteTableFootConfig, ...config },
+  },
+];
+
+/**
+ * Inject the TableFoot configuration
+ * @see {@link defaultFlowbiteTableFootConfig}
+ * @returns The configuration
+ */
+export const injectFlowbiteTableFootConfig = (): FlowbiteTableFootConfig =>
+  inject(FlowbiteTableFootConfigToken, { optional: true }) ?? defaultFlowbiteTableFootConfig;
diff --git a/libs/flowbite-angular/table/src/config/table-head-config.ts b/libs/flowbite-angular/table/src/config/table-head-config.ts
new file mode 100644
index 00000000..2866fb4f
--- /dev/null
+++ b/libs/flowbite-angular/table/src/config/table-head-config.ts
@@ -0,0 +1,49 @@
+import { flowbiteTableHeadTheme, type FlowbiteTableHeadTheme } from '../table-head/theme';
+
+import type { DeepPartial } from 'flowbite-angular';
+
+import type { Provider } from '@angular/core';
+import { inject, InjectionToken } from '@angular/core';
+
+export interface FlowbiteTableHeadConfig {
+  /**
+   * The default theme of table-head
+   */
+  baseTheme: FlowbiteTableHeadTheme;
+
+  /**
+   * The custom theme of table-head
+   */
+  customTheme: DeepPartial<FlowbiteTableHeadTheme>;
+}
+
+export const defaultFlowbiteTableHeadConfig: FlowbiteTableHeadConfig = {
+  baseTheme: flowbiteTableHeadTheme,
+  customTheme: {},
+};
+
+export const FlowbiteTableHeadConfigToken = new InjectionToken<FlowbiteTableHeadConfig>(
+  'FlowbiteTableHeadConfigToken'
+);
+
+/**
+ * Provide the default TableHead configuration
+ * @param config The TableHead configuration
+ * @returns The provider
+ */
+export const provideFlowbiteTableHeadConfig = (
+  config: Partial<FlowbiteTableHeadConfig>
+): Provider[] => [
+  {
+    provide: FlowbiteTableHeadConfigToken,
+    useValue: { ...defaultFlowbiteTableHeadConfig, ...config },
+  },
+];
+
+/**
+ * Inject the TableHead configuration
+ * @see {@link defaultFlowbiteTableHeadConfig}
+ * @returns The configuration
+ */
+export const injectFlowbiteTableHeadConfig = (): FlowbiteTableHeadConfig =>
+  inject(FlowbiteTableHeadConfigToken, { optional: true }) ?? defaultFlowbiteTableHeadConfig;
diff --git a/libs/flowbite-angular/table/src/index.ts b/libs/flowbite-angular/table/src/index.ts
new file mode 100644
index 00000000..a055263f
--- /dev/null
+++ b/libs/flowbite-angular/table/src/index.ts
@@ -0,0 +1,27 @@
+/* Table */
+export * from './table/table.component';
+export * from './table/table-state';
+export * from './table/theme';
+/* Config */
+export * from './config/table-config';
+
+/* TableHead */
+export * from './table-head/table-head.directive';
+export * from './table-head/table-head-state';
+export * from './table-head/theme';
+/* Config */
+export * from './config/table-head-config';
+
+/* TableBody */
+export * from './table-body/table-body.directive';
+export * from './table-body/table-body-state';
+export * from './table-body/theme';
+/* Config */
+export * from './config/table-body-config';
+
+/* TableFoot */
+export * from './table-foot/table-foot.directive';
+export * from './table-foot/table-foot-state';
+export * from './table-foot/theme';
+/* Config */
+export * from './config/table-foot-config';
diff --git a/libs/flowbite-angular/table/src/table-body/table-body-state.ts b/libs/flowbite-angular/table/src/table-body/table-body-state.ts
new file mode 100644
index 00000000..82bd1c4d
--- /dev/null
+++ b/libs/flowbite-angular/table/src/table-body/table-body-state.ts
@@ -0,0 +1,13 @@
+import type { TableBody } from './table-body.directive';
+
+import {
+  createState,
+  createStateInjector,
+  createStateProvider,
+  createStateToken,
+} from 'ng-primitives/state';
+
+export const FlowbiteTableBodyStateToken = createStateToken<TableBody>('Flowbite TableBody');
+export const provideFlowbiteTableBodyState = createStateProvider(FlowbiteTableBodyStateToken);
+export const injectFlowbiteTableBodyState = createStateInjector(FlowbiteTableBodyStateToken);
+export const flowbiteTableBodyState = createState(FlowbiteTableBodyStateToken);
diff --git a/libs/flowbite-angular/table/src/table-body/table-body.directive.ts b/libs/flowbite-angular/table/src/table-body/table-body.directive.ts
new file mode 100644
index 00000000..0bda2caa
--- /dev/null
+++ b/libs/flowbite-angular/table/src/table-body/table-body.directive.ts
@@ -0,0 +1,49 @@
+import { injectFlowbiteTableBodyConfig } from '../config/table-body-config';
+import { injectFlowbiteTableState } from '../table/table-state';
+import { flowbiteTableBodyState, provideFlowbiteTableBodyState } from './table-body-state';
+
+import { colorToTheme, mergeDeep } from 'flowbite-angular';
+
+import { computed, Directive, input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+
+@Directive({
+  standalone: true,
+  selector: `
+    tr[flowbiteTableBody]
+  `,
+  exportAs: 'flowbiteTableBody',
+  hostDirectives: [],
+  providers: [provideFlowbiteTableBodyState()],
+  host: {
+    '[class]': `theme().host.root`,
+    '[attr.data-striped]': 'tableState().striped() || undefined',
+  },
+})
+export class TableBody {
+  readonly config = injectFlowbiteTableBodyConfig();
+  readonly tableState = injectFlowbiteTableState();
+
+  /**
+   * @see {@link injectFlowbiteTableBodyConfig}
+   */
+  readonly customTheme = input(this.config.customTheme);
+
+  readonly theme = computed(() => {
+    const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+
+    return {
+      host: {
+        root: twMerge(
+          mergedTheme.host.base,
+          colorToTheme(mergedTheme.host.color, this.tableState().color())
+        ),
+      },
+    };
+  });
+
+  /**
+   * @internal
+   */
+  readonly state = flowbiteTableBodyState<TableBody>(this);
+}
diff --git a/libs/flowbite-angular/table/src/table-body/theme.ts b/libs/flowbite-angular/table/src/table-body/theme.ts
new file mode 100644
index 00000000..7d4d0409
--- /dev/null
+++ b/libs/flowbite-angular/table/src/table-body/theme.ts
@@ -0,0 +1,44 @@
+import type { FlowbiteTableColors } from '../table/theme';
+
+import { createTheme } from 'flowbite-angular';
+
+export interface FlowbiteTableBodyTheme {
+  host: FlowbiteTableBodyHostTheme;
+}
+
+export interface FlowbiteTableBodyHostTheme {
+  base: string;
+  color: FlowbiteTableColors;
+}
+
+export const flowbiteTableBodyTheme: FlowbiteTableBodyTheme = createTheme({
+  host: {
+    base: 'border-b',
+    color: {
+      default: {
+        light: 'border-gray-200 data-striped:odd:bg-white data-striped:even:bg-gray-50',
+        dark: 'dark:border-gray-700 data-striped:odd:dark:bg-gray-900 data-striped:even:dark:bg-gray-800',
+      },
+      info: {
+        light: 'border-blue-200 data-striped:odd:bg-white data-striped:even:bg-blue-50',
+        dark: 'dark:border-blue-900 data-striped:odd:dark:bg-blue-950 data-striped:even:dark:bg-blue-900',
+      },
+      failure: {
+        light: 'border-red-200 data-striped:odd:bg-white data-striped:even:bg-red-50',
+        dark: 'dark:border-red-900 data-striped:odd:dark:bg-red-950 data-striped:even:dark:bg-red-900',
+      },
+      success: {
+        light: 'border-green-200 data-striped:odd:bg-white data-striped:even:bg-green-50',
+        dark: 'dark:border-green-900 data-striped:odd:dark:bg-green-950 data-striped:even:dark:bg-green-900',
+      },
+      warning: {
+        light: 'border-yellow-200 data-striped:odd:bg-white data-striped:even:bg-yellow-50',
+        dark: 'dark:border-yellow-900 data-striped:odd:dark:bg-yellow-950 data-striped:even:dark:bg-yellow-900',
+      },
+      primary: {
+        light: 'border-primary-200 data-striped:even:bg-primary-50 data-striped:odd:bg-white',
+        dark: 'dark:border-primary-900 data-striped:odd:dark:bg-primary-950 data-striped:even:dark:bg-primary-900',
+      },
+    },
+  },
+});
diff --git a/libs/flowbite-angular/table/src/table-foot/table-foot-state.ts b/libs/flowbite-angular/table/src/table-foot/table-foot-state.ts
new file mode 100644
index 00000000..1b4ce09e
--- /dev/null
+++ b/libs/flowbite-angular/table/src/table-foot/table-foot-state.ts
@@ -0,0 +1,13 @@
+import type { TableFoot } from './table-foot.directive';
+
+import {
+  createState,
+  createStateInjector,
+  createStateProvider,
+  createStateToken,
+} from 'ng-primitives/state';
+
+export const FlowbiteTableFootStateToken = createStateToken<TableFoot>('Flowbite TableFoot');
+export const provideFlowbiteTableFootState = createStateProvider(FlowbiteTableFootStateToken);
+export const injectFlowbiteTableFootState = createStateInjector(FlowbiteTableFootStateToken);
+export const flowbiteTableFootState = createState(FlowbiteTableFootStateToken);
diff --git a/libs/flowbite-angular/table/src/table-foot/table-foot.directive.ts b/libs/flowbite-angular/table/src/table-foot/table-foot.directive.ts
new file mode 100644
index 00000000..006375e2
--- /dev/null
+++ b/libs/flowbite-angular/table/src/table-foot/table-foot.directive.ts
@@ -0,0 +1,46 @@
+import { injectFlowbiteTableFootConfig } from '../config/table-foot-config';
+import { injectFlowbiteTableState } from '../table/table-state';
+import { flowbiteTableFootState, provideFlowbiteTableFootState } from './table-foot-state';
+
+import { colorToTheme, mergeDeep } from 'flowbite-angular';
+
+import { computed, Directive, input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+
+@Directive({
+  standalone: true,
+  selector: `
+    tr[flowbiteTableFoot]
+  `,
+  exportAs: 'flowbiteTableFoot',
+  hostDirectives: [],
+  providers: [provideFlowbiteTableFootState()],
+  host: { '[class]': `theme().host.root` },
+})
+export class TableFoot {
+  readonly config = injectFlowbiteTableFootConfig();
+  readonly tableState = injectFlowbiteTableState();
+
+  /**
+   * @see {@link injectFlowbiteTableFootConfig}
+   */
+  readonly customTheme = input(this.config.customTheme);
+
+  readonly theme = computed(() => {
+    const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+
+    return {
+      host: {
+        root: twMerge(
+          mergedTheme.host.base,
+          colorToTheme(mergedTheme.host.color, this.tableState().color())
+        ),
+      },
+    };
+  });
+
+  /**
+   * @internal
+   */
+  readonly state = flowbiteTableFootState<TableFoot>(this);
+}
diff --git a/libs/flowbite-angular/table/src/table-foot/theme.ts b/libs/flowbite-angular/table/src/table-foot/theme.ts
new file mode 100644
index 00000000..a254aea4
--- /dev/null
+++ b/libs/flowbite-angular/table/src/table-foot/theme.ts
@@ -0,0 +1,44 @@
+import type { FlowbiteTableColors } from '../table/theme';
+
+import { createTheme } from 'flowbite-angular';
+
+export interface FlowbiteTableFootTheme {
+  host: FlowbiteTableFootHostTheme;
+}
+
+export interface FlowbiteTableFootHostTheme {
+  base: string;
+  color: FlowbiteTableColors;
+}
+
+export const flowbiteTableFootTheme: FlowbiteTableFootTheme = createTheme({
+  host: {
+    base: 'font-semibold',
+    color: {
+      default: {
+        light: 'text-gray-900',
+        dark: 'dark:text-white',
+      },
+      info: {
+        light: 'text-gray-900',
+        dark: 'dark:text-white',
+      },
+      failure: {
+        light: 'text-gray-900',
+        dark: 'dark:text-white',
+      },
+      success: {
+        light: 'text-gray-900',
+        dark: 'dark:text-white',
+      },
+      warning: {
+        light: 'text-gray-900',
+        dark: 'dark:text-white',
+      },
+      primary: {
+        light: 'text-gray-900',
+        dark: 'dark:text-white',
+      },
+    },
+  },
+});
diff --git a/libs/flowbite-angular/table/src/table-head/table-head-state.ts b/libs/flowbite-angular/table/src/table-head/table-head-state.ts
new file mode 100644
index 00000000..a36f9287
--- /dev/null
+++ b/libs/flowbite-angular/table/src/table-head/table-head-state.ts
@@ -0,0 +1,13 @@
+import type { TableHead } from './table-head.directive';
+
+import {
+  createState,
+  createStateInjector,
+  createStateProvider,
+  createStateToken,
+} from 'ng-primitives/state';
+
+export const FlowbiteTableHeadStateToken = createStateToken<TableHead>('Flowbite TableHead');
+export const provideFlowbiteTableHeadState = createStateProvider(FlowbiteTableHeadStateToken);
+export const injectFlowbiteTableHeadState = createStateInjector(FlowbiteTableHeadStateToken);
+export const flowbiteTableHeadState = createState(FlowbiteTableHeadStateToken);
diff --git a/libs/flowbite-angular/table/src/table-head/table-head.directive.ts b/libs/flowbite-angular/table/src/table-head/table-head.directive.ts
new file mode 100644
index 00000000..308890b7
--- /dev/null
+++ b/libs/flowbite-angular/table/src/table-head/table-head.directive.ts
@@ -0,0 +1,46 @@
+import { injectFlowbiteTableHeadConfig } from '../config/table-head-config';
+import { injectFlowbiteTableState } from '../table/table-state';
+import { flowbiteTableHeadState, provideFlowbiteTableHeadState } from './table-head-state';
+
+import { colorToTheme, mergeDeep } from 'flowbite-angular';
+
+import { computed, Directive, input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+
+@Directive({
+  standalone: true,
+  selector: `
+    tr[flowbiteTableHead]
+  `,
+  exportAs: 'flowbiteTableHead',
+  hostDirectives: [],
+  providers: [provideFlowbiteTableHeadState()],
+  host: { '[class]': `theme().host.root` },
+})
+export class TableHead {
+  readonly config = injectFlowbiteTableHeadConfig();
+  readonly tableState = injectFlowbiteTableState();
+
+  /**
+   * @see {@link injectFlowbiteTableHeadConfig}
+   */
+  readonly customTheme = input(this.config.customTheme);
+
+  readonly theme = computed(() => {
+    const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+
+    return {
+      host: {
+        root: twMerge(
+          mergedTheme.host.base,
+          colorToTheme(mergedTheme.host.color, this.tableState().color())
+        ),
+      },
+    };
+  });
+
+  /**
+   * @internal
+   */
+  readonly state = flowbiteTableHeadState<TableHead>(this);
+}
diff --git a/libs/flowbite-angular/table/src/table-head/theme.ts b/libs/flowbite-angular/table/src/table-head/theme.ts
new file mode 100644
index 00000000..2a6890b9
--- /dev/null
+++ b/libs/flowbite-angular/table/src/table-head/theme.ts
@@ -0,0 +1,44 @@
+import type { FlowbiteTableColors } from '../table/theme';
+
+import { createTheme } from 'flowbite-angular';
+
+export interface FlowbiteTableHeadTheme {
+  host: FlowbiteTableHeadHostTheme;
+}
+
+export interface FlowbiteTableHeadHostTheme {
+  base: string;
+  color: FlowbiteTableColors;
+}
+
+export const flowbiteTableHeadTheme: FlowbiteTableHeadTheme = createTheme({
+  host: {
+    base: 'text-xs uppercase',
+    color: {
+      default: {
+        light: 'bg-gray-50 text-gray-700',
+        dark: 'dark:bg-gray-700 dark:text-gray-400',
+      },
+      info: {
+        light: 'bg-blue-50 text-blue-700',
+        dark: 'dark:bg-blue-700 dark:text-blue-400',
+      },
+      failure: {
+        light: 'bg-red-50 text-red-700',
+        dark: 'dark:bg-red-700 dark:text-red-300',
+      },
+      success: {
+        light: 'bg-green-50 text-green-700',
+        dark: 'dark:bg-green-700 dark:text-green-400',
+      },
+      warning: {
+        light: 'bg-yellow-50 text-yellow-700',
+        dark: 'dark:bg-yellow-700 dark:text-yellow-400',
+      },
+      primary: {
+        light: 'bg-primary-50 text-primary-700',
+        dark: 'dark:bg-primary-700 dark:text-primary-300',
+      },
+    },
+  },
+});
diff --git a/libs/flowbite-angular/table/src/table/table-state.ts b/libs/flowbite-angular/table/src/table/table-state.ts
new file mode 100644
index 00000000..e93f6e56
--- /dev/null
+++ b/libs/flowbite-angular/table/src/table/table-state.ts
@@ -0,0 +1,13 @@
+import type { Table } from './table.component';
+
+import {
+  createState,
+  createStateInjector,
+  createStateProvider,
+  createStateToken,
+} from 'ng-primitives/state';
+
+export const FlowbiteTableStateToken = createStateToken<Table>('Flowbite Table');
+export const provideFlowbiteTableState = createStateProvider(FlowbiteTableStateToken);
+export const injectFlowbiteTableState = createStateInjector(FlowbiteTableStateToken);
+export const flowbiteTableState = createState(FlowbiteTableStateToken);
diff --git a/libs/flowbite-angular/table/src/table/table.component.ts b/libs/flowbite-angular/table/src/table/table.component.ts
new file mode 100644
index 00000000..2c213058
--- /dev/null
+++ b/libs/flowbite-angular/table/src/table/table.component.ts
@@ -0,0 +1,84 @@
+import { injectFlowbiteTableConfig } from '../config/table-config';
+import { flowbiteTableState, provideFlowbiteTableState } from './table-state';
+
+import { colorToTheme, mergeDeep } from 'flowbite-angular';
+
+import { NgTemplateOutlet } from '@angular/common';
+import type { TemplateRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+
+@Component({
+  standalone: true,
+  selector: `
+    table[flowbiteTable]
+  `,
+  exportAs: 'flowbiteTable',
+  hostDirectives: [],
+  imports: [NgTemplateOutlet],
+  providers: [provideFlowbiteTableState()],
+  host: { '[class]': `theme().host.root` },
+  template: `
+    <thead>
+      <ng-container [ngTemplateOutlet]="state.tableHead()" />
+    </thead>
+    <tbody>
+      @for (record of state.data(); track $index) {
+        <ng-container
+          [ngTemplateOutlet]="state.tableBody()"
+          [ngTemplateOutletContext]="{ $implicit: record }" />
+      }
+    </tbody>
+    <tfoot>
+      <ng-container [ngTemplateOutlet]="state.tableFoot()" />
+    </tfoot>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Table {
+  readonly config = injectFlowbiteTableConfig();
+
+  readonly tableHead = input<TemplateRef<unknown>>();
+  readonly tableBody = input<TemplateRef<unknown>>();
+  readonly data = input<unknown[]>();
+  readonly tableFoot = input<TemplateRef<unknown>>();
+
+  /**
+   * @see {@link injectFlowbiteTableConfig}
+   */
+  readonly color = input(this.config.color);
+  /**
+   * @see {@link injectFlowbiteTableConfig}
+   */
+  readonly striped = input(this.config.striped);
+
+  /**
+   * @see {@link injectFlowbiteTableConfig}
+   */
+  readonly customTheme = input(this.config.customTheme);
+
+  readonly theme = computed(() => {
+    const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+
+    return {
+      host: {
+        root: twMerge(
+          mergedTheme.host.base,
+          colorToTheme(mergedTheme.host.color, this.state.color())
+        ),
+      },
+    };
+  });
+
+  /**
+   * @internal
+   */
+  readonly state = flowbiteTableState<Table>(this);
+}
diff --git a/libs/flowbite-angular/table/src/table/theme.ts b/libs/flowbite-angular/table/src/table/theme.ts
new file mode 100644
index 00000000..ab6378db
--- /dev/null
+++ b/libs/flowbite-angular/table/src/table/theme.ts
@@ -0,0 +1,48 @@
+import type { ColorToTheme, FlowbiteColors } from 'flowbite-angular';
+import { createTheme } from 'flowbite-angular';
+
+export interface FlowbiteTableColors
+  extends Pick<FlowbiteColors, 'default' | 'info' | 'failure' | 'success' | 'warning' | 'primary'> {
+  [key: string]: ColorToTheme;
+}
+
+export interface FlowbiteTableTheme {
+  host: FlowbiteTableHostTheme;
+}
+
+export interface FlowbiteTableHostTheme {
+  base: string;
+  color: FlowbiteTableColors;
+}
+
+export const flowbiteTableTheme: FlowbiteTableTheme = createTheme({
+  host: {
+    base: 'w-full text-left text-sm',
+    color: {
+      default: {
+        light: 'text-gray-500',
+        dark: 'dark:text-gray-400',
+      },
+      info: {
+        light: 'text-gray-500',
+        dark: 'dark:text-gray-400',
+      },
+      failure: {
+        light: 'text-gray-500',
+        dark: 'dark:text-gray-400',
+      },
+      success: {
+        light: 'text-gray-500',
+        dark: 'dark:text-gray-400',
+      },
+      warning: {
+        light: 'text-gray-500',
+        dark: 'dark:text-gray-400',
+      },
+      primary: {
+        light: 'text-gray-500',
+        dark: 'dark:text-gray-400',
+      },
+    },
+  },
+});
diff --git a/libs/tools/src/generators/component/files/component/__directoryName__/src/__fileName__/__fileName__-state.ts.template b/libs/tools/src/generators/component/files/component/__directoryName__/src/__fileName__/__fileName__-state.ts.template
index c6e1e21c..56b361ec 100644
--- a/libs/tools/src/generators/component/files/component/__directoryName__/src/__fileName__/__fileName__-state.ts.template
+++ b/libs/tools/src/generators/component/files/component/__directoryName__/src/__fileName__/__fileName__-state.ts.template
@@ -8,6 +8,6 @@ import {
 } from 'ng-primitives/state';
 
 export const Flowbite<%= className %>StateToken = createStateToken<<%= className %>>('Flowbite <%= className %>');
-export const provideFlowbite<%= className %>State = createStateProvider(<%= className %>StateToken);
-export const injectFlowbite<%= className %>State = createStateInjector(<%= className %>StateToken);
-export const flowbite<%= className %>State = createState(<%= className %>StateToken);
+export const provideFlowbite<%= className %>State = createStateProvider(Flowbite<%= className %>StateToken);
+export const injectFlowbite<%= className %>State = createStateInjector(Flowbite<%= className %>StateToken);
+export const flowbite<%= className %>State = createState(Flowbite<%= className %>StateToken);
diff --git a/tsconfig.base.json b/tsconfig.base.json
index d47b1cb9..1e19f5dd 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -88,6 +88,7 @@
       "flowbite-angular/pagination": ["libs/flowbite-angular/pagination/src/index.ts"],
       "flowbite-angular/sidebar": ["libs/flowbite-angular/sidebar/src/index.ts"],
       "flowbite-angular/tab": ["libs/flowbite-angular/tab/src/index.ts"],
+      "flowbite-angular/table": ["libs/flowbite-angular/table/src/index.ts"],
       "flowbite-angular/theme-toggle": ["libs/flowbite-angular/theme-toggle/src/index.ts"],
       "flowbite-angular/tooltip": ["libs/flowbite-angular/tooltip/src/index.ts"]
     }