flowbite-angular 20.1.2 → 21.0.0

package/README.md

@@ -1,375 +1,375 @@
-<div align="center">
-  <h1>flowbite-angular</h1>
-  <p>
-    Build websites even faster with components on top of Angular and Tailwind CSS
-  </p>
-  <p>
-    <a href="https://discord.com/invite/4eeurUVvTy">
-      <img src="https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord" alt="Discord">
-    </a>
-    <a href="https://www.npmjs.com/package/flowbite-angular">
-      <img src="https://img.shields.io/npm/dt/flowbite-angular.svg" alt="Total Downloads">
-    </a>
-    <a href="https://badge.fury.io/js/flowbite-angular">
-      <img alt="Latest release" src="https://badge.fury.io/js/flowbite-angular.svg">
-    </a>
-    <a href="https://flowbite.com/docs/getting-started/license/">
-      <img src="https://img.shields.io/badge/license-MIT-blue" alt="License">
-    </a>
-  </p>
-</div>
-
----
-
-**`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](#documentation)
-- [Getting started](#getting-started)
-- [Components](#components)
-- [Community](#community)
-- [Contributing](#contributing)
-- [Figma](#figma)
-- [Copyright and license](#copyright-and-license)
-
-## Documentation
-
-If you want to browse the components, visit [flowbite-angular.com](https://flowbite-angular.com/).
-
-If you want to learn more about Flowbite, visit
-[Flowbite docs](https://flowbite.com/docs/getting-started/introduction/).
-
-## Getting started
-
-## Require via `npm`
-
-Make sure that you have <a href="https://nodejs.org/en/" rel="nofollow" >Node.js</a> installed.
-
-1. Install `tailwindcss` as a dependency using `npm` by running the following command:
-
-```bash
-npm i tailwindcss
-```
-
-2. Install `flowbite-angular` as a dependency using `npm` by running the following command:
-
-```bash
-npm i flowbite-angular ng-primitives @ng-icons/core
-```
-
-3. Import `flowbite-angular` inside your `style.css` file:
-
-```css
-@import 'tailwindcss';
-
-@source "node_modules/flowbite-angular";
-```
-
-# Components
-
-<table>
-  <tr>
-    <td width="33.3333%">Alerts</td>
-    <td width="33.3333%">Badges</td>
-    <td width="33.3333%">Breadcrumbs</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/docs/components/alert">
-            <img alt="Tailwind CSS Alerts" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/docs/components/badge">
-            <img alt="Tailwind CSS Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/docs/components/breadcrumb">
-            <img alt="Tailwind CSS Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Buttons</td>
-    <td width="33.3333%">Button group</td>
-    <td width="33.3333%">Cards</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/docs/components/button">
-            <img alt="Tailwind CSS Buttons" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/docs/components/button#button-group">
-            <img alt="Tailwind CSS Button Group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/docs/components/card">
-            <img alt="Tailwind CSS Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Dropdown</td>
-    <td width="33.3333%">:construction: Forms</td>
-    <td width="33.3333%">:construction: List group</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/docs/components/dropdown">
-            <img alt="Tailwind CSS Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/#/forms/">
-            <img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/#/list-group/">
-            <img alt="Tailwind CSS List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">:construction: Typography</td>
-    <td width="33.3333%">Modal</td>
-    <td width="33.3333%">Tabs</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/#/typography/">
-            <img alt="Tailwind CSS Typography" src="https://flowbite.s3.amazonaws.com/github/typography.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/docs/components/modal">
-            <img alt="Tailwind CSS Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/docs/components/tab">
-            <img alt="Tailwind CSS Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Navbar</td>
-    <td width="33.3333%">Pagination</td>
-    <td width="33.3333%">:construction: Timeline</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/docs/components/navbar">
-            <img alt="Tailwind CSS Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/docs/components/pagination">
-            <img alt="Tailwind CSS Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/#/timeline/">
-            <img alt="Tailwind CSS Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">:construction: Progress bar</td>
-    <td width="33.3333%">:construction: Tables</td>
-    <td width="33.3333%">:construction: Toast</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/#/progress/">
-            <img alt="Tailwind CSS Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/#/tables/">
-            <img alt="Tailwind CSS Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/#/toast/">
-            <img alt="Tailwind CSS Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Tooltips</td>
-    <td width="33.3333%">:construction: Datepicker</td>
-    <td width="33.3333%">:construction: Spinner</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/docs/components/tooltip">
-            <img alt="Tailwind CSS Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite.com/docs/plugins/datepicker/">
-            <img alt="Tailwind CSS Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/#/spinner/">
-            <img alt="Tailwind CSS Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">:construction: Footer</td>
-    <td width="33.3333%">Accordion</td>
-    <td width="33.3333%">Sidebar</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/#/footer/">
-            <img alt="Tailwind CSS Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/docs/components/accordion">
-            <img alt="Tailwind CSS Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/docs/components/sidebar">
-            <img alt="Tailwind CSS Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">:construction: Carousel</td>
-    <td width="33.3333%">:construction: Avatar</td>
-    <td width="33.3333%">:construction: Rating</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/#/carousel/">
-            <img alt="Tailwind CSS Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/#/avatar/">
-            <img alt="Tailwind CSS Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/#/rating/">
-            <img alt="Tailwind CSS Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Input Field</td>
-    <td width="33.3333%">:construction: File Input</td>
-    <td width="33.3333%">:construction: Search Input</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite-angular.com/docs/components/input">
-            <img alt="Tailwind CSS Input Field" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/file-input/">
-            <img alt="Tailwind CSS File Input" src="https://flowbite.s3.amazonaws.com/github/file-input.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/search-input/">
-            <img alt="Tailwind CSS Search Input" src="https://flowbite.s3.amazonaws.com/github/search-input.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">:construction: Select</td>
-    <td width="33.3333%">:construction: Textarea</td>
-    <td width="33.3333%">:construction: Checkbox</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/select/">
-            <img alt="Tailwind CSS Select" src="https://flowbite.s3.amazonaws.com/github/select.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/textarea/">
-            <img alt="Tailwind CSS Textarea" src="https://flowbite.s3.amazonaws.com/github/textarea.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/checkbox/">
-            <img alt="Tailwind CSS Checkbox" src="https://flowbite.s3.amazonaws.com/github/checkbox.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">:construction: Radio</td>
-    <td width="33.3333%">:construction: Toggle</td>
-    <td width="33.3333%">:construction: Range Slider</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/radio/">
-            <img alt="Tailwind CSS Radio" src="https://flowbite.s3.amazonaws.com/github/radio.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/toggle/">
-            <img alt="Tailwind CSS Toggle" src="https://flowbite.s3.amazonaws.com/github/toggle.jpg">
-        </a>
-    </td>
-    <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/range/">
-            <img alt="Tailwind CSS Range Slider" src="https://flowbite.s3.amazonaws.com/github/range-slider.jpg">
-        </a>
-    </td>
-  </tr>
-  <tr>
-    <td width="33.3333%">Floating Label</td>
-  </tr>
-  <tr>
-    <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/floating-label/">
-            <img alt="Tailwind CSS Floating Label" src="https://flowbite.s3.amazonaws.com/github/floating-label.jpg">
-        </a>
-    </td>
-  </tr>
-</table>
-
-## Community
-
-If you need help or just want to discuss the library join the community on GitHub:
-
-⌨️ [Discuss Flowbite on GitHub](https://github.com/themesberg/flowbite/discussions)
-
-For casual chatting with others using the library:
-
-💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy)
-
-## Contributing
-
-Thank you for your interest in helping! Visit our
-[guide on contributing](https://github.com/themesberg/flowbite-angular/blob/main/.github/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](https://flowbite.com/figma/)
-
-## Copyright and license
-
-The Flowbite name and logos are trademarks of Crafty Dwarf Inc.
-
-📝 [Read about the licensing terms](https://flowbite-angular.com/docs/getting-started/license)
+<div align="center">
+  <h1>flowbite-angular</h1>
+  <p>
+    Build websites even faster with components on top of Angular and Tailwind CSS
+  </p>
+  <p>
+    <a href="https://discord.com/invite/4eeurUVvTy">
+      <img src="https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord" alt="Discord">
+    </a>
+    <a href="https://www.npmjs.com/package/flowbite-angular">
+      <img src="https://img.shields.io/npm/dt/flowbite-angular.svg" alt="Total Downloads">
+    </a>
+    <a href="https://badge.fury.io/js/flowbite-angular">
+      <img alt="Latest release" src="https://badge.fury.io/js/flowbite-angular.svg">
+    </a>
+    <a href="https://flowbite.com/docs/getting-started/license/">
+      <img src="https://img.shields.io/badge/license-MIT-blue" alt="License">
+    </a>
+  </p>
+</div>
+
+---
+
+**`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](#documentation)
+- [Getting started](#getting-started)
+- [Components](#components)
+- [Community](#community)
+- [Contributing](#contributing)
+- [Figma](#figma)
+- [Copyright and license](#copyright-and-license)
+
+## Documentation
+
+If you want to browse the components, visit [flowbite-angular.com](https://flowbite-angular.com/).
+
+If you want to learn more about Flowbite, visit
+[Flowbite docs](https://flowbite.com/docs/getting-started/introduction/).
+
+## Getting started
+
+## Require via `npm`
+
+Make sure that you have <a href="https://nodejs.org/en/" rel="nofollow" >Node.js</a> installed.
+
+1. Install `tailwindcss` as a dependency using `npm` by running the following command:
+
+```bash
+npm i tailwindcss
+```
+
+2. Install `flowbite-angular` as a dependency using `npm` by running the following command:
+
+```bash
+npm i flowbite-angular ng-primitives @ng-icons/core
+```
+
+3. Import `flowbite-angular` inside your `style.css` file:
+
+```css
+@import 'tailwindcss';
+
+@source "node_modules/flowbite-angular";
+```
+
+# Components
+
+<table>
+  <tr>
+    <td width="33.3333%">Alerts</td>
+    <td width="33.3333%">Badges</td>
+    <td width="33.3333%">Breadcrumbs</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/docs/components/alert">
+            <img alt="Tailwind CSS Alerts" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/docs/components/badge">
+            <img alt="Tailwind CSS Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/docs/components/breadcrumb">
+            <img alt="Tailwind CSS Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Buttons</td>
+    <td width="33.3333%">Button group</td>
+    <td width="33.3333%">Cards</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/docs/components/button">
+            <img alt="Tailwind CSS Buttons" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/docs/components/button#button-group">
+            <img alt="Tailwind CSS Button Group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/docs/components/card">
+            <img alt="Tailwind CSS Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Dropdown</td>
+    <td width="33.3333%">:construction: Forms</td>
+    <td width="33.3333%">:construction: List group</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/docs/components/dropdown">
+            <img alt="Tailwind CSS Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/#/forms/">
+            <img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/#/list-group/">
+            <img alt="Tailwind CSS List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">:construction: Typography</td>
+    <td width="33.3333%">Modal</td>
+    <td width="33.3333%">Tabs</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/#/typography/">
+            <img alt="Tailwind CSS Typography" src="https://flowbite.s3.amazonaws.com/github/typography.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/docs/components/modal">
+            <img alt="Tailwind CSS Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/docs/components/tab">
+            <img alt="Tailwind CSS Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Navbar</td>
+    <td width="33.3333%">Pagination</td>
+    <td width="33.3333%">:construction: Timeline</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/docs/components/navbar">
+            <img alt="Tailwind CSS Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/docs/components/pagination">
+            <img alt="Tailwind CSS Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/#/timeline/">
+            <img alt="Tailwind CSS Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">:construction: Progress bar</td>
+    <td width="33.3333%">:construction: Tables</td>
+    <td width="33.3333%">:construction: Toast</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/#/progress/">
+            <img alt="Tailwind CSS Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/#/tables/">
+            <img alt="Tailwind CSS Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/#/toast/">
+            <img alt="Tailwind CSS Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Tooltips</td>
+    <td width="33.3333%">:construction: Datepicker</td>
+    <td width="33.3333%">:construction: Spinner</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/docs/components/tooltip">
+            <img alt="Tailwind CSS Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite.com/docs/plugins/datepicker/">
+            <img alt="Tailwind CSS Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/#/spinner/">
+            <img alt="Tailwind CSS Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">:construction: Footer</td>
+    <td width="33.3333%">Accordion</td>
+    <td width="33.3333%">Sidebar</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/#/footer/">
+            <img alt="Tailwind CSS Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/docs/components/accordion">
+            <img alt="Tailwind CSS Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/docs/components/sidebar">
+            <img alt="Tailwind CSS Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">:construction: Carousel</td>
+    <td width="33.3333%">:construction: Avatar</td>
+    <td width="33.3333%">:construction: Rating</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/#/carousel/">
+            <img alt="Tailwind CSS Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/#/avatar/">
+            <img alt="Tailwind CSS Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/#/rating/">
+            <img alt="Tailwind CSS Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Input Field</td>
+    <td width="33.3333%">:construction: File Input</td>
+    <td width="33.3333%">:construction: Search Input</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-angular.com/docs/components/input">
+            <img alt="Tailwind CSS Input Field" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite.com/docs/forms/file-input/">
+            <img alt="Tailwind CSS File Input" src="https://flowbite.s3.amazonaws.com/github/file-input.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite.com/docs/forms/search-input/">
+            <img alt="Tailwind CSS Search Input" src="https://flowbite.s3.amazonaws.com/github/search-input.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">:construction: Select</td>
+    <td width="33.3333%">:construction: Textarea</td>
+    <td width="33.3333%">:construction: Checkbox</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite.com/docs/forms/select/">
+            <img alt="Tailwind CSS Select" src="https://flowbite.s3.amazonaws.com/github/select.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite.com/docs/forms/textarea/">
+            <img alt="Tailwind CSS Textarea" src="https://flowbite.s3.amazonaws.com/github/textarea.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite.com/docs/forms/checkbox/">
+            <img alt="Tailwind CSS Checkbox" src="https://flowbite.s3.amazonaws.com/github/checkbox.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">:construction: Radio</td>
+    <td width="33.3333%">:construction: Toggle</td>
+    <td width="33.3333%">:construction: Range Slider</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite.com/docs/forms/radio/">
+            <img alt="Tailwind CSS Radio" src="https://flowbite.s3.amazonaws.com/github/radio.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite.com/docs/forms/toggle/">
+            <img alt="Tailwind CSS Toggle" src="https://flowbite.s3.amazonaws.com/github/toggle.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite.com/docs/forms/range/">
+            <img alt="Tailwind CSS Range Slider" src="https://flowbite.s3.amazonaws.com/github/range-slider.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Floating Label</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite.com/docs/forms/floating-label/">
+            <img alt="Tailwind CSS Floating Label" src="https://flowbite.s3.amazonaws.com/github/floating-label.jpg">
+        </a>
+    </td>
+  </tr>
+</table>
+
+## Community
+
+If you need help or just want to discuss the library join the community on GitHub:
+
+⌨️ [Discuss Flowbite on GitHub](https://github.com/themesberg/flowbite/discussions)
+
+For casual chatting with others using the library:
+
+💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy)
+
+## Contributing
+
+Thank you for your interest in helping! Visit our
+[guide on contributing](https://github.com/themesberg/flowbite-angular/blob/main/.github/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](https://flowbite.com/figma/)
+
+## Copyright and license
+
+The Flowbite name and logos are trademarks of Crafty Dwarf Inc.
+
+📝 [Read about the licensing terms](https://flowbite-angular.com/docs/getting-started/license)