how to use Flowbite in angular project?

Question

I want to use Flowbite in my project.I did the following steps but it still doesn't work.

I installed the tailwind first, Tailwind is working fine now.
Then I installed Flowbite using npm, and add Flowbite as a plugin inside the tailwind.config.js file. Base on this link: https://flowbite.com/docs/getting-started/quickstart/

npm i flowbite

tailwind.config.js file ‍‍‍‍‍

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/flowbite/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [require('flowbite/plugin')]
}

angular.js file ‍‍‍‍‍

"architect": {
   "build": {
     "options": {
        "scripts": ["node_modules/flowbite/dist/flowbite.js"]
     },
}

I even used the package below, but it still doesn't work.

flowbite-angular

https://www.npmjs.com/package/flowbite-angular

For example, I use the accordion component, the style files work correctly, but the accordion does not open and close. @PankajParkar — Hossein Bajan, Jul 30 '22 at 09:27
The library has 14 weekly downloads. So i recommend you to use librarys with have more than 1k weekly downloads. Another options is to fork the project and try to implement yourself — Guiditox, Jul 30 '22 at 12:24

score 3 · Answer 1 · answered Feb 28 '23 at 11:30

I ran into this issue recently, and what I did was to implement mine slightly based on Vue's implementation.

npm i flowbite --save
Import the function needed for the component to work

import {
  initAccordions,
  initCarousels,
  initCollapses,
  initDials,
  initDismisses,
  initDrawers,
  initDropdowns,
  initModals,
  initPopovers,
  initTabs,
  initTooltips,
} from 'flowbite';

export class HomeComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {
    initAccordions();
    initCarousels();
    initCollapses();
    initDials();
    initDismisses();
    initDrawers();
    initDropdowns();
    initModals();
    initPopovers();
    initTabs();
    initTooltips();
  }
}

You can also choose to import flowbite in tailwind.config.js, but it made no difference for me.

score 1 · Answer 2 · answered Dec 02 '22 at 12:44

You can directly clone this flowbite-angular open source library and start using the UI components from it after importing the respective library modules. As af now flowbite is not fully developed for Angular, we do not have solution for some components which are not covered in this library.

score 1 · Answer 3 · answered Dec 20 '22 at 22:00

maybe is late, but anyways for me works following the next steps:

1- I run the command npm i flowbite in my project angular.

2- In tailwind.config.js file ‍‍in the section content i added the line : "./node_modules/flowbite/**/*.js"

3- Then in the same file, in the section plugin a i added the line : require('flowbite/plugin')

4-You have to download the flowbite.js and saved into assets folder

5-After that, in the index.html file import the flowbite.js. Here a example

<script src="./assets/js/flowbite/flowbite.js"></script>

score 0 · Answer 4 · answered Nov 02 '22 at 16:13

flowbite does not support angular. The flowbite-angular thing is not released yet, nor supported.

As one of the comments mention, you can try to access the git and implement yourself.

I'd also suggest try having a look at the tailwind plugins like tailwind forms etc. which can help with a lot of features.

Mush88 · Answer 5 · 2023-03-24T08:43:02.340

Here is what you're probably missing https://github.com/themesberg/flowbite

EDIT: the answer here under doesn't work. The init..() function should be call in the OnInit() as the goal is to initialize components based on data attribute selectors

ngOnInit(): void {
    initTooltips()
    initDials()
  }

// This will not work:
import { initFlowbite } from 'flowbite';
// ...
bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(BrowserModule),
    {
      provide: APP_INITIALIZER,
      useFactory: () => initFlowbite,
      multi: true
    }
  ]
})

how to use Flowbite in angular project?

5 Answers5