diff --git a/apps/docs/docs/components/accordion/_always-open.component.html b/apps/docs/docs/components/accordion/_always-open.component.html
index 34bb2fca..36b09024 100644
--- a/apps/docs/docs/components/accordion/_always-open.component.html
+++ b/apps/docs/docs/components/accordion/_always-open.component.html
@@ -2,7 +2,7 @@
   <flowbite-accordion-panel [isOpen]="true">
     <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is an open-source library of interactive components built on top of Tailwind CSS
           including buttons, dropdowns, modals, navbars, and more.
@@ -16,13 +16,13 @@
           </a>
           and start developing websites even faster with components on top of Tailwind CSS.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is first conceptualized and designed using the Figma software so everything you
           see in the library has a design equivalent in our Figma file.
@@ -32,7 +32,7 @@
           <a href="https://flowbite.com/figma/">Figma design system</a>
           based on the utility classes from Tailwind CSS and components from Flowbite.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
@@ -40,7 +40,7 @@
       What are the differences between Flowbite and Tailwind UI ?
     </flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           The main difference is that the core components from Flowbite are open source under the
           MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
@@ -70,7 +70,7 @@
             </a>
           </li>
         </ul>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
 </flowbite-accordion>
diff --git a/apps/docs/docs/components/accordion/_color-option.component.html b/apps/docs/docs/components/accordion/_color-option.component.html
index 70a8b5c4..1b4c3a01 100644
--- a/apps/docs/docs/components/accordion/_color-option.component.html
+++ b/apps/docs/docs/components/accordion/_color-option.component.html
@@ -2,7 +2,7 @@
   <flowbite-accordion-panel [isOpen]="true">
     <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is an open-source library of interactive components built on top of Tailwind CSS
           including buttons, dropdowns, modals, navbars, and more.
@@ -16,13 +16,13 @@
           </a>
           and start developing websites even faster with components on top of Tailwind CSS.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is first conceptualized and designed using the Figma software so everything you
           see in the library has a design equivalent in our Figma file.
@@ -32,7 +32,7 @@
           <a href="https://flowbite.com/figma/">Figma design system</a>
           based on the utility classes from Tailwind CSS and components from Flowbite.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
@@ -40,7 +40,7 @@
       What are the differences between Flowbite and Tailwind UI ?
     </flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           The main difference is that the core components from Flowbite are open source under the
           MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
@@ -70,7 +70,7 @@
             </a>
           </li>
         </ul>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
 </flowbite-accordion>
diff --git a/apps/docs/docs/components/accordion/_default.component.html b/apps/docs/docs/components/accordion/_default.component.html
index e8a49f73..163ca081 100644
--- a/apps/docs/docs/components/accordion/_default.component.html
+++ b/apps/docs/docs/components/accordion/_default.component.html
@@ -2,7 +2,7 @@
   <flowbite-accordion-panel [isOpen]="true">
     <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is an open-source library of interactive components built on top of Tailwind CSS
           including buttons, dropdowns, modals, navbars, and more.
@@ -16,13 +16,13 @@
           </a>
           and start developing websites even faster with components on top of Tailwind CSS.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is first conceptualized and designed using the Figma software so everything you
           see in the library has a design equivalent in our Figma file.
@@ -32,7 +32,7 @@
           <a href="https://flowbite.com/figma/">Figma design system</a>
           based on the utility classes from Tailwind CSS and components from Flowbite.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
@@ -40,7 +40,7 @@
       What are the differences between Flowbite and Tailwind UI ?
     </flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           The main difference is that the core components from Flowbite are open source under the
           MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
@@ -70,7 +70,7 @@
             </a>
           </li>
         </ul>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
 </flowbite-accordion>
diff --git a/apps/docs/docs/components/accordion/_flush.component.html b/apps/docs/docs/components/accordion/_flush.component.html
index 7fcac230..f443024a 100644
--- a/apps/docs/docs/components/accordion/_flush.component.html
+++ b/apps/docs/docs/components/accordion/_flush.component.html
@@ -2,7 +2,7 @@
   <flowbite-accordion-panel [isOpen]="true">
     <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is an open-source library of interactive components built on top of Tailwind CSS
           including buttons, dropdowns, modals, navbars, and more.
@@ -16,13 +16,13 @@
           </a>
           and start developing websites even faster with components on top of Tailwind CSS.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
     <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           Flowbite is first conceptualized and designed using the Figma software so everything you
           see in the library has a design equivalent in our Figma file.
@@ -32,7 +32,7 @@
           <a href="https://flowbite.com/figma/">Figma design system</a>
           based on the utility classes from Tailwind CSS and components from Flowbite.
         </p>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
   <flowbite-accordion-panel>
@@ -40,7 +40,7 @@
       What are the differences between Flowbite and Tailwind UI ?
     </flowbite-accordion-title>
     <flowbite-accordion-content>
-      <span class="p-5">
+      <div class="p-5">
         <p class="text-base font-normal text-gray-600 dark:text-gray-400">
           The main difference is that the core components from Flowbite are open source under the
           MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
@@ -70,7 +70,7 @@
             </a>
           </li>
         </ul>
-      </span>
+      </div>
     </flowbite-accordion-content>
   </flowbite-accordion-panel>
 </flowbite-accordion>
diff --git a/apps/docs/docs/components/dropdown/_header.component.html b/apps/docs/docs/components/dropdown/_header.component.html
index 5d450c1d..e64dfd2e 100644
--- a/apps/docs/docs/components/dropdown/_header.component.html
+++ b/apps/docs/docs/components/dropdown/_header.component.html
@@ -1,8 +1,9 @@
 <flowbite-dropdown>
   <flowbite-dropdown-header>
-    <span className="block text-sm">Bonnie Green</span>
-    <span className="block truncate text-sm font-medium">bonnie&#64;flowbite.com</span>
+    <span class="block text-sm">Bonnie Green</span>
+    <span class="block truncate text-sm font-medium">bonnie&#64;flowbite.com</span>
   </flowbite-dropdown-header>
+  <flowbite-dropdown-divider />
   <flowbite-dropdown-item>Item 1</flowbite-dropdown-item>
   <flowbite-dropdown-item>Item 2</flowbite-dropdown-item>
   <flowbite-dropdown-item>Item 3</flowbite-dropdown-item>
diff --git a/apps/docs/docs/components/dropdown/_header.component.ts b/apps/docs/docs/components/dropdown/_header.component.ts
index 311c8f9e..a755cd64 100644
--- a/apps/docs/docs/components/dropdown/_header.component.ts
+++ b/apps/docs/docs/components/dropdown/_header.component.ts
@@ -1,5 +1,6 @@
 import {
   DropdownComponent,
+  DropdownDividerComponent,
   DropdownHeaderComponent,
   DropdownItemComponent,
 } from 'flowbite-angular/dropdown';
@@ -9,7 +10,12 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'flowbite-demo-dropdown-header',
   standalone: true,
