flowbite-react

<div align="center"> <h1>Flowbite React</h1> <p><em>⚠️ This is a pre-release version - please note that APIs may change before the final release</em></p> <p> Build websites faster with components built on React and Tailwind CSS </p> <p> <a href="https://codecov.io/gh/themesberg/flowbite-react"> <img src="https://codecov.io/gh/themesberg/flowbite-react/branch/main/graph/badge.svg?token=wnw40SeY4k"/> </a> <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-react"> <img src="https://img.shields.io/npm/dt/flowbite-react.svg" alt="Total Downloads"> </a> <a href="https://badge.fury.io/js/flowbite-react"> <img alt="Latest release" src="https://badge.fury.io/js/flowbite-react.svg"> </a> <a href="https://flowbite.com/getting-started/license/"> <img src="https://img.shields.io/badge/license-MIT-blue" alt="License"> </a> </p> </div> --- ### Flowbite React is an open-source collection of UI components built with React and Tailwind CSS utility classes that you can use as a starting point for your user interfaces and websites ## Documentation Browse the components at [flowbite-react.com](https://flowbite-react.com/). Learn more about Flowbite at [Flowbite docs](https://flowbite.com/docs/getting-started/introduction/). ## Getting started Learn how to get started with `Flowbite React` and leverage the interactive React components built with `Tailwind CSS`. ### Using the CLI You can set up Flowbite React using the CLI in two ways: #### 1. Create a new project Create a new Flowbite React application using popular React frameworks and technologies: ```bash npx create-flowbite-react@latest ``` The CLI will prompt for the directory name, what template to use, and if it should initialize a new git repository. For more details about how [`create-flowbite-react`](https://www.npmjs.com/package/create-flowbite-react) works, visit the package page. #### 2. Setup in an existing project To add Flowbite React to an existing project, run: ```bash npx flowbite-react@latest init ``` This will set up all necessary dependencies and configurations in your existing project. ### Framework Integration Guides Follow our official integration guides to set up Flowbite React with your preferred framework or technology stack: - [AdonisJS](https://www.flowbite-react.com/docs/guides/adonisjs) - [Astro](https://www.flowbite-react.com/docs/guides/astro) - [Blitz.js](https://www.flowbite-react.com/docs/guides/blitzjs) - [Bun](https://www.flowbite-react.com/docs/guides/bun) - [ESBuild](https://www.flowbite-react.com/docs/guides/esbuild) - [Farm](https://www.flowbite-react.com/docs/guides/farm) - [Gatsby](https://www.flowbite-react.com/docs/guides/gatsby) - [Laravel](https://www.flowbite-react.com/docs/guides/laravel) - [Meteor.js](https://www.flowbite-react.com/docs/guides/meteorjs) - [Modern.js](https://www.flowbite-react.com/docs/guides/modernjs) - [Next.js](https://www.flowbite-react.com/docs/guides/nextjs) - [Parcel](https://www.flowbite-react.com/docs/guides/parcel) - [React Router](https://www.flowbite-react.com/docs/guides/react-router) - [React Server](https://www.flowbite-react.com/docs/guides/react-server) - [RedwoodJS](https://www.flowbite-react.com/docs/guides/redwoodjs) - [Remix](https://www.flowbite-react.com/docs/guides/remix) - [Rsbuild](https://www.flowbite-react.com/docs/guides/rsbuild) - [Rspack](https://www.flowbite-react.com/docs/guides/rspack) - [TanStack Router](https://www.flowbite-react.com/docs/guides/tanstack-router) - [TanStack Start](https://www.flowbite-react.com/docs/guides/tanstack-start) - [Vike](https://www.flowbite-react.com/docs/guides/vike) - [Vite](https://www.flowbite-react.com/docs/guides/vite) - [Waku](https://www.flowbite-react.com/docs/guides/waku) - [Webpack](https://www.flowbite-react.com/docs/guides/webpack) ## Components **Note: Some components from the vanilla Flowbite library are not yet available in Flowbite React.** <table> <tr> <td width="33.3333%">Accordion</td> <td width="33.3333%">Alert</td> <td width="33.3333%">Avatar</td> </tr> <tr> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/accordion"> <img alt="React Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/alert"> <img alt="React Alert" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/avatar"> <img alt="React Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Banner</td> <td width="33.3333%">Badge</td> <td width="33.3333%">Breadcrumb</td> </tr> <tr> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/banner"> <img alt="React Banner" src="https://flowbite.s3.amazonaws.com/github/banner.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/badge"> <img alt="React Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/breadcrumb"> <img alt="React Breadcrumb" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Button</td> <td width="33.3333%">Button group</td> <td width="33.3333%">Card</td> </tr> <tr> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/button"> <img alt="React Button" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/button-group"> <img alt="React Button group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/card"> <img alt="React Card" src="https://flowbite.s3.amazonaws.com/github/cards.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Carousel</td> <td width="33.3333%">Datepicker</td> <td width="33.3333%">Dropdown</td> </tr> <tr> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/carousel/"> <img alt="React Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/datepicker"> <img alt="React Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/dropdown"> <img alt="React Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Footer</td> <td width="33.3333%">Forms</td> <td width="33.3333%">List group</td> </tr> <tr> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/footer"> <img alt="React Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/forms"> <img alt="React Forms" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/list-group"> <img alt="React List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Modal</td> <td width="33.3333%">Navbar</td> <td width="33.3333%">Pagination</td> </tr> <tr> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/modal"> <img alt="React Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/navbar"> <img alt="React Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/pagination"> <img alt="React Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Progress bar</td> <td width="33.3333%">Rating</td> <td width="33.3333%">Sidebar</td> </tr> <tr> <td width="33.3333%"> <a href="https://www.flowbite-react.com/docs/components/progress"> <img alt="React Progress bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/rating"> <img alt="React Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/sidebar"> <img alt="React Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Spinner</td> <td width="33.3333%">Table</td> <td width="33.3333%">Tabs</td> </tr> <tr> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/spinner"> <img alt="React Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/table"> <img alt="React Table" src="https://flowbite.s3.amazonaws.com/github/tables.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/tabs"> <img alt="React Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Tooltip</td> <td width="33.3333%">Timeline</td> <td width="33.3333%">Toast</td> </tr> <tr> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/tooltip"> <img alt="React Tooltip" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/timeline"> <img alt="React Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg"> </a> </td> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/toast"> <img alt="React Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg"> </a> </td> </tr> <tr> <td width="33.3333%">Sticky Banner</td> <td width="33.3333%"></td> <td width="33.3333%"></td> </tr> <tr> <td width="33.3333%"> <a href="https://flowbite-react.com/docs/components/banner"> <img alt="React Banner" src="https://flowbite.s3.amazonaws.com/github/banner.jpg"> </a> </td> <td width="33.3333%"></td> <td width="33.3333%"></td> </tr> </table> ## Community Get help or discuss the library with the community: ⌨️ [Discuss Flowbite on GitHub](https://github.com/themesberg/flowbite/discussions) For casual conversations with other users using the library: 💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy) ## Contributing We appreciate your interest in contributing! Please visit our [guide on contributing](https://github.com/themesberg/flowbite-react/blob/main/.github/CONTRIBUTING.md) to get started. ## Figma For access to the Figma design files for our components, visit: 🎨 [Get access to the Figma design files](https://flowbite.com/figma/) ## Copyright and license The Flowbite name and logos are trademarks of Bergside Srl. 📝 [Read about the licensing terms](https://flowbite.com/docs/getting-started/license/) 📀 [Brand guidelines and trademark usage agreement](https://flowbite.com/brand/)