themesberg/flowbite-angular

Official Angular components built for Flowbite and Tailwind CSS

🚧 flowbite-angular (unreleased) 🚧

Build websites even faster with components on top of Angular and Tailwind CSS

---

flowbite-angular is an open source collection of UI components, built in Angular, with utility classes from Tailwind CSS that you can use as a starting point for user interfaces and websites.

Table of Contents

• Documentation
• Getting started
• Components
• Community
• Contributing
• Figma
• Copyright and license

Documentation

Documentation for flowbite-angular is not yet finished.

If you want to browse the components, visit flowbite-angular.com.

If you want to learn more about Flowbite, visit Flowbite docs.

Getting started

To use flowbite-angular, you just need to setup flowbite normally and install flowbite-angular from npm.

flowbite can be included as a plugin into an existing Tailwind CSS project.

Require via npm

Make sure that you have Node.js and Tailwind CSS installed.

1. Install flowbite as a dependency using npm by running the following command:

npm i flowbite flowbite-angular

2. Require flowbite as a plugin inside the tailwind.config.js file:

module.exports = {
  plugins: [require('flowbite/plugin')],
};

Components

Alerts	Badges	🚧 Breadcrumbs
🚧 Buttons	🚧 Button group	🚧 Cards
🚧 Dropdown	🚧 Forms	🚧 List group
🚧 Typography	🚧 Modal	🚧 Tabs
🚧 Navbar	🚧 Pagination	🚧 Timeline
🚧 Progress bar	🚧 Tables	🚧 Toast
🚧 Tooltips	🚧 Datepicker	🚧 Spinner
🚧 Footer	🚧 Accordion	🚧 Sidebar
🚧 Carousel	🚧 Avatar	🚧 Rating
🚧 Input Field	🚧 File Input	🚧 Search Input
🚧 Select	🚧 Textarea	🚧 Checkbox
🚧 Radio	🚧 Toggle	🚧 Range Slider
🚧 Floating Label

Community

If you need help or just want to discuss the library join the community on GitHub:

⌨️ Discuss Flowbite on GitHub

For casual chatting with others using the library:

💬 Join the Flowbite Discord Server

Contributing

Thank you for your interest in helping! Visit our guide on contributing to get started.

Figma

If you need the Figma files for the components you can check out our website for more information:

🎨 Get access to the Figma design files

Copyright and license

The Flowbite name and logos are trademarks of Crafty Dwarf Inc.

📝 Read about the licensing terms

flowbite-angular's Issues

Clean implementation of SSR/SSG

Add custom value for theme

Allow users to define custom style value like angular-react :

apexcharts with angular

Describe the bug
I am trying to add some charts into my angular application, described like here https://flowbite.com/docs/plugins/charts/ - I can't see the charts.

To Reproduce
Steps to reproduce the behavior:

1. Generate angular app, install tailwind and configure flowbite as in docs.
2. Add charts: true option to plugins
3. Install npm install apexcharts --save
4. Add this example https://flowbite.com/docs/plugins/charts/#area-chart into template as it is
5. Can't see the chart, but the template only, seems like apexcharts can't add the charts to the template

Expected behavior
I want to see the charts in the template, just seeing the template only though.

Screenshots

Desktop (please complete the following information):

• OS: MacOs 13.1 (22C65)
• Browser Chrome
• Version 119.0.6045.123 (Official Build) (arm64)

Additional context
My angular app runs with nx.

FLowbite Components not working initially in Angular

I'm having masterLayout with router-Outler. In the master layout, I'm having a sidebar and navbar, on the sideBar i'm having multiple links to components, and all the components have some Flowbite components, but when I redirect to any particular page inside the master layout the components like a modal, accordion, dropdown not working initially, but if I reload that same page the components start working fine. Even I use the git repo of angular pre-installed with flowbite the issue still remains the same, and even if put the modal component which is in the git repo under route-outlet of the master layout it still not working. but the components like the dropdown, and navbar used in the main-layout work fine without any reload. pls help me out I can't resolve this issue

To Reproduce
Steps to reproduce the behavior:

1. Go to 'pages with flowbite component inside router-outlet of master layout
2. Click on 'modal button'

Expected behavior
open modal,accordion should work fine without reloading the page manually

Screenshots

this is package.json

this is the routing file

and this is my master layout

pls help me out, I'm counting on you
thank you

Clean project configuration

Clean npm/yarn commands available for the project

Please update to NG15

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Website doesn't work or is down?

Describe the bug
Unable to access the website: https://flowbite-angular.com/
Is this website currently down or still in development?

Decay error when executing 'npm i flowbite-angular'. Angular-cli version 16.2.8.

Describe the bug
Decay error when executing 'npm i flowbite-angular'. Angular-cli version 16.2.8.

Additional context
In the updated version of Angular we are having an error when installing flowbite, preventing us from using components that use flowbite tags.

Problem with DarkMode

I have implemented tailwind in an angular 16 app and it works correctly, when I configure the flowbite plugin, specifically when adding in the tailwind configuration

 `require('flowbite/plugin'), // add this line`

My app's dark mode is turned off completely, I've tried the dark mode settings they recommend but it doesn't work either.

To Reproduce
Steps to reproduce the behavior:

1. Following the guide

Screenshots

with the plugin added in the tailwind config

without the plugin added in the tailwind config

Desktop (please complete the following information):

• OS: [ MacOS 13.4.1]
• Browser [chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [chrome, safari]
• Version [latest in ago-2023]

Add ng17 support

Is your feature request related to a problem? Please describe.
I'm wanting to use flowbite for my latest project, but sadly there is no support yet for angular 17

Describe the solution you'd like
Please add support for angular 17

Describe alternatives you've considered
My alternative would be to drop flowbite for now and use tailwind to create custom components

Additional context
Add any other context or screenshots about the feature request here.

Modal doesn't close if you go back a page on your website.

2024-03-13.22-01-56.mp4

If you go back your cannot click on anything you must refresh the page.

Refacto components to fit with global styling file

Refacto components :

• accordion
• alert
• badge
• breadcrumb
• button
• dark-theme-toggle
• dropdown
• form-field
• indicator
• modal
• navbar
• sidebar

Migrate to standalone components

Starting with Angular version 14, standalone components are a feature that allows developers to export individual components from a library. This can make imports cleaner and more efficient, as developers only need to import the components they need.