-  imports: [DropdownComponent, DropdownItemComponent, DropdownHeaderComponent],
+  imports: [
+    DropdownComponent,
+    DropdownItemComponent,
+    DropdownHeaderComponent,
+    DropdownDividerComponent,
+  ],
   templateUrl: '_header.component.html',
   host: {
     class: 'flex flex wrap flex-row gap-3',
diff --git a/apps/docs/docs/customize/dark-mode/index.md b/apps/docs/docs/customize/dark-mode/index.md
new file mode 100644
index 00000000..d187b25e
--- /dev/null
+++ b/apps/docs/docs/customize/dark-mode/index.md
@@ -0,0 +1,35 @@
+---
+keyword: DarkModePage
+---
+
+## Enable dark mode
+
+All you need to do is add `FlowbiteThemeDirective` as a `hostDirectives` in you `app.component.ts`.
+
+```angular-ts
+...
+import { FlowbiteThemeDirective } from 'flowbite-angular/theme';
+...
+
+@Component({
+  ...
+  hostDirectives: [FlowbiteThemeDirective],
+})
+export class AppComponent {
+  ...
+}
+```
+
+If your TailwindCSS configuration is based on the one provided by flowbite-angular, then everything
+will be set up. Otherwise, you have to update your TailwindCSS configuration like this :
+
+```javascript
+module.exports = {
+  darkMode: 'class',
+};
+```
+
+## 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.
diff --git a/apps/docs/docs/customize/dark-mode/ng-doc.page.ts b/apps/docs/docs/customize/dark-mode/ng-doc.page.ts
new file mode 100644
index 00000000..34f59b49
--- /dev/null
+++ b/apps/docs/docs/customize/dark-mode/ng-doc.page.ts
@@ -0,0 +1,17 @@
+import CustomizeCategory from '../ng-doc.category';
+
+import type { NgDocPage } from '@ng-doc/core';
+
+/**
+ * Add dark theme to your application.
+ *
+ * @status:info NEW
+ */
+const darkMode: NgDocPage = {
+  title: 'Dark mode',
+  mdFile: './index.md',
+  category: CustomizeCategory,
+  order: 6,
+};
+
+export default darkMode;
diff --git a/apps/docs/docs/customize/inherit-component/ng-doc.page.ts b/apps/docs/docs/customize/inherit-component/ng-doc.page.ts
index fbc01c5e..ddb9e6df 100644
--- a/apps/docs/docs/customize/inherit-component/ng-doc.page.ts
+++ b/apps/docs/docs/customize/inherit-component/ng-doc.page.ts
@@ -11,7 +11,7 @@ const OverrideBaseStyle: NgDocPage = {
   title: 'Inherit component',
   mdFile: './index.md',
   category: CustomizeCategory,
-  order: 4,
+  order: 5,
 };
 
 export default OverrideBaseStyle;
diff --git a/apps/docs/docs/customize/override-component-default-value/index.md b/apps/docs/docs/customize/override-component-default-value/index.md
new file mode 100644
index 00000000..0c9ce614
--- /dev/null
+++ b/apps/docs/docs/customize/override-component-default-value/index.md
@@ -0,0 +1,34 @@
+---
+keyword: OverrideComponentBaseValue
+---
+
+Each components provide a set of input to customize their behavior.
+
+They are named following this pattern :
+
+<span class="text-xs md:text-base">
+
+FLOWBITE\_<span class="text-primary-500">COMPONENT_NAME</span>\_<span class="text-primary-500">INPUT_NAME</span>\_DEFAULT_VALUE
+
+</span>
+
+In order to modify the default value of an input, you have to add, after `initFlowbite` function, a
+new `Provider` with its value :
+
+```angular-ts
+import { FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE } from 'flowbite-angular/alert';
+import { initFlowbite } from 'flowbite-angular/core';
+import { ApplicationConfig } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    ...,
+    initFlowbite(),
+    {
+      provide: FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE,
+      useValue: true,
+    },
+  ],
+};
+
+```
diff --git a/apps/docs/docs/customize/override-component-default-value/ng-doc.page.ts b/apps/docs/docs/customize/override-component-default-value/ng-doc.page.ts
new file mode 100644
index 00000000..8121d72a
--- /dev/null
+++ b/apps/docs/docs/customize/override-component-default-value/ng-doc.page.ts
@@ -0,0 +1,17 @@
+import CustomizeCategory from '../ng-doc.category';
+
+import type { NgDocPage } from '@ng-doc/core';
+
+/**
+ * Customize flowbite-angular's component input default value.
+ *
+ * @status:info NEW
+ */
+const OverrideComponentDefaultValue: NgDocPage = {
+  title: 'Override component default value',
+  mdFile: './index.md',
+  category: CustomizeCategory,
+  order: 3,
+};
+
+export default OverrideComponentDefaultValue;
diff --git a/apps/docs/docs/customize/use-custom-style/ng-doc.page.ts b/apps/docs/docs/customize/use-custom-style/ng-doc.page.ts
index 4abd8334..399e6c8f 100644
--- a/apps/docs/docs/customize/use-custom-style/ng-doc.page.ts
+++ b/apps/docs/docs/customize/use-custom-style/ng-doc.page.ts
@@ -11,7 +11,7 @@ const UseCustomStyle: NgDocPage = {
   title: 'Use custom style',
   mdFile: './index.md',
   category: CustomizeCategory,
-  order: 3,
+  order: 4,
 };
 
 export default UseCustomStyle;
diff --git a/apps/docs/docs/ng-doc.api.ts b/apps/docs/docs/ng-doc.api.ts
index bd27bf7b..00fd14c8 100644
--- a/apps/docs/docs/ng-doc.api.ts
+++ b/apps/docs/docs/ng-doc.api.ts
@@ -34,6 +34,7 @@ const api: NgDocApi = {
         'libs/flowbite-angular/navbar/index.ts',
         'libs/flowbite-angular/scroll-top/index.ts',
         'libs/flowbite-angular/sidebar/index.ts',
+        'libs/flowbite-angular/theme/index.ts',
       ],
     },
     {
diff --git a/libs/flowbite-angular/accordion/accordion-content.component.ts b/libs/flowbite-angular/accordion/accordion-content.component.ts
index 27551e22..1aa1003f 100644
--- a/libs/flowbite-angular/accordion/accordion-content.component.ts
+++ b/libs/flowbite-angular/accordion/accordion-content.component.ts
@@ -11,10 +11,23 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_ACCORDION_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<AccordionContentTheme>
+>('FLOWBITE_ACCORDION_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const accordionContentDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_ACCORDION_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/accordion/
  */
@@ -55,7 +68,7 @@ export class AccordionContentComponent extends BaseComponent<AccordionContentCla
   /**
    * Set the custom style for this accordion content
    */
-  public customStyle = model<DeepPartial<AccordionContentTheme>>({});
+  public customStyle = model(inject(FLOWBITE_ACCORDION_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/accordion/accordion-panel.component.ts b/libs/flowbite-angular/accordion/accordion-panel.component.ts
index 5630f6fa..bbceac76 100644
--- a/libs/flowbite-angular/accordion/accordion-panel.component.ts
+++ b/libs/flowbite-angular/accordion/accordion-panel.component.ts
@@ -14,11 +14,32 @@ import {
   Component,
   contentChild,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   untracked,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_ACCORDION_PANEL_IS_OPEN_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_ACCORDION_IS_OPEN_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_ACCORDION_PANEL_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<AccordionPanelTheme>
+>('FLOWBITE_ACCORDION_PANEL_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const accordionPanelDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_ACCORDION_PANEL_IS_OPEN_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_ACCORDION_PANEL_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/accordion/
  */
@@ -41,11 +62,11 @@ export class AccordionPanelComponent extends BaseComponent<AccordionPanelClass>
   /**
    * The child `AccordionTitleComponent`
    */
-  public readonly accordionTitleChild = contentChild(AccordionTitleComponent);
+  public readonly accordionTitleChild = contentChild.required(AccordionTitleComponent);
   /**
    * The child `AccordionContentComponent`
    */
-  public readonly accordionContentChild = contentChild(AccordionContentComponent);
+  public readonly accordionContentChild = contentChild.required(AccordionContentComponent);
 
   //#region properties
   /**
@@ -59,11 +80,11 @@ export class AccordionPanelComponent extends BaseComponent<AccordionPanelClass>
    *
    * @default false
    */
-  public isOpen = model<boolean>(false);
+  public isOpen = model(inject(FLOWBITE_ACCORDION_PANEL_IS_OPEN_DEFAULT_VALUE));
   /**
    * Set the custom style for this accordion panel
    */
-  public customStyle = model<DeepPartial<AccordionPanelTheme>>({});
+  public customStyle = model(inject(FLOWBITE_ACCORDION_PANEL_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
@@ -72,15 +93,6 @@ export class AccordionPanelComponent extends BaseComponent<AccordionPanelClass>
       customStyle: this.customStyle(),
     });
   }
-
-  public override verify(): void {
-    if (this.accordionTitleChild() === undefined) {
-      throw new Error('No AccordionTitleComponent available');
-    }
-    if (this.accordionContentChild() == undefined) {
-      throw new Error('No AccordionContentComponent available');
-    }
-  }
   //#endregion
 
   /**
diff --git a/libs/flowbite-angular/accordion/accordion-title.component.ts b/libs/flowbite-angular/accordion/accordion-title.component.ts
index 88963e64..9938b7b7 100644
--- a/libs/flowbite-angular/accordion/accordion-title.component.ts
+++ b/libs/flowbite-angular/accordion/accordion-title.component.ts
@@ -13,11 +13,24 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
+export const FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<AccordionTitleTheme>
+>('FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const accordionTitleDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/accordion/
  */
@@ -68,7 +81,7 @@ export class AccordionTitleComponent extends BaseComponent<AccordionTitleClass>
   /**
    * Set the custom style for this accordion title
    */
-  public customStyle = model<DeepPartial<AccordionTitleTheme>>({});
+  public customStyle = model(inject(FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/accordion/accordion.component.ts b/libs/flowbite-angular/accordion/accordion.component.ts
index 521eb10c..550e09f0 100644
--- a/libs/flowbite-angular/accordion/accordion.component.ts
+++ b/libs/flowbite-angular/accordion/accordion.component.ts
@@ -10,10 +10,47 @@ import {
   Component,
   contentChildren,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_ACCORDION_IS_ALWAYS_OPEN_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_ACCORDION_IS_ALWAYS_OPEN'
+);
+
+export const FLOWBITE_ACCORDION_COLOR_DEFAULT_VALUE = new InjectionToken<keyof AccordionColors>(
+  'FLOWBITE_ACCORDION_COLOR_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_ACCORDION_IS_FLUSH_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_ACCORDION_IS_FLUSH_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_ACCORDION_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<AccordionTheme>
+>('FLOWBITE_ACCORDION_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const accordionDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_ACCORDION_IS_ALWAYS_OPEN_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_ACCORDION_COLOR_DEFAULT_VALUE,
+    useValue: 'primary',
+  },
+  {
+    provide: FLOWBITE_ACCORDION_IS_FLUSH_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_ACCORDION_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/accordion/
  */
@@ -40,23 +77,23 @@ export class AccordionComponent extends BaseComponent<AccordionClass> {
    *
    * @default false
    */
-  public isAlwaysOpen = model<boolean>(false);
+  public isAlwaysOpen = model(inject(FLOWBITE_ACCORDION_IS_ALWAYS_OPEN_DEFAULT_VALUE));
   /**
    * Set the accordion color and every child default color
    *
    * @default primary
    */
-  public color = model<keyof AccordionColors>('primary');
+  public color = model(inject(FLOWBITE_ACCORDION_COLOR_DEFAULT_VALUE));
   /**
    * Set the accordion as flush or not
    *
    * @default false
    */
-  public isFlush = model<boolean>(false);
+  public isFlush = model(inject(FLOWBITE_ACCORDION_IS_FLUSH_DEFAULT_VALUE));
   /**
    * Set the custom style for this accordion
    */
-  public customStyle = model<DeepPartial<AccordionTheme>>({});
+  public customStyle = model(inject(FLOWBITE_ACCORDION_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
@@ -65,12 +102,6 @@ export class AccordionComponent extends BaseComponent<AccordionClass> {
       customStyle: this.customStyle(),
     });
   }
-
-  public override verify(): void {
-    if (this.accordionPanelChildren().length === 0) {
-      throw new Error('No AccordionPanelComponent available');
-    }
-  }
   //#endregion
 
   /**
diff --git a/libs/flowbite-angular/accordion/index.ts b/libs/flowbite-angular/accordion/index.ts
index 04bc340b..0c999293 100644
--- a/libs/flowbite-angular/accordion/index.ts
+++ b/libs/flowbite-angular/accordion/index.ts
@@ -1,4 +1,11 @@
-export { AccordionComponent } from './accordion.component';
+export {
+  AccordionComponent,
+  FLOWBITE_ACCORDION_IS_ALWAYS_OPEN_DEFAULT_VALUE,
+  FLOWBITE_ACCORDION_COLOR_DEFAULT_VALUE,
+  FLOWBITE_ACCORDION_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_ACCORDION_IS_FLUSH_DEFAULT_VALUE,
+  accordionDefaultValueProvider,
+} from './accordion.component';
 export type {
   AccordionProperties,
   AccordionClass,
@@ -8,7 +15,11 @@ export type {
 export { accordionTheme } from './accordion.theme';
 export { AccordionThemeService, FLOWBITE_ACCORDION_THEME_TOKEN } from './accordion.theme.service';
 
-export { AccordionContentComponent } from './accordion-content.component';
+export {
+  AccordionContentComponent,
+  FLOWBITE_ACCORDION_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
+  accordionContentDefaultValueProvider,
+} from './accordion-content.component';
 export type {
   AccordionContentProperties,
   AccordionContentClass,
@@ -20,7 +31,12 @@ export {
   FLOWBITE_ACCORDION_CONTENT_THEME_TOKEN,
 } from './accordion-content.theme.service';
 
-export { AccordionPanelComponent } from './accordion-panel.component';
+export {
+  AccordionPanelComponent,
+  FLOWBITE_ACCORDION_PANEL_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_ACCORDION_PANEL_IS_OPEN_DEFAULT_VALUE,
+  accordionPanelDefaultValueProvider,
+} from './accordion-panel.component';
 export type {
   AccordionPanelProperties,
   AccordionPanelClass,
@@ -32,7 +48,11 @@ export {
   FLOWBITE_ACCORDION_PANEL_THEME_TOKEN,
 } from './accordion-panel.theme.service';
 
-export { AccordionTitleComponent } from './accordion-title.component';
+export {
+  AccordionTitleComponent,
+  FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE,
+  accordionTitleDefaultValueProvider,
+} from './accordion-title.component';
 export type {
   AccordionTitleProperties,
   AccordionTitleTheme,
diff --git a/libs/flowbite-angular/alert/alert.component.ts b/libs/flowbite-angular/alert/alert.component.ts
index 38e65995..0b488d05 100644
--- a/libs/flowbite-angular/alert/alert.component.ts
+++ b/libs/flowbite-angular/alert/alert.component.ts
@@ -13,11 +13,81 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
+export const FLOWBITE_ALERT_COLOR_DEFAULT_VALUE = new InjectionToken<keyof AlertColors>(
+  'FLOWBITE_ALERT_COLOR_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_ALERT_HAS_BORDER_ACCENT_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_ALERT_HAS_BORDER_ACCENT_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_ALERT_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<AlertTheme>
+>('FLOWBITE_ALERT_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const FLOWBITE_ALERT_ICON_DEFAULT_VALUE = new InjectionToken<TemplateRef<unknown> | null>(
+  'FLOWBITE_ALERT_ICON_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_ALERT_ADDITIONAL_CONTENT_DEFAULT_VALUE =
+  new InjectionToken<TemplateRef<unknown> | null>(
+    'FLOWBITE_ALERT_ADDITIONAL_CONTENT_DEFAULT_VALUE'
+  );
+
+export const FLOWBITE_ALERT_IS_DISMISSABLE_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_ALERT_IS_DISMISSABLE_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_ALERT_ON_DISMISS_DEFAULT_VALUE = new InjectionToken<(() => void) | undefined>(
+  'FLOWBITE_ALERT_ON_DISMISS_DEFAULT_VALUE'
+);
+
+export const alertDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_ALERT_COLOR_DEFAULT_VALUE,
+    useValue: 'primary',
+  },
+  {
+    provide: FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_ALERT_HAS_BORDER_ACCENT_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_ALERT_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+  {
+    provide: FLOWBITE_ALERT_ICON_DEFAULT_VALUE,
+    useValue: null,
+  },
+  {
+    provide: FLOWBITE_ALERT_ADDITIONAL_CONTENT_DEFAULT_VALUE,
+    useValue: null,
+  },
+  {
+    provide: FLOWBITE_ALERT_IS_DISMISSABLE_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_ALERT_ON_DISMISS_DEFAULT_VALUE,
+    useValue: undefined,
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/alerts/
  */
@@ -79,47 +149,47 @@ export class AlertComponent extends BaseComponent<AlertClass> implements OnInit
    *
    * @default primary
    */
-  public color = model<keyof AlertColors>('primary');
+  public color = model(inject(FLOWBITE_ALERT_COLOR_DEFAULT_VALUE));
   /**
    * Set if the alert has border
    *
    * @default false
    */
-  public hasBorder = model<boolean>(false);
+  public hasBorder = model(inject(FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE));
   /**
    * Set if the alert has border accent
    *
    * @default false
    */
-  public hasBorderAccent = model<boolean>(false);
+  public hasBorderAccent = model(inject(FLOWBITE_ALERT_HAS_BORDER_ACCENT_DEFAULT_VALUE));
   /**
    * Set the custom style for this alert
    */
-  public customStyle = model<DeepPartial<AlertTheme>>({});
+  public customStyle = model(inject(FLOWBITE_ALERT_CUSTOM_STYLE_DEFAULT_VALUE));
   /**
    * Set the custom icon
    *
    * @default null
    */
-  public icon = model<TemplateRef<unknown> | null>(null);
+  public icon = model(inject(FLOWBITE_ALERT_ICON_DEFAULT_VALUE));
   /**
    * Set the additional content
    *
    * @default null
    */
-  public additionalContent = model<TemplateRef<unknown> | null>(null);
+  public additionalContent = model(inject(FLOWBITE_ALERT_ADDITIONAL_CONTENT_DEFAULT_VALUE));
   /**
    * Set if the alert is dismissable
    *
    * @default false
    */
-  public isDismissable = model<boolean>(false);
+  public isDismissable = model(inject(FLOWBITE_ALERT_IS_DISMISSABLE_DEFAULT_VALUE));
   /**
    * Set the function called when the alert is dismissed
    *
    * @default undefined
    */
-  public onDismiss = model<() => void | undefined>();
+  public onDismiss = model(inject(FLOWBITE_ALERT_ON_DISMISS_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/alert/index.ts b/libs/flowbite-angular/alert/index.ts
index d7607ebf..eed1db07 100644
--- a/libs/flowbite-angular/alert/index.ts
+++ b/libs/flowbite-angular/alert/index.ts
@@ -1,4 +1,15 @@
-export { AlertComponent } from './alert.component';
+export {
+  AlertComponent,
+  FLOWBITE_ALERT_ADDITIONAL_CONTENT_DEFAULT_VALUE,
+  FLOWBITE_ALERT_COLOR_DEFAULT_VALUE,
+  FLOWBITE_ALERT_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_ALERT_HAS_BORDER_ACCENT_DEFAULT_VALUE,
+  FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE,
+  FLOWBITE_ALERT_ICON_DEFAULT_VALUE,
+  FLOWBITE_ALERT_IS_DISMISSABLE_DEFAULT_VALUE,
+  FLOWBITE_ALERT_ON_DISMISS_DEFAULT_VALUE,
+  alertDefaultValueProvider,
+} from './alert.component';
 export type { AlertProperties, AlertClass, AlertColors, AlertTheme } from './alert.theme';
 export { alertTheme } from './alert.theme';
 export { AlertThemeService, FLOWBITE_ALERT_THEME_TOKEN } from './alert.theme.service';
diff --git a/libs/flowbite-angular/badge/badge.component.ts b/libs/flowbite-angular/badge/badge.component.ts
index 9198783f..d6eb80dc 100644
--- a/libs/flowbite-angular/badge/badge.component.ts
+++ b/libs/flowbite-angular/badge/badge.component.ts
@@ -9,10 +9,55 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_BADGE_COLOR_DEFAULT_VALUE = new InjectionToken<keyof BadgeColors>(
+  'FLOWBITE_BADGE_COLOR_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_BADGE_SIZE_DEFAULT_VALUE = new InjectionToken<keyof BadgeSizes>(
+  'FLOWBITE_BADGE_SIZE_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_BADGE_IS_ICON_ONLY_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_BADGE_IS_ICON_ONLY_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<BadgeTheme>
+>('FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const badgeDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_BADGE_COLOR_DEFAULT_VALUE,
+    useValue: 'primary',
+  },
+  {
+    provide: FLOWBITE_BADGE_SIZE_DEFAULT_VALUE,
+    useValue: 'xs',
+  },
+  {
+    provide: FLOWBITE_BADGE_IS_ICON_ONLY_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/badge/
  */
@@ -39,29 +84,29 @@ export class BadgeComponent extends BaseComponent<BadgeClass> {
    *
    * @default primary
    */
-  public color = model<keyof BadgeColors>('primary');
+  public color = model(inject(FLOWBITE_BADGE_COLOR_DEFAULT_VALUE));
   /**
    * Set the badge size
    *
    * @default xs
    */
-  public size = model<keyof BadgeSizes>('xs');
+  public size = model(inject(FLOWBITE_BADGE_SIZE_DEFAULT_VALUE));
   /**
    * Set if the badge is icon only
    *
    * @default false
    */
-  public isIconOnly = model<boolean>(false);
+  public isIconOnly = model(inject(FLOWBITE_BADGE_IS_ICON_ONLY_DEFAULT_VALUE));
   /**
    * Set if the badge is pill
    *
    * @default false
    */
-  public isPill = model<boolean>(false);
+  public isPill = model(inject(FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE));
   /**
    * Set the custom style for this badge
    */
-  public customStyle = model<DeepPartial<BadgeTheme>>({});
+  public customStyle = model(inject(FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/badge/index.ts b/libs/flowbite-angular/badge/index.ts
index af4f6133..74c2f2e0 100644
--- a/libs/flowbite-angular/badge/index.ts
+++ b/libs/flowbite-angular/badge/index.ts
@@ -1,4 +1,12 @@
-export { BadgeComponent } from './badge.component';
+export {
+  BadgeComponent,
+  FLOWBITE_BADGE_COLOR_DEFAULT_VALUE,
+  FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_BADGE_IS_ICON_ONLY_DEFAULT_VALUE,
+  FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE,
+  FLOWBITE_BADGE_SIZE_DEFAULT_VALUE,
+  badgeDefaultValueProvider,
+} from './badge.component';
 export type {
   BadgeProperties,
   BadgeClass,
diff --git a/libs/flowbite-angular/breadcrumb/breadcrumb-item.component.ts b/libs/flowbite-angular/breadcrumb/breadcrumb-item.component.ts
index dbfb8337..086687c3 100644
--- a/libs/flowbite-angular/breadcrumb/breadcrumb-item.component.ts
+++ b/libs/flowbite-angular/breadcrumb/breadcrumb-item.component.ts
@@ -14,11 +14,24 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
+export const FLOWBITE_BREADCRUMB_ITEM_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<BreadcrumbItemTheme>
+>('FLOWBITE_BREADCRUMB_ITEM_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const breadcrumbItemDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_BREADCRUMB_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/breadcrumb/
  */
@@ -67,7 +80,7 @@ export class BreadcrumbItemComponent extends BaseComponent<BreadcrumbItemClass>
   /**
    * Set the custom style for this breadcrumb item
    */
-  public customStyle = model<DeepPartial<BreadcrumbItemTheme>>({});
+  public customStyle = model(inject(FLOWBITE_BREADCRUMB_ITEM_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/breadcrumb/breadcrumb.component.ts b/libs/flowbite-angular/breadcrumb/breadcrumb.component.ts
index 5f997c05..089198f0 100644
--- a/libs/flowbite-angular/breadcrumb/breadcrumb.component.ts
+++ b/libs/flowbite-angular/breadcrumb/breadcrumb.component.ts
@@ -10,10 +10,31 @@ import {
   Component,
   contentChildren,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_BREADCRUMB_COLOR_DEFAULT_VALUE = new InjectionToken<keyof BreadcrumbColors>(
+  'FLOWBITE_BREADCRUMB_COLOR_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_BREADCRUMB_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<BreadcrumbTheme>
+>('FLOWBITE_BREADCRUMB_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const breadcrumbDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_BREADCRUMB_COLOR_DEFAULT_VALUE,
+    useValue: 'primary',
+  },
+  {
+    provide: FLOWBITE_BREADCRUMB_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/breadcrumb/
  */
@@ -43,11 +64,11 @@ export class BreadcrumbComponent extends BaseComponent<BreadcrumbClass> {
    *
    * @default primary
    */
-  public color = model<keyof BreadcrumbColors>('primary');
+  public color = model(inject(FLOWBITE_BREADCRUMB_COLOR_DEFAULT_VALUE));
   /**
    * Set the custom style for this breadcrumb
    */
-  public customStyle = model<DeepPartial<BreadcrumbTheme>>({});
+  public customStyle = model(inject(FLOWBITE_BREADCRUMB_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
@@ -56,11 +77,5 @@ export class BreadcrumbComponent extends BaseComponent<BreadcrumbClass> {
       customStyle: this.customStyle(),
     });
   }
-
-  public override verify(): void {
-    if (this.breadcrumbItemChildren().length === 0) {
-      throw new Error('No BreadcrumbItemComponent available');
-    }
-  }
   //#endregion
 }
diff --git a/libs/flowbite-angular/breadcrumb/index.ts b/libs/flowbite-angular/breadcrumb/index.ts
index ac389029..c02aace4 100644
--- a/libs/flowbite-angular/breadcrumb/index.ts
+++ b/libs/flowbite-angular/breadcrumb/index.ts
@@ -1,4 +1,9 @@
-export { BreadcrumbComponent } from './breadcrumb.component';
+export {
+  BreadcrumbComponent,
+  FLOWBITE_BREADCRUMB_COLOR_DEFAULT_VALUE,
+  FLOWBITE_BREADCRUMB_CUSTOM_STYLE_DEFAULT_VALUE,
+  breadcrumbDefaultValueProvider,
+} from './breadcrumb.component';
 export type {
   BreadcrumbProperties,
   BreadcrumbClass,
@@ -11,7 +16,11 @@ export {
   FLOWBITE_BREADCRUMB_THEME_TOKEN,
 } from './breadcrumb.theme.service';
 
-export { BreadcrumbItemComponent } from './breadcrumb-item.component';
+export {
+  BreadcrumbItemComponent,
+  FLOWBITE_BREADCRUMB_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
+  breadcrumbItemDefaultValueProvider,
+} from './breadcrumb-item.component';
 export type {
   BreadcrumbItemProperties,
   BreadcrumbItemClass,
diff --git a/libs/flowbite-angular/button/button.component.ts b/libs/flowbite-angular/button/button.component.ts
index 834fc6b0..300e9a35 100644
--- a/libs/flowbite-angular/button/button.component.ts
+++ b/libs/flowbite-angular/button/button.component.ts
@@ -17,10 +17,79 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE = new InjectionToken<keyof ButtonColors>(
+  'FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE = new InjectionToken<keyof ButtonSizes>(
+  'FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_BUTTON_FILL_DEFAULT_VALUE = new InjectionToken<keyof ButtonFill>(
+  'FLOWBITE_BUTTON_FILL_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE = new InjectionToken<
+  keyof ButtonMonochromeColors | undefined
+>('FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE');
+
+export const FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE = new InjectionToken<
+  keyof ButtonDuoToneColors | undefined
+>('FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE');
+
+export const FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<ButtonTheme>
+>('FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const buttonDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE,
+    useValue: 'primary',
+  },
+  {
+    provide: FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE,
+    useValue: 'md',
+  },
+  {
+    provide: FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_BUTTON_FILL_DEFAULT_VALUE,
+    useValue: 'solid',
+  },
+  {
+    provide: FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE,
+    useValue: undefined,
+  },
+  {
+    provide: FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE,
+    useValue: undefined,
+  },
+  {
+    provide: FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/buttons/
  */
@@ -59,47 +128,47 @@ export class ButtonComponent extends BaseComponent<ButtonClass> {
    *
    * @default primary
    */
-  public color = model<keyof ButtonColors>('primary');
+  public color = model(inject(FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE));
   /**
    * Set the button size
    *
    * @default md
    */
-  public size = model<keyof ButtonSizes>('md');
+  public size = model(inject(FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE));
   /**
    * Set if the button is pill
    *
    * @default false
    */
-  public isPill = model<boolean>(false);
+  public isPill = model(inject(FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE));
   /**
    * Set the button fill
    *
    * @default solid
    */
-  public fill = model<keyof ButtonFill>('solid');
+  public fill = model(inject(FLOWBITE_BUTTON_FILL_DEFAULT_VALUE));
   /**
    * Set if the button is disabled
    *
    * @default false
    */
-  public isDisabled = model<boolean>(false);
+  public isDisabled = model(inject(FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE));
   /**
    * Set the button gradient monochrome
    *
    * @default undefined
    */
-  public gradientMonochrome = model<keyof ButtonMonochromeColors | undefined>(undefined);
+  public gradientMonochrome = model(inject(FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE));
   /**
    * Set the button gradient duotone
    *
    * @default undefined
    */
-  public gradientDuoTone = model<keyof ButtonDuoToneColors | undefined>(undefined);
+  public gradientDuoTone = model(inject(FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE));
   /**
    * Set the custom style for this button
    */
-  public customStyle = model<DeepPartial<ButtonTheme>>({});
+  public customStyle = model(inject(FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/button/index.ts b/libs/flowbite-angular/button/index.ts
index 1bbd1d5c..47f158a6 100644
--- a/libs/flowbite-angular/button/index.ts
+++ b/libs/flowbite-angular/button/index.ts
@@ -1,4 +1,15 @@
-export { ButtonComponent } from './button.component';
+export {
+  ButtonComponent,
+  FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE,
+  FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_BUTTON_FILL_DEFAULT_VALUE,
+  FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE,
+  FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE,
+  FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE,
+  FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE,
+  FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE,
+  buttonDefaultValueProvider,
+} from './button.component';
 export type {
   ButtonProperties,
   ButtonClass,
diff --git a/libs/flowbite-angular/common/base-component.directive.ts b/libs/flowbite-angular/common/base-component.directive.ts
index 7d942a55..1f0a110d 100644
--- a/libs/flowbite-angular/common/base-component.directive.ts
+++ b/libs/flowbite-angular/common/base-component.directive.ts
@@ -50,7 +50,6 @@ export abstract class BaseComponent<TClass extends FlowbiteClass> implements OnI
    * A call to verify and init function is done. Then a new Guid is set in the `afterNextRender` hook.
    */
   public ngOnInit(): void {
-    this.verify();
     this.init();
 
     afterNextRender(
@@ -67,12 +66,6 @@ export abstract class BaseComponent<TClass extends FlowbiteClass> implements OnI
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   public init(): void {}
 
-  /**
-   * Function loaded during the `OnInit` lifecycle hook. It ensure that required initialization is done.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  public verify(): void {}
-
   /**
    * Function to load component's classes
    */
diff --git a/libs/flowbite-angular/core/flowbite.theme.init.ts b/libs/flowbite-angular/core/flowbite.theme.init.ts
index dcd4377f..e73e8cf5 100644
--- a/libs/flowbite-angular/core/flowbite.theme.init.ts
+++ b/libs/flowbite-angular/core/flowbite.theme.init.ts
@@ -1,10 +1,14 @@
 import {
+  accordionContentDefaultValueProvider,
   accordionContentTheme,
   AccordionContentThemeService,
+  accordionDefaultValueProvider,
+  accordionPanelDefaultValueProvider,
   accordionPanelTheme,
   AccordionPanelThemeService,
   accordionTheme,
   AccordionThemeService,
+  accordionTitleDefaultValueProvider,
   accordionTitleTheme,
   AccordionTitleThemeService,
   FLOWBITE_ACCORDION_CONTENT_THEME_TOKEN,
@@ -12,9 +16,21 @@ import {
   FLOWBITE_ACCORDION_THEME_TOKEN,
   FLOWBITE_ACCORDION_TITLE_THEME_TOKEN,
 } from 'flowbite-angular/accordion';
-import { alertTheme, AlertThemeService, FLOWBITE_ALERT_THEME_TOKEN } from 'flowbite-angular/alert';
-import { badgeTheme, BadgeThemeService, FLOWBITE_BADGE_THEME_TOKEN } from 'flowbite-angular/badge';
 import {
+  alertDefaultValueProvider,
+  alertTheme,
+  AlertThemeService,
+  FLOWBITE_ALERT_THEME_TOKEN,
+} from 'flowbite-angular/alert';
+import {
+  badgeDefaultValueProvider,
+  badgeTheme,
+  BadgeThemeService,
+  FLOWBITE_BADGE_THEME_TOKEN,
+} from 'flowbite-angular/badge';
+import {
+  breadcrumbDefaultValueProvider,
+  breadcrumbItemDefaultValueProvider,
   breadcrumbItemTheme,
   BreadcrumbItemThemeService,
   breadcrumbTheme,
@@ -23,20 +39,26 @@ import {
   FLOWBITE_BREADCRUMB_THEME_TOKEN,
 } from 'flowbite-angular/breadcrumb';
 import {
+  buttonDefaultValueProvider,
   buttonTheme,
   ButtonThemeService,
   FLOWBITE_BUTTON_THEME_TOKEN,
 } from 'flowbite-angular/button';
 import {
+  darkThemeToggleDefaultValueProvider,
   darkThemeToggleTheme,
   DarkThemeToggleThemeService,
   FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN,
 } from 'flowbite-angular/dark-theme-toggle';
 import {
+  dropdownDefaultValueProvider,
+  dropdownDividerDefaultValueProvider,
   dropdownDividerTheme,
   DropdownDividerThemeService,
+  dropdownHeaderDefaultValueProvider,
   dropdownHeaderTheme,
   DropdownHeaderThemeService,
+  dropdownItemDefaultValueProvider,
   dropdownItemTheme,
   DropdownItemThemeService,
   dropdownTheme,
@@ -48,6 +70,7 @@ import {
 } from 'flowbite-angular/dropdown';
 import {
   FLOWBITE_INDICATOR_THEME_TOKEN,
+  indicatorDefaultValueProvider,
   indicatorTheme,
   IndicatorThemeService,
 } from 'flowbite-angular/indicator';
@@ -56,10 +79,14 @@ import {
   FLOWBITE_MODAL_FOOTER_THEME_TOKEN,
   FLOWBITE_MODAL_HEADER_THEME_TOKEN,
   FLOWBITE_MODAL_THEME_TOKEN,
+  modalBodyDefaultValueProvider,
   modalBodyTheme,
   ModalBodyThemeService,
+  modalDefaultValueProvider,
+  modalFooterDefaultValueProvider,
   modalFooterTheme,
   ModalFooterThemeService,
+  modalHeaderDefaultValueProvider,
   modalHeaderTheme,
   ModalHeaderThemeService,
   modalTheme,
@@ -72,21 +99,28 @@ import {
   FLOWBITE_NAVBAR_ITEM_THEME_TOKEN,
   FLOWBITE_NAVBAR_THEME_TOKEN,
   FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN,
+  navbarBrandDefaultThemeProvider,
   navbarBrandTheme,
   NavbarBrandThemeService,
+  navbarContentDefaultValueProvider,
   navbarContentTheme,
   NavbarContentThemeService,
+  navbarDefaultValueProvider,
+  navbarIconButtonDefaultValueProvider,
   navbarIconButtonTheme,
   NavbarIconButtonThemeService,
+  navbarItemDefaultValueProvider,
   navbarItemTheme,
   NavbarItemThemeService,
   navbarTheme,
   NavbarThemeService,
+  navbarToggleDefaultValueProvider,
   navbarToggleTheme,
   NavbarToggleThemeService,
 } from 'flowbite-angular/navbar';
 import {
   FLOWBITE_SCROLL_TOP_THEME_TOKEN,
+  scrollTopDefaultValueProvider,
   scrollTopTheme,
   ScrollTopThemeService,
 } from 'flowbite-angular/scroll-top';
@@ -97,16 +131,22 @@ import {
   FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN,
   FLOWBITE_SIDEBAR_THEME_TOKEN,
   FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN,
+  sidebarDefaultValueProvider,
+  sidebarItemDefaultValueProvider,
+  sidebarItemGroupDefaultValueProvider,
   sidebarItemGroupTheme,
   SidebarItemGroupThemeService,
   sidebarItemTheme,
   SidebarItemThemeService,
+  sidebarMenuDefaultValueProvider,
   sidebarMenuTheme,
   SidebarMenuThemeService,
+  sidebarPageContentDefaultValueProvider,
   sidebarPageContentTheme,
   SidebarPageContentThemeService,
   sidebarTheme,
   SidebarThemeService,
+  sidebarToggleDefaultValueProvider,
   sidebarToggleTheme,
   SidebarToggleThemeService,
 } from 'flowbite-angular/sidebar';
@@ -381,5 +421,40 @@ export function initFlowbite(): EnvironmentProviders {
     },
   ]);
 
-  return makeEnvironmentProviders([serviceProviders, themeProviders]);
+  const defaultValueProvider = makeEnvironmentProviders([
+    accordionDefaultValueProvider,
+    accordionPanelDefaultValueProvider,
+    accordionTitleDefaultValueProvider,
+    accordionContentDefaultValueProvider,
+    alertDefaultValueProvider,
+    badgeDefaultValueProvider,
+    breadcrumbDefaultValueProvider,
+    breadcrumbItemDefaultValueProvider,
+    buttonDefaultValueProvider,
+    darkThemeToggleDefaultValueProvider,
+    dropdownDefaultValueProvider,
+    dropdownItemDefaultValueProvider,
+    dropdownHeaderDefaultValueProvider,
+    dropdownDividerDefaultValueProvider,
+    indicatorDefaultValueProvider,
+    modalDefaultValueProvider,
+    modalHeaderDefaultValueProvider,
+    modalFooterDefaultValueProvider,
+    modalBodyDefaultValueProvider,
+    navbarDefaultValueProvider,
+    navbarToggleDefaultValueProvider,
+    navbarItemDefaultValueProvider,
+    navbarIconButtonDefaultValueProvider,
+    navbarContentDefaultValueProvider,
+    navbarBrandDefaultThemeProvider,
+    scrollTopDefaultValueProvider,
+    sidebarDefaultValueProvider,
+    sidebarToggleDefaultValueProvider,
+    sidebarPageContentDefaultValueProvider,
+    sidebarMenuDefaultValueProvider,
+    sidebarItemDefaultValueProvider,
+    sidebarItemGroupDefaultValueProvider,
+  ]);
+
+  return makeEnvironmentProviders([serviceProviders, themeProviders, defaultValueProvider]);
 }
diff --git a/libs/flowbite-angular/dark-theme-toggle/dark-theme-toggle.component.ts b/libs/flowbite-angular/dark-theme-toggle/dark-theme-toggle.component.ts
index 32400c52..29292ebc 100644
--- a/libs/flowbite-angular/dark-theme-toggle/dark-theme-toggle.component.ts
+++ b/libs/flowbite-angular/dark-theme-toggle/dark-theme-toggle.component.ts
@@ -1,21 +1,34 @@
 import type { DarkThemeToggleClass, DarkThemeToggleTheme } from './dark-theme-toggle.theme';
 import { DarkThemeToggleThemeService } from './dark-theme-toggle.theme.service';
 
-import type { DeepPartial, FlowbiteTheme } from 'flowbite-angular';
+import type { DeepPartial } from 'flowbite-angular';
 import { BaseComponent } from 'flowbite-angular';
 import { IconComponent, IconRegistry } from 'flowbite-angular/icon';
+import { FlowbiteThemeDirective } from 'flowbite-angular/theme';
 import { MOON_SVG_ICON, SUN_SVG_ICON } from 'flowbite-angular/utils';
 
 import {
-  afterNextRender,
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
+export const FLOWBITE_DARK_THEME_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<DarkThemeToggleTheme>
+>('FLOWBITE_DARK_THEME_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const darkThemeToggleDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_DARK_THEME_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * Use to toggle light/dark mode accross the site
  */
@@ -50,12 +63,16 @@ export class DarkThemeToggleComponent extends BaseComponent<DarkThemeToggleClass
    * `DomSanitizer` service
    */
   public readonly domSanitizer = inject(DomSanitizer);
+  /**
+   * `FlowbiteThemeDirective` directive
+   */
+  public readonly themeDirective = inject(FlowbiteThemeDirective);
 
   //#region properties
   /**
    * Set the custom style for this dark-theme-toggle
    */
-  public customStyle = model<DeepPartial<DarkThemeToggleTheme>>({});
+  public customStyle = model(inject(FLOWBITE_DARK_THEME_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
@@ -66,13 +83,6 @@ export class DarkThemeToggleComponent extends BaseComponent<DarkThemeToggleClass
   }
 
   public override init(): void {
-    afterNextRender(
-      () => {
-        this.toggleTheme(this.getTheme());
-      },
-      { injector: this.injector }
-    );
-
     this.iconRegistry.addRawSvgIconInNamepsace(
       'flowbite-angular',
       'sun',
@@ -90,43 +100,6 @@ export class DarkThemeToggleComponent extends BaseComponent<DarkThemeToggleClass
    * Toggle between dark and light mode
    */
   public onClick() {
-    this.toggleTheme();
-  }
-
-  /**
-   * Get theme from the `localStorage`
-   * @returns The current theme saved in the `localStorage` with the key `color-theme`
-   */
-  private getTheme(): FlowbiteTheme {
-    return localStorage.getItem('color-theme') === 'dark' ? 'dark' : 'light';
-  }
-
-  /**
-   * Toggle the theme saced in the `localStorage`
-   *
-   * @param theme If provided, force the theme instead of toggling it between light and dark mode
-   */
-  private toggleTheme(theme?: FlowbiteTheme): void {
-    if (!theme) {
-      const tmpTheme = this.getTheme();
-
-      if (tmpTheme === 'dark') theme = 'light';
-      else theme = 'dark';
-    }
-
-    this.setTheme(theme);
-  }
-
-  /**
-   * Set the theme inside the page
-   *
-   * @param theme Theme to apply
-   */
-  private setTheme(theme: FlowbiteTheme): void {
-    localStorage.setItem('color-theme', theme);
-
-    theme === 'dark'
-      ? document.documentElement.classList.add('dark')
-      : document.documentElement.classList.remove('dark');
+    this.themeDirective.toggleTheme();
   }
 }
diff --git a/libs/flowbite-angular/dark-theme-toggle/index.ts b/libs/flowbite-angular/dark-theme-toggle/index.ts
index 8110fe5a..6ce36457 100644
--- a/libs/flowbite-angular/dark-theme-toggle/index.ts
+++ b/libs/flowbite-angular/dark-theme-toggle/index.ts
@@ -1,4 +1,8 @@
-export { DarkThemeToggleComponent } from './dark-theme-toggle.component';
+export {
+  DarkThemeToggleComponent,
+  FLOWBITE_DARK_THEME_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE,
+  darkThemeToggleDefaultValueProvider,
+} from './dark-theme-toggle.component';
 export {
   DarkThemeToggleClass,
   DarkThemeToggleProperties,
diff --git a/libs/flowbite-angular/dropdown/dropdown-divider.component.ts b/libs/flowbite-angular/dropdown/dropdown-divider.component.ts
index 37c04633..32c8fff8 100644
--- a/libs/flowbite-angular/dropdown/dropdown-divider.component.ts
+++ b/libs/flowbite-angular/dropdown/dropdown-divider.component.ts
@@ -2,16 +2,30 @@ import type { DropdownDividerClass, DropdownDividerTheme } from './dropdown-divi
 import { DropdownDividerThemeService } from './dropdown-divider.theme.service';
 import { DropdownComponent } from './dropdown.component';
 
+import type { DeepPartial } from 'flowbite-angular';
 import { BaseComponent } from 'flowbite-angular';
 
 import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<DropdownDividerTheme>
+>('FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const dropdownDividerDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/dropdowns/
  */
@@ -36,7 +50,7 @@ export class DropdownDividerComponent extends BaseComponent<DropdownDividerClass
   /**
    * Set the custom style for this dropdown divider
    */
-  public customStyle = model<Partial<DropdownDividerTheme>>({});
+  public customStyle = model(inject(FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/dropdown/dropdown-divider.theme.ts b/libs/flowbite-angular/dropdown/dropdown-divider.theme.ts
index f6f26405..831622cb 100644
--- a/libs/flowbite-angular/dropdown/dropdown-divider.theme.ts
+++ b/libs/flowbite-angular/dropdown/dropdown-divider.theme.ts
@@ -1,11 +1,11 @@
-import type { FlowbiteClass } from 'flowbite-angular';
+import type { DeepPartial, FlowbiteClass } from 'flowbite-angular';
 import { createTheme } from 'flowbite-angular/utils';
 
 /**
  * Required properties for the class generation of `DropdownDividerComponent`
  */
 export interface DropdownDividerProperties {
-  customStyle: Partial<DropdownDividerTheme>;
+  customStyle: DeepPartial<DropdownDividerTheme>;
 }
 
 /**
diff --git a/libs/flowbite-angular/dropdown/dropdown-header.component.ts b/libs/flowbite-angular/dropdown/dropdown-header.component.ts
index aad69190..feedd100 100644
--- a/libs/flowbite-angular/dropdown/dropdown-header.component.ts
+++ b/libs/flowbite-angular/dropdown/dropdown-header.component.ts
@@ -2,16 +2,30 @@ import type { DropdownHeaderClass, DropdownHeaderTheme } from './dropdown-header
 import { DropdownHeaderThemeService } from './dropdown-header.theme.service';
 import { DropdownComponent } from './dropdown.component';
 
+import type { DeepPartial } from 'flowbite-angular';
 import { BaseComponent } from 'flowbite-angular';
 
 import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<DropdownHeaderTheme>
+>('FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const dropdownHeaderDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/dropdowns/
  */
@@ -22,7 +36,6 @@ import {
     <div [class]="contentClasses().root">
       <ng-content />
     </div>
-    <div class="my-1 h-px bg-gray-100 dark:bg-gray-600"></div>
   `,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -41,7 +54,7 @@ export class DropdownHeaderComponent extends BaseComponent<DropdownHeaderClass>
   /**
    * Set the custom style for this dropdown header
    */
-  public customStyle = model<Partial<DropdownHeaderTheme>>({});
+  public customStyle = model(inject(FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/dropdown/dropdown-item.component.ts b/libs/flowbite-angular/dropdown/dropdown-item.component.ts
index ec9d0314..cc903925 100644
--- a/libs/flowbite-angular/dropdown/dropdown-item.component.ts
+++ b/libs/flowbite-angular/dropdown/dropdown-item.component.ts
@@ -9,10 +9,23 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<DropdownItemTheme>
+>('FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const dropdownItemDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/dropdowns/
  */
@@ -37,7 +50,7 @@ export class DropdownItemComponent extends BaseComponent<DropdownItemClass> {
   /**
    * Set the custom style for this dropdown item
    */
-  public customStyle = model<DeepPartial<DropdownItemTheme>>({});
+  public customStyle = model(inject(FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/dropdown/dropdown.component.ts b/libs/flowbite-angular/dropdown/dropdown.component.ts
index 9df1cda4..451a12b1 100644
--- a/libs/flowbite-angular/dropdown/dropdown.component.ts
+++ b/libs/flowbite-angular/dropdown/dropdown.component.ts
@@ -15,12 +15,49 @@ import {
   Component,
   contentChildren,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   viewChild,
   ViewEncapsulation,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
+export const FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE = new InjectionToken<string>(
+  'FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE = new InjectionToken<keyof DropdownPositions>(
+  'FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<DropdownTheme>
+>('FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const dropdownDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE,
+    useValue: 'Dropdown',
+  },
+  {
+    provide: FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE,
+    useValue: 'bottom-center',
+  },
+  {
+    provide: FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/dropdowns/
  */
@@ -94,23 +131,23 @@ export class DropdownComponent extends BaseComponent<DropdownClass> {
    *
    * @default Dropdown
    */
-  public label = model('Dropdown');
+  public label = model(inject(FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE));
   /**
    * Set if the dropdown is open
    *
    * @default false
    */
-  public isOpen = model<boolean>(false);
+  public isOpen = model(inject(FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE));
   /**
    * Set the dropdown position
    *
    * @default bottom-center
    */
-  public position = model<keyof DropdownPositions>('bottom-center');
+  public position = model(inject(FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE));
   /**
    * Set the custom style for this dropdown
    */
-  public customStyle = model<DeepPartial<DropdownTheme>>({});
+  public customStyle = model(inject(FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
@@ -130,12 +167,6 @@ export class DropdownComponent extends BaseComponent<DropdownClass> {
       this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_DOWN_SVG_ICON)
     );
   }
-
-  public override verify(): void {
-    if (this.dropdownItemChildren().length === 0) {
-      throw new Error('No DropdownItemComponent available');
-    }
-  }
   //#endregion
 
   /**
diff --git a/libs/flowbite-angular/dropdown/index.ts b/libs/flowbite-angular/dropdown/index.ts
index eeb107bc..e6107b3b 100644
--- a/libs/flowbite-angular/dropdown/index.ts
+++ b/libs/flowbite-angular/dropdown/index.ts
@@ -1,4 +1,11 @@
-export { DropdownComponent } from './dropdown.component';
+export {
+  DropdownComponent,
+  FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE,
+  FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE,
+  FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE,
+  dropdownDefaultValueProvider,
+} from './dropdown.component';
 export type {
   DropdownProperties,
   DropdownClass,
@@ -8,7 +15,11 @@ export type {
 export { dropdownTheme } from './dropdown.theme';
 export { DropdownThemeService, FLOWBITE_DROPDOWN_THEME_TOKEN } from './dropdown.theme.service';
 
-export { DropdownItemComponent } from './dropdown-item.component';
+export {
+  DropdownItemComponent,
+  FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
+  dropdownItemDefaultValueProvider,
+} from './dropdown-item.component';
 export type {
   DropdownItemProperties,
   DropdownItemClass,
@@ -20,7 +31,11 @@ export {
   FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN,
 } from './dropdown-item.theme.service';
 
-export { DropdownDividerComponent } from './dropdown-divider.component';
+export {
+  DropdownDividerComponent,
+  FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE,
+  dropdownDividerDefaultValueProvider,
+} from './dropdown-divider.component';
 export type {
   DropdownDividerProperties,
   DropdownDividerClass,
@@ -32,7 +47,11 @@ export {
   FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN,
 } from './dropdown-divider.theme.service';
 
-export { DropdownHeaderComponent } from './dropdown-header.component';
+export {
+  DropdownHeaderComponent,
+  FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE,
+  dropdownHeaderDefaultValueProvider,
+} from './dropdown-header.component';
 export type {
   DropdownHeaderProperties,
   DropdownHeaderClass,
diff --git a/libs/flowbite-angular/indicator/index.ts b/libs/flowbite-angular/indicator/index.ts
index 503a6c8f..0f068f98 100644
--- a/libs/flowbite-angular/indicator/index.ts
+++ b/libs/flowbite-angular/indicator/index.ts
@@ -1,4 +1,17 @@
-export { IndicatorComponent } from './indicators.component';
+export {
+  IndicatorComponent,
+  FLOWBITE_INDICATOR_COLOR_DEFAULT_VALUE,
+  FLOWBITE_INDICATOR_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_INDICATOR_HAS_BORDER_DEFAULT_VALUE,
+  FLOWBITE_INDICATOR_HAS_OFFSET_DEFAULT_VALUE,
+  FLOWBITE_INDICATOR_IS_DISABLED_DEFAULT_VALUE,
+  FLOWBITE_INDICATOR_IS_OUTLINE_DEFAULT_VALUE,
+  FLOWBITE_INDICATOR_IS_PILL_DEFAULT_VALUE,
+  FLOWBITE_INDICATOR_IS_ROUNDED_DEFAULT_VALUE,
+  FLOWBITE_INDICATOR_PLACEMENT_DEFAULT_VALUE,
+  FLOWBITE_INDICATOR_SIZE_DEFAULT_VALUE,
+  indicatorDefaultValueProvider,
+} from './indicators.component';
 export type {
   IndicatorProperties,
   indicatorClass,
diff --git a/libs/flowbite-angular/indicator/indicators.component.ts b/libs/flowbite-angular/indicator/indicators.component.ts
index fd73888e..242f8300 100644
--- a/libs/flowbite-angular/indicator/indicators.component.ts
+++ b/libs/flowbite-angular/indicator/indicators.component.ts
@@ -14,10 +14,95 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_INDICATOR_IS_PILL_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_INDICATOR_IS_PILL_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_INDICATOR_IS_OUTLINE_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_INDICATOR_IS_OUTLINE_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_INDICATOR_IS_DISABLED_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_INDICATOR_IS_DISABLED_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_INDICATOR_HAS_OFFSET_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_INDICATOR_HAS_OFFSET_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_INDICATOR_IS_ROUNDED_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_INDICATOR_IS_ROUNDED_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_INDICATOR_HAS_BORDER_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_INDICATOR_HAS_BORDER_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_INDICATOR_COLOR_DEFAULT_VALUE = new InjectionToken<keyof IndicatorColors>(
+  'FLOWBITE_INDICATOR_COLOR_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_INDICATOR_SIZE_DEFAULT_VALUE = new InjectionToken<keyof IndicatorSizes>(
+  'FLOWBITE_INDICATOR_SIZE_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_INDICATOR_PLACEMENT_DEFAULT_VALUE = new InjectionToken<
+  keyof IndicatorPositions | undefined
+>('FLOWBITE_INDICATOR_PLACEMENT_DEFAULT_VALUE');
+
+export const FLOWBITE_INDICATOR_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<IndicatorTheme>
+>('FLOWBITE_INDICATOR_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const indicatorDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_INDICATOR_IS_PILL_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_INDICATOR_IS_OUTLINE_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_INDICATOR_IS_DISABLED_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_INDICATOR_HAS_OFFSET_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_INDICATOR_IS_ROUNDED_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_INDICATOR_HAS_BORDER_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_INDICATOR_COLOR_DEFAULT_VALUE,
+    useValue: 'primary',
+  },
+  {
+    provide: FLOWBITE_INDICATOR_SIZE_DEFAULT_VALUE,
+    useValue: 'md',
+  },
+  {
+    provide: FLOWBITE_INDICATOR_PLACEMENT_DEFAULT_VALUE,
+    useValue: undefined,
+  },
+  {
+    provide: FLOWBITE_INDICATOR_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/indicators/
  */
@@ -40,59 +125,59 @@ export class IndicatorComponent extends BaseComponent<indicatorClass> {
    *
    * @default false
    */
-  public isPill = model<boolean>(false);
+  public isPill = model(inject(FLOWBITE_INDICATOR_IS_PILL_DEFAULT_VALUE));
   /**
    * Set if the indicator is outline
    *
    * @default false
    */
-  public isOutline = model<boolean>(false);
+  public isOutline = model(inject(FLOWBITE_INDICATOR_IS_OUTLINE_DEFAULT_VALUE));
   /**
    * Set if the indicator is disable
    *
    * @default false
    */
-  public isDisabled = model<boolean>(false);
+  public isDisabled = model(inject(FLOWBITE_INDICATOR_IS_DISABLED_DEFAULT_VALUE));
   /**
    * Set if the indicator has offset
    *
    * @default false
    */
-  public hasOffset = model<boolean>(false);
+  public hasOffset = model(inject(FLOWBITE_INDICATOR_HAS_OFFSET_DEFAULT_VALUE));
   /**
    * Set if the indicator is rounded
    *
    * @default false
    */
-  public isRounded = model<boolean>(false);
+  public isRounded = model(inject(FLOWBITE_INDICATOR_IS_ROUNDED_DEFAULT_VALUE));
   /**
    * Set if the indicator has border
    *
    * @default false
    */
-  public hasBorder = model<boolean>(false);
+  public hasBorder = model(inject(FLOWBITE_INDICATOR_HAS_BORDER_DEFAULT_VALUE));
   /**
    * Set the indicator color
    *
    * @default primary
    */
-  public color = model<keyof IndicatorColors>('primary');
+  public color = model(inject(FLOWBITE_INDICATOR_COLOR_DEFAULT_VALUE));
   /**
    * Set the indicator size
    *
    * @default md
    */
-  public size = model<keyof IndicatorSizes>('md');
+  public size = model(inject(FLOWBITE_INDICATOR_SIZE_DEFAULT_VALUE));
   /**
    * Set the indicator placement
    *
    * @default undefined
    */
-  public placement = model<keyof IndicatorPositions | undefined>(undefined);
+  public placement = model(inject(FLOWBITE_INDICATOR_PLACEMENT_DEFAULT_VALUE));
   /**
    * Set the custom style for this indicator
    */
-  public customStyle = model<DeepPartial<IndicatorTheme>>({});
+  public customStyle = model(inject(FLOWBITE_INDICATOR_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/modal/index.ts b/libs/flowbite-angular/modal/index.ts
index b44c79d6..e4ad7b87 100644
--- a/libs/flowbite-angular/modal/index.ts
+++ b/libs/flowbite-angular/modal/index.ts
@@ -1,4 +1,12 @@
-export { ModalComponent } from './modal.component';
+export {
+  ModalComponent,
+  FLOWBITE_MODAL_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_MODAL_IS_DISMISSABLE_DEFAULT_VALUE,
+  FLOWBITE_MODAL_IS_OPEN_DEFAULT_VALUE,
+  FLOWBITE_MODAL_POSITION_DEFAULT_VALUE,
+  FLOWBITE_MODAL_SIZE_DEFAULT_VALUE,
+  modalDefaultValueProvider,
+} from './modal.component';
 export type {
   ModalProperties,
   ModalClass,
@@ -9,7 +17,11 @@ export type {
 export { modalTheme } from './modal.theme';
 export { FLOWBITE_MODAL_THEME_TOKEN, ModalThemeService } from './modal.theme.service';
 
-export { ModalHeaderComponent } from './modal-header.component';
+export {
+  ModalHeaderComponent,
+  FLOWBITE_MODAL_HEADER_CUSTOM_STYLE_DEFAULT_VALUE,
+  modalHeaderDefaultValueProvider,
+} from './modal-header.component';
 export type {
   ModalHeaderProperties,
   ModalHeaderClass,
@@ -21,12 +33,20 @@ export {
   ModalHeaderThemeService,
 } from './modal-header.theme.service';
 
-export { ModalBodyComponent } from './modal-body.component';
+export {
+  ModalBodyComponent,
+  FLOWBITE_MODAL_BODY_CUSTOM_STYLE_DEFAULT_VALUE,
+  modalBodyDefaultValueProvider,
+} from './modal-body.component';
 export type { ModalBodyProperties, ModalBodyClass, ModalBodyTheme } from './modal-body.theme';
 export { modalBodyTheme } from './modal-body.theme';
 export { FLOWBITE_MODAL_BODY_THEME_TOKEN, ModalBodyThemeService } from './modal-body.theme.service';
 
-export { ModalFooterComponent } from './modal-footer.component';
+export {
+  ModalFooterComponent,
+  FLOWBITE_MODAL_FOOTER_CUSTOM_STYLE_DEFAULT_VALUE,
+  modalFooterDefaultValueProvider,
+} from './modal-footer.component';
 export type {
   ModalFooterProperties,
   ModalFooterClass,
diff --git a/libs/flowbite-angular/modal/modal-body.component.ts b/libs/flowbite-angular/modal/modal-body.component.ts
index e36c7ef3..432eeaac 100644
--- a/libs/flowbite-angular/modal/modal-body.component.ts
+++ b/libs/flowbite-angular/modal/modal-body.component.ts
@@ -9,10 +9,23 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_MODAL_BODY_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<ModalBodyTheme>
+>('FLOWBITE_MODAL_BODY_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const modalBodyDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_MODAL_BODY_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/modal/
  */
@@ -37,7 +50,7 @@ export class ModalBodyComponent extends BaseComponent<ModalBodyClass> {
   /**
    * Set the custom style for this modal body
    */
-  public customStyle = model<DeepPartial<ModalBodyTheme>>({});
+  public customStyle = model(inject(FLOWBITE_MODAL_BODY_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/modal/modal-footer.component.ts b/libs/flowbite-angular/modal/modal-footer.component.ts
index 8ff9f2f0..5b4937f2 100644
--- a/libs/flowbite-angular/modal/modal-footer.component.ts
+++ b/libs/flowbite-angular/modal/modal-footer.component.ts
@@ -9,10 +9,23 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_MODAL_FOOTER_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<ModalFooterTheme>
+>('FLOWBITE_MODAL_FOOTER_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const modalFooterDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_MODAL_FOOTER_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/modal/
  */
@@ -37,7 +50,7 @@ export class ModalFooterComponent extends BaseComponent<ModalFooterClass> {
   /**
    * Set the custom style for this modal footer
    */
-  public customStyle = model<DeepPartial<ModalFooterTheme>>({});
+  public customStyle = model(inject(FLOWBITE_MODAL_FOOTER_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/modal/modal-header.component.ts b/libs/flowbite-angular/modal/modal-header.component.ts
index 4055f397..faa1549b 100644
--- a/libs/flowbite-angular/modal/modal-header.component.ts
+++ b/libs/flowbite-angular/modal/modal-header.component.ts
@@ -12,11 +12,24 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
+export const FLOWBITE_MODAL_HEADER_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<ModalHeaderTheme>
+>('FLOWBITE_MODAL_HEADER_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const modalHeaderDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_MODAL_HEADER_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/modal/
  */
@@ -64,7 +77,7 @@ export class ModalHeaderComponent extends BaseComponent<ModalHeaderClass> implem
   /**
    * Set the custom style for this modal header
    */
-  public customStyle = model<DeepPartial<ModalHeaderTheme>>({});
+  public customStyle = model(inject(FLOWBITE_MODAL_HEADER_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/modal/modal.component.ts b/libs/flowbite-angular/modal/modal.component.ts
index 1496b177..ba8d80fe 100644
--- a/libs/flowbite-angular/modal/modal.component.ts
+++ b/libs/flowbite-angular/modal/modal.component.ts
@@ -13,6 +13,8 @@ import {
   Component,
   contentChild,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   TemplateRef,
   viewChild,
@@ -22,6 +24,49 @@ import {
 import { NavigationStart, Router } from '@angular/router';
 import { filter, Subject, takeUntil } from 'rxjs';
 
+export const FLOWBITE_MODAL_SIZE_DEFAULT_VALUE = new InjectionToken<keyof ModalSizes>(
+  'FLOWBITE_MODAL_SIZE_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_MODAL_POSITION_DEFAULT_VALUE = new InjectionToken<keyof ModalPositions>(
+  'FLOWBITE_MODAL_POSITION_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_MODAL_IS_DISMISSABLE_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_MODAL_IS_DISMISSABLE_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_MODAL_IS_OPEN_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_MODAL_IS_OPEN_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_MODAL_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<ModalTheme>
+>('FLOWBITE_MODAL_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const modalDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_MODAL_SIZE_DEFAULT_VALUE,
+    useValue: 'md',
+  },
+  {
+    provide: FLOWBITE_MODAL_POSITION_DEFAULT_VALUE,
+    useValue: 'center',
+  },
+  {
+    provide: FLOWBITE_MODAL_IS_DISMISSABLE_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_MODAL_IS_OPEN_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_MODAL_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/modal/
  */
@@ -64,7 +109,7 @@ export class ModalComponent extends BaseComponent<ModalClass> implements OnDestr
   /**
    * The child `ModalBodyComponent`
    */
-  public readonly modalBodyChild = contentChild(ModalBodyComponent);
+  public readonly modalBodyChild = contentChild.required(ModalBodyComponent);
   /**
    * The child `ModalFooterComponent`
    */
@@ -85,29 +130,29 @@ export class ModalComponent extends BaseComponent<ModalClass> implements OnDestr
    *
    * @default md
    */
-  public size = model<keyof ModalSizes>('md');
+  public size = model(inject(FLOWBITE_MODAL_SIZE_DEFAULT_VALUE));
   /**
    * Set the modal position
    *
    * @default center
    */
-  public position = model<keyof ModalPositions>('center');
+  public position = model(inject(FLOWBITE_MODAL_POSITION_DEFAULT_VALUE));
   /**
    * Set if the modal is dismissable
    *
    * @default false
    */
-  public isDismissable = model<boolean>(false);
+  public isDismissable = model(inject(FLOWBITE_MODAL_IS_DISMISSABLE_DEFAULT_VALUE));
   /**
    * Set if the modal is open
    *
    * @default false
    */
-  public isOpen = model<boolean>(false);
+  public isOpen = model(inject(FLOWBITE_MODAL_IS_OPEN_DEFAULT_VALUE));
   /**
    * Set the custom style for this modal
    */
-  public customStyle = model<DeepPartial<ModalTheme>>({});
+  public customStyle = model(inject(FLOWBITE_MODAL_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
@@ -130,12 +175,6 @@ export class ModalComponent extends BaseComponent<ModalClass> implements OnDestr
       )
       .subscribe(() => this.close());
   }
-
-  public override verify(): void {
-    if (this.modalBodyChild() === undefined) {
-      throw new Error('No ModalBodyComponent available');
-    }
-  }
   //#endregion
 
   ngOnDestroy(): void {
@@ -180,7 +219,6 @@ export class ModalComponent extends BaseComponent<ModalClass> implements OnDestr
   }
 
   onKeydownHandler(event: KeyboardEvent) {
-    console.log('hello');
     if (event.key === 'Escape') {
       this.close();
     }
diff --git a/libs/flowbite-angular/navbar/index.ts b/libs/flowbite-angular/navbar/index.ts
index 8448cfcb..d9128c90 100644
--- a/libs/flowbite-angular/navbar/index.ts
+++ b/libs/flowbite-angular/navbar/index.ts
@@ -1,9 +1,22 @@
-export { NavbarComponent } from './navbar.component';
+export {
+  NavbarComponent,
+  FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE,
+  FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE,
+  FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE,
+  FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE,
+  FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE,
+  navbarDefaultValueProvider,
+} from './navbar.component';
 export type { NavbarProperties, NavbarClass, NavbarColors, NavbarTheme } from './navbar.theme';
 export { navbarTheme } from './navbar.theme';
 export { FLOWBITE_NAVBAR_THEME_TOKEN, NavbarThemeService } from './navbar.theme.service';
 
-export { NavbarBrandComponent } from './navbar-brand.component';
+export {
+  NavbarBrandComponent,
+  FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE,
+  navbarBrandDefaultThemeProvider,
+} from './navbar-brand.component';
 export type {
   NavbarBrandProperties,
   NavbarBrandClass,
@@ -15,7 +28,11 @@ export {
   NavbarBrandThemeService,
 } from './navbar-brand.theme.service';
 
-export { NavbarContentComponent } from './navbar-content.component';
+export {
+  NavbarContentComponent,
+  FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
+  navbarContentDefaultValueProvider,
+} from './navbar-content.component';
 export type {
   NavbarContentProperties,
   NavbarContentClass,
@@ -27,7 +44,11 @@ export {
   NavbarContentThemeService,
 } from './navbar-content.theme.service';
 
-export { NavbarItemComponent } from './navbar-item.component';
+export {
+  NavbarItemComponent,
+  FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
+  navbarItemDefaultValueProvider,
+} from './navbar-item.component';
 export type { NabvarItemProperties, NavbarItemClass, NavbarItemTheme } from './navbar-item.theme';
 export { navbarItemTheme } from './navbar-item.theme';
 export {
@@ -35,7 +56,11 @@ export {
   NavbarItemThemeService,
 } from './navbar-item.theme.service';
 
-export { NavbarToggleComponent } from './navbar-toggle.component';
+export {
+  NavbarToggleComponent,
+  FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE,
+  navbarToggleDefaultValueProvider,
+} from './navbar-toggle.component';
 export type {
   NavbarToggleTheme,
   NavbarToggleClass,
@@ -47,7 +72,11 @@ export {
   NavbarToggleThemeService,
 } from './navbar-toggle.theme.service';
 
-export { NavbarIconButtonComponent } from './navbar-icon-button.component';
+export {
+  NavbarIconButtonComponent,
+  FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE,
+  navbarIconButtonDefaultValueProvider,
+} from './navbar-icon-button.component';
 export type {
   NavbarIconButtonProperties,
   NavbarIconButtonClass,
diff --git a/libs/flowbite-angular/navbar/navbar-brand.component.ts b/libs/flowbite-angular/navbar/navbar-brand.component.ts
index 176bffb1..4cba0f98 100644
--- a/libs/flowbite-angular/navbar/navbar-brand.component.ts
+++ b/libs/flowbite-angular/navbar/navbar-brand.component.ts
@@ -9,10 +9,23 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<NavbarBrandTheme>
+>('FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const navbarBrandDefaultThemeProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/navbar/
  */
@@ -37,7 +50,7 @@ export class NavbarBrandComponent extends BaseComponent<NavbarBrandClass> {
   /**
    * Set the custom style for this navbar brand
    */
-  public customStyle = model<DeepPartial<NavbarBrandTheme>>({});
+  public customStyle = model(inject(FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/navbar/navbar-content.component.ts b/libs/flowbite-angular/navbar/navbar-content.component.ts
index 402f7943..c49da1d6 100644
--- a/libs/flowbite-angular/navbar/navbar-content.component.ts
+++ b/libs/flowbite-angular/navbar/navbar-content.component.ts
@@ -12,10 +12,23 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<NavbarContentTheme>
+>('FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const navbarContentDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/navbar/
  */
@@ -32,7 +45,7 @@ import {
   },
   animations: [
     trigger('isOpenAnimation', [
-      state('true', style({ height: '*', class: 'test' })),
+      state('true', style({ height: '*' })),
       state('false', style({ height: '0px' })),
       transition('true <=> false', animate('300ms')),
     ]),
@@ -60,7 +73,7 @@ export class NavbarContentComponent extends BaseComponent<NavbarContentClass> im
   /**
    * Set the custom style for this navbar content
    */
-  public customStyle = model<DeepPartial<NavbarContentTheme>>({});
+  public customStyle = model(inject(FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/navbar/navbar-icon-button.component.ts b/libs/flowbite-angular/navbar/navbar-icon-button.component.ts
index 1811d324..43a5ee63 100644
--- a/libs/flowbite-angular/navbar/navbar-icon-button.component.ts
+++ b/libs/flowbite-angular/navbar/navbar-icon-button.component.ts
@@ -11,10 +11,23 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<NavbarIconButtonTheme>
+>('FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const navbarIconButtonDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/navbar/
  */
@@ -52,7 +65,7 @@ export class NavbarIconButtonComponent extends BaseComponent<NavbarIconButtonCla
   /**
    * Set the custom style for this navbar icon button
    */
-  public customStyle = model<DeepPartial<NavbarIconButtonTheme>>({});
+  public customStyle = model(inject(FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
@@ -62,10 +75,4 @@ export class NavbarIconButtonComponent extends BaseComponent<NavbarIconButtonCla
       customStyle: this.customStyle(),
     });
   }
-
-  public override verify(): void {
-    if (this.navbarComponent === null && this.navbarContentComponent === null) {
-      throw new Error('No NavbarComponent/NavbarContentComponent available');
-    }
-  }
 }
diff --git a/libs/flowbite-angular/navbar/navbar-item.component.ts b/libs/flowbite-angular/navbar/navbar-item.component.ts
index f1d5abf1..0c04371c 100644
--- a/libs/flowbite-angular/navbar/navbar-item.component.ts
+++ b/libs/flowbite-angular/navbar/navbar-item.component.ts
@@ -12,10 +12,23 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<NavbarItemTheme>
+>('FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const navbarItemDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/navbar/
  */
@@ -59,7 +72,7 @@ export class NavbarItemComponent extends BaseComponent<NavbarItemClass> {
   /**
    * Set the custom style for this navbar item
    */
-  public customStyle = model<DeepPartial<NavbarItemTheme>>({});
+  public customStyle = model(inject(FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/navbar/navbar-toggle.component.ts b/libs/flowbite-angular/navbar/navbar-toggle.component.ts
index c70e7cb9..c5dc0054 100644
--- a/libs/flowbite-angular/navbar/navbar-toggle.component.ts
+++ b/libs/flowbite-angular/navbar/navbar-toggle.component.ts
@@ -11,11 +11,24 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
+export const FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<NavbarToggleTheme>
+>('FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const navbarToggleDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/navbar/
  */
@@ -56,7 +69,7 @@ export class NavbarToggleComponent extends BaseComponent<NavbarToggleClass> {
   /**
    * Set the custom style for this navbar toggle
    */
-  public customStyle = model<DeepPartial<NavbarToggleTheme>>({});
+  public customStyle = model(inject(FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/navbar/navbar.component.ts b/libs/flowbite-angular/navbar/navbar.component.ts
index abac650e..95f000fa 100644
--- a/libs/flowbite-angular/navbar/navbar.component.ts
+++ b/libs/flowbite-angular/navbar/navbar.component.ts
@@ -12,11 +12,64 @@ import {
   Component,
   contentChild,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   untracked,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE = new InjectionToken<keyof NavbarColors>(
+  'FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<NavbarTheme>
+>('FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const navbarDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE,
+    useValue: 'primary',
+  },
+  {
+    provide: FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/navbar/
  */
@@ -43,7 +96,7 @@ export class NavbarComponent extends BaseComponent<NavbarClass> {
   /**
    * The child `NavbarContentComponent`
    */
-  public readonly navbarContentChild = contentChild(NavbarContentComponent);
+  public readonly navbarContentChild = contentChild.required(NavbarContentComponent);
 
   //#region properties
   /**
@@ -51,35 +104,35 @@ export class NavbarComponent extends BaseComponent<NavbarClass> {
    *
    * @default primary
    */
-  public color = model<keyof NavbarColors>('primary');
+  public color = model(inject(FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE));
   /**
    * Set if the navbar is open
    *
    * @default false
    */
-  public isOpen = model<boolean>(false);
+  public isOpen = model(inject(FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE));
   /**
    * Set if the navbar is rounded
    *
    * @default false
    */
-  public isRounded = model<boolean>(false);
+  public isRounded = model(inject(FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE));
   /**
    * Set if the navbar has border
    *
    * @default false
    */
-  public hasBorder = model<boolean>(false);
+  public hasBorder = model(inject(FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE));
   /**
    * Set if the navbar is fixed
    *
    * @default false
    */
-  public isFixed = model<boolean>(false);
+  public isFixed = model(inject(FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE));
   /**
    * Set the custom style for this navbar
    */
-  public customStyle = model<DeepPartial<NavbarTheme>>({});
+  public customStyle = model(inject(FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
@@ -91,12 +144,6 @@ export class NavbarComponent extends BaseComponent<NavbarClass> {
       customStyle: this.customStyle(),
     });
   }
-
-  public override verify(): void {
-    if (this.navbarContentChild() === undefined) {
-      throw new Error('No NavbarContentComponent available');
-    }
-  }
   //#endregion
 
   /**
diff --git a/libs/flowbite-angular/scroll-top/index.ts b/libs/flowbite-angular/scroll-top/index.ts
index 4ffeafb6..33ba1364 100644
--- a/libs/flowbite-angular/scroll-top/index.ts
+++ b/libs/flowbite-angular/scroll-top/index.ts
@@ -1,4 +1,10 @@
-export { ScrollTopComponent } from './scroll-top.component';
+export {
+  ScrollTopComponent,
+  FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE,
+  FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE,
+  scrollTopDefaultValueProvider,
+} from './scroll-top.component';
 export type {
   ScrollTopTheme,
   ScrollTopClass,
diff --git a/libs/flowbite-angular/scroll-top/scroll-top.component.ts b/libs/flowbite-angular/scroll-top/scroll-top.component.ts
index d76cc3f4..57f57fe5 100644
--- a/libs/flowbite-angular/scroll-top/scroll-top.component.ts
+++ b/libs/flowbite-angular/scroll-top/scroll-top.component.ts
@@ -16,11 +16,40 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
+export const FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE = new InjectionToken<keyof ScrollTopColors>(
+  'FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE = new InjectionToken<
+  keyof ScrollTopPositions
+>('FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE');
+
+export const FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<ScrollTopTheme>
+>('FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const scrollTopDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE,
+    useValue: 'primary',
+  },
+  {
+    provide: FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE,
+    useValue: 'bottom-right',
+  },
+  {
+    provide: FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * Provide a way to go at the top of the page via a button
  */
@@ -57,17 +86,17 @@ export class ScrollTopComponent extends BaseComponent<ScrollTopClass> implements
    *
    * @default primary
    */
-  public color = model<keyof ScrollTopColors>('primary');
+  public color = model(inject(FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE));
   /**
    * Set the scroll top position
    *
    * @default bottom-right
    */
-  public position = model<keyof ScrollTopPositions>('bottom-right');
+  public position = model(inject(FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE));
   /**
    * Set the custom style for this scroll top
    */
-  public customStyle = model<DeepPartial<ScrollTopTheme>>({});
+  public customStyle = model(inject(FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implemenation
diff --git a/libs/flowbite-angular/sidebar/index.ts b/libs/flowbite-angular/sidebar/index.ts
index b4037924..0f89f9b3 100644
--- a/libs/flowbite-angular/sidebar/index.ts
+++ b/libs/flowbite-angular/sidebar/index.ts
@@ -1,4 +1,12 @@
-export { SidebarComponent } from './sidebar.component';
+export {
+  SidebarComponent,
+  FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE,
+  FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE,
+  FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE,
+  FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE,
+  sidebarDefaultValueProvider,
+} from './sidebar.component';
 export type {
   SidebarProperties,
   SidebarClass,
@@ -9,7 +17,13 @@ export type {
 export { sidebarTheme } from './sidebar.theme';
 export { FLOWBITE_SIDEBAR_THEME_TOKEN, SidebarThemeService } from './sidebar.theme.service';
 
-export { SidebarItemComponent } from './sidebar-item.component';
+export {
+  SidebarItemComponent,
+  FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE,
+  FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE,
+  sidebarItemDefaultValueProvider,
+} from './sidebar-item.component';
 export type {
   SidebarItemProperties,
   SidebarItemClass,
@@ -21,7 +35,11 @@ export {
   SidebarItemThemeService,
 } from './sidebar-item.theme.service';
 
-export { SidebarItemGroupComponent } from './sidebar-item-group.component';
+export {
+  SidebarItemGroupComponent,
+  FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE,
+  sidebarItemGroupDefaultValueProvider,
+} from './sidebar-item-group.component';
 export type {
   SidebarItemGroupProperties,
   SidebarItemGroupClass,
@@ -33,7 +51,13 @@ export {
   SidebarItemGroupThemeService,
 } from './sidebar-item-group.theme.service';
 
-export { SidebarToggleComponent } from './sidebar-toggle.component';
+export {
+  SidebarToggleComponent,
+  FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE,
+  FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE,
+  FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE,
+  sidebarToggleDefaultValueProvider,
+} from './sidebar-toggle.component';
 export type {
   SidebarToggleTheme,
   SidebarToggleClass,
@@ -46,7 +70,11 @@ export {
   SidebarToggleThemeService,
 } from './sidebar-toggle.theme.service';
 
-export { SidebarPageContentComponent } from './sidebar-page-content.component';
+export {
+  SidebarPageContentComponent,
+  FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
+  sidebarPageContentDefaultValueProvider,
+} from './sidebar-page-content.component';
 export type {
   SidebarPageContentClass,
   SidebarPageContentProperties,
@@ -58,7 +86,11 @@ export {
   SidebarPageContentThemeService,
 } from './sidebar-page-content.theme.service';
 
-export { SidebarMenuComponent } from './sidebar-menu.component';
+export {
+  SidebarMenuComponent,
+  FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE,
+  sidebarMenuDefaultValueProvider,
+} from './sidebar-menu.component';
 export type {
   SidebarMenuClass,
   SidebarMenuProperties,
diff --git a/libs/flowbite-angular/sidebar/sidebar-item-group.component.ts b/libs/flowbite-angular/sidebar/sidebar-item-group.component.ts
index 7dfc4dba..0b2f44c6 100644
--- a/libs/flowbite-angular/sidebar/sidebar-item-group.component.ts
+++ b/libs/flowbite-angular/sidebar/sidebar-item-group.component.ts
@@ -14,12 +14,25 @@ import {
   Component,
   contentChildren,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   untracked,
   ViewEncapsulation,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
+export const FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<SidebarItemGroupTheme>
+>('FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const sidebarItemGroupDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/sidebar/
  */
@@ -89,7 +102,7 @@ export class SidebarItemGroupComponent extends BaseComponent<SidebarItemGroupCla
   /**
    * Set the custom style for this sidebar item group
    */
-  public customStyle = model<DeepPartial<SidebarItemGroupTheme>>({});
+  public customStyle = model(inject(FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
@@ -100,12 +113,6 @@ export class SidebarItemGroupComponent extends BaseComponent<SidebarItemGroupCla
     });
   }
 
-  public override verify(): void {
-    if (this.sidebarItemChildren().length === 0) {
-      throw new Error('No SidebarItemComponent available');
-    }
-  }
-
   public override init(): void {
     this.iconRegistry.addRawSvgIconInNamepsace(
       'flowbite-angular',
diff --git a/libs/flowbite-angular/sidebar/sidebar-item.component.ts b/libs/flowbite-angular/sidebar/sidebar-item.component.ts
index bf618067..e4733eaf 100644
--- a/libs/flowbite-angular/sidebar/sidebar-item.component.ts
+++ b/libs/flowbite-angular/sidebar/sidebar-item.component.ts
@@ -15,10 +15,39 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE = new InjectionToken<string | undefined>(
+  'FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE = new InjectionToken<string | undefined>(
+  'FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<SidebarItemTheme>
+>('FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const sidebarItemDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE,
+    useValue: undefined,
+  },
+  {
+    provide: FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE,
+    useValue: undefined,
+  },
+  {
+    provide: FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/sidebar/
  */
@@ -78,7 +107,7 @@ export class SidebarItemComponent extends BaseComponent<SidebarItemClass> {
    *
    * @default undefined
    */
-  public icon = model<string | undefined>(undefined);
+  public icon = model(inject(FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE));
   /**
    * Set the sidebar item color
    *
@@ -93,11 +122,11 @@ export class SidebarItemComponent extends BaseComponent<SidebarItemClass> {
    *
    * @default undefined
    */
-  public label = model<string | undefined>(undefined);
+  public label = model(inject(FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE));
   /**
    * Set the custom style for this sidebar item
    */
-  public customStyle = model<DeepPartial<SidebarItemTheme>>({});
+  public customStyle = model(inject(FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
@@ -109,12 +138,6 @@ export class SidebarItemComponent extends BaseComponent<SidebarItemClass> {
       customStyle: this.customStyle(),
     });
   }
-
-  public override verify(): void {
-    if (this.sidebarMenuComponent === undefined && this.sidebarItemGroupComponent === undefined) {
-      throw new Error('No SidebarMenuComponent/SidebarItemGroupComponent available');
-    }
-  }
   //#endregion
 
   /**
diff --git a/libs/flowbite-angular/sidebar/sidebar-menu.component.ts b/libs/flowbite-angular/sidebar/sidebar-menu.component.ts
index 86d422da..a661f55c 100644
--- a/libs/flowbite-angular/sidebar/sidebar-menu.component.ts
+++ b/libs/flowbite-angular/sidebar/sidebar-menu.component.ts
@@ -13,10 +13,23 @@ import {
   Component,
   contentChildren,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<SidebarMenuTheme>
+>('FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const sidebarMenuDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/sidebar/
  */
@@ -55,7 +68,7 @@ export class SidebarMenuComponent extends BaseComponent<SidebarMenuClass> {
   /**
    * Set the custom style for this sidebar menu
    */
-  public customStyle = model<DeepPartial<SidebarMenuTheme>>({});
+  public customStyle = model(inject(FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   public override fetchClass(): SidebarMenuClass {
@@ -67,12 +80,6 @@ export class SidebarMenuComponent extends BaseComponent<SidebarMenuClass> {
     });
   }
 
-  public override verify(): void {
-    if (this.sidebarItemChildren().length === 0 && this.sidebarItemGroupChildren().length === 0) {
-      throw new Error('No SidebarItemComponent/SidebarItemGroupComponent available');
-    }
-  }
-
   /**
    * Toggle visibility of ll children to false
    */
diff --git a/libs/flowbite-angular/sidebar/sidebar-page-content.component.ts b/libs/flowbite-angular/sidebar/sidebar-page-content.component.ts
index e8516593..e2d72be5 100644
--- a/libs/flowbite-angular/sidebar/sidebar-page-content.component.ts
+++ b/libs/flowbite-angular/sidebar/sidebar-page-content.component.ts
@@ -12,10 +12,23 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<SidebarPageContentTheme>
+>('FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const sidebarPageContentDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/sidebar/
  */
@@ -40,7 +53,7 @@ export class SidebarPageContentComponent extends BaseComponent<SidebarPageConten
   /**
    * Set the custom style for this sidebar page content
    */
-  public customStyle = model<DeepPartial<SidebarPageContentTheme>>({});
+  public customStyle = model(inject(FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE));
   //endregion
 
   //region BaseComponent implementation
diff --git a/libs/flowbite-angular/sidebar/sidebar-toggle.component.ts b/libs/flowbite-angular/sidebar/sidebar-toggle.component.ts
index 29e4f380..a81a986f 100644
--- a/libs/flowbite-angular/sidebar/sidebar-toggle.component.ts
+++ b/libs/flowbite-angular/sidebar/sidebar-toggle.component.ts
@@ -17,11 +17,40 @@ import {
   ChangeDetectionStrategy,
   Component,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   ViewEncapsulation,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
+export const FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE = new InjectionToken<keyof SidebarColors>(
+  'FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE = new InjectionToken<
+  keyof SidebarToggleSizes
+>('FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE');
+
+export const FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<SidebarToggleTheme>
+>('FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const sidebarToggleDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE,
+    useValue: 'primary',
+  },
+  {
+    provide: FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE,
+    useValue: 'sm',
+  },
+  {
+    provide: FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/sidebar/
  */
@@ -54,7 +83,7 @@ export class SidebarToggleComponent extends BaseComponent<SidebarToggleClass> im
    *
    * @default The injected `SidebarComponent`
    */
-  public readonly sidebarComponent = model<SidebarComponent>(inject(SidebarComponent));
+  public readonly sidebarComponent = model(inject(SidebarComponent));
 
   //#region properties
   /**
@@ -62,17 +91,17 @@ export class SidebarToggleComponent extends BaseComponent<SidebarToggleClass> im
    *
    * @default primary
    */
-  public color = model<keyof SidebarColors>('primary');
+  public color = model(inject(FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE));
   /**
    * Set the sidebar toggle size
    *
    * @default sm
    */
-  public size = model<keyof SidebarToggleSizes>('sm');
+  public size = model(inject(FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE));
   /**
    * Set the custom style for this sidebar toggle
    */
-  public customStyle = model<DeepPartial<SidebarToggleTheme>>({});
+  public customStyle = model(inject(FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
diff --git a/libs/flowbite-angular/sidebar/sidebar.component.ts b/libs/flowbite-angular/sidebar/sidebar.component.ts
index 767fd303..f19ee202 100644
--- a/libs/flowbite-angular/sidebar/sidebar.component.ts
+++ b/libs/flowbite-angular/sidebar/sidebar.component.ts
@@ -17,11 +17,56 @@ import {
   Component,
   contentChild,
   inject,
+  InjectionToken,
+  makeEnvironmentProviders,
   model,
   untracked,
   ViewEncapsulation,
 } from '@angular/core';
 
+export const FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE = new InjectionToken<keyof SidebarColors>(
+  'FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE = new InjectionToken<
+  keyof SidebarDisplayMode
+>('FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE');
+
+export const FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE'
+);
+
+export const FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
+  DeepPartial<SidebarTheme>
+>('FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE');
+
+export const sidebarDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE,
+    useValue: 'primary',
+  },
+  {
+    provide: FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE,
+    useValue: 'push',
+  },
+  {
+    provide: FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE,
+    useValue: false,
+  },
+  {
+    provide: FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE,
+    useValue: {},
+  },
+]);
+
 /**
  * @see https://flowbite.com/docs/components/sidebar/
  */
@@ -40,11 +85,11 @@ export class SidebarComponent extends BaseComponent<SidebarClass> implements OnI
   /**
    * The child `SidebarMenuComponent`
    */
-  public readonly sidebarMenuChild = contentChild(SidebarMenuComponent);
+  public readonly sidebarMenuChild = contentChild.required(SidebarMenuComponent);
   /**
    * The child `SidebarPageContentComponent`
    */
-  public readonly sidebarPageContentChild = contentChild(SidebarPageContentComponent);
+  public readonly sidebarPageContentChild = contentChild.required(SidebarPageContentComponent);
 
   //#region properties
   /**
@@ -52,29 +97,29 @@ export class SidebarComponent extends BaseComponent<SidebarClass> implements OnI
    *
    * @default primary
    */
-  public color = model<keyof SidebarColors>('primary');
+  public color = model(inject(FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE));
   /**
    * Set the sidebar display mode
    *
    * @default push
    */
-  public displayMode = model<keyof SidebarDisplayMode>('push');
+  public displayMode = model(inject(FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE));
   /**
    * Set is the sidebar is open
    *
    * @default false
    */
-  public isOpen = model<boolean>(false);
+  public isOpen = model(inject(FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE));
   /**
    * Set is the sidebar is rounded
    *
    * @default false
    */
-  public isRounded = model<boolean>(false);
+  public isRounded = model(inject(FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE));
   /**
    * Set the custom style for this sidebar
    */
-  public customStyle = model<DeepPartial<SidebarTheme>>({});
+  public customStyle = model(inject(FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion
 
   //#region BaseComponent implementation
@@ -85,16 +130,6 @@ export class SidebarComponent extends BaseComponent<SidebarClass> implements OnI
       customStyle: this.customStyle(),
     });
   }
-
-  public override verify(): void {
-    if (this.sidebarMenuChild() === undefined) {
-      throw new Error('No SidebarMenuComponent available');
-    }
-
-    if (this.sidebarPageContentChild() === undefined) {
-      throw new Error('No SidebarPageContentComponent available');
-    }
-  }
   //#endregion
 
   /**
diff --git a/libs/flowbite-angular/theme/README.md b/libs/flowbite-angular/theme/README.md
new file mode 100644
index 00000000..d74f8ccc
--- /dev/null
+++ b/libs/flowbite-angular/theme/README.md
@@ -0,0 +1,4 @@
+# flowbite-angular/theme
+
+Secondary entry point of `flowbite-angular`. It can be used by importing from
+`flowbite-angular/theme`.
diff --git a/libs/flowbite-angular/theme/flowbite-theme.directive.ts b/libs/flowbite-angular/theme/flowbite-theme.directive.ts
new file mode 100644
index 00000000..22ff905d
--- /dev/null
+++ b/libs/flowbite-angular/theme/flowbite-theme.directive.ts
@@ -0,0 +1,75 @@
+import type { FlowbiteTheme } from 'flowbite-angular';
+
+import type { OnInit } from '@angular/core';
+import { afterNextRender, Directive, inject, Injector, signal, untracked } from '@angular/core';
+
+/**
+ * Use to give a clean API on the current application theme
+ */
+@Directive({
+  standalone: true,
+  selector: '[flowbiteTheme]',
+})
+export class FlowbiteThemeDirective implements OnInit {
+  private readonly injector = inject(Injector);
+
+  private readonly localStorageKey = 'color-theme';
+  private readonly _currentTheme = signal<FlowbiteTheme>('light');
+
+  public ngOnInit(): void {
+    afterNextRender(
+      () => {
+        this.toggleTheme(this.getLocalStorageTheme());
+      },
+      { injector: this.injector }
+    );
+  }
+
+  /**
+   * Get the application theme based on `signals`
+   */
+  public readonly currentTheme = this._currentTheme.asReadonly();
+
+  /**
+   * Get theme from the `localStorage`
+   *
+   * @returns The current theme saved in the `localStorage` with the key `color-theme`
+   */
+  public getLocalStorageTheme(): FlowbiteTheme {
+    return localStorage.getItem(this.localStorageKey) === 'dark' ? 'dark' : 'light';
+  }
+
+  /**
+   * Toggle the theme saved in the `localStorage` and available in `currentTheme`
+   *
+   * @param theme If provided, force the theme instead of toggling it between light and dark mode
+   */
+  public toggleTheme(theme?: FlowbiteTheme): void {
+    if (!theme) {
+      const tmpTheme = untracked(() => this.currentTheme());
+
+      if (tmpTheme === 'dark') theme = 'light';
+      else theme = 'dark';
+    }
+
+    this.setTheme(theme);
+  }
+
+  /**
+   * Set the theme inside the page
+   *
+   * @param theme Theme to apply
+   */
+  public setTheme(theme: FlowbiteTheme): void {
+    try {
+      localStorage.setItem(this.localStorageKey, theme);
+    } catch (error) {
+      console.warn('Failed to save theme to localStorage:', error);
+    }
+    this._currentTheme.set(theme);
+
+    theme === 'dark'
+      ? document.documentElement.classList.add('dark')
+      : document.documentElement.classList.remove('dark');
+  }
+}
diff --git a/libs/flowbite-angular/theme/index.ts b/libs/flowbite-angular/theme/index.ts
new file mode 100644
index 00000000..ee9bf5c8
--- /dev/null
+++ b/libs/flowbite-angular/theme/index.ts
@@ -0,0 +1 @@
+export { FlowbiteThemeDirective } from './flowbite-theme.directive';
diff --git a/libs/flowbite-angular/theme/ng-package.json b/libs/flowbite-angular/theme/ng-package.json
new file mode 100644
index 00000000..1f7f6a0d
--- /dev/null
+++ b/libs/flowbite-angular/theme/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "./index.ts"
+  }
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index f6cbb60f..02f55fe4 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -37,6 +37,7 @@
       "flowbite-angular/sanitize-html": ["libs/flowbite-angular/sanitize-html/index.ts"],
       "flowbite-angular/scroll-top": ["libs/flowbite-angular/scroll-top/index.ts"],
       "flowbite-angular/sidebar": ["libs/flowbite-angular/sidebar/index.ts"],
+      "flowbite-angular/theme": ["libs/flowbite-angular/theme/index.ts"],
       "flowbite-angular/utils": ["libs/flowbite-angular/utils/index.ts"]
     }
   },