design

flowbite-react: Faster Design

Name: flowbite-react: Faster Design
Author: themesberg

Get pre-built React components for faster design. For founders using Tailwind CSS.

2,142 stars501 forksTypeScriptQuality 8/10Updated 6/27/2026100% free · open source

What it does

Flowbite-react provides pre-built React components to speed up design and development for applications using Tailwind CSS

Install / run

npm install flowbite-react

When to use it

•When building a new React application with Tailwind CSS and wanting to accelerate the design process
•When migrating an existing application to use Tailwind CSS and needing consistent, pre-designed components
•When prototyping a React application and requiring a set of reusable, customizable UI components

Quick start

1Import the Flowbite-react components in your React application using `import { Navbar, Footer, ... } from 'flowbite-react';`
2Use the components in your JSX, for example: `<Navbar fluid={true} rounded={true} />`
3Configure Tailwind CSS to work with Flowbite-react by including the `@themesberg/flowbite` plugin in your `tailwind.config.js` file
4Customize the components' appearance by overriding the default classes or using the provided customization options
5Run your application to see the pre-built components in action

Ready-to-paste prompt

Use the Navbar component with a custom logo: `<Navbar fluid={true} rounded={true}> <Navbar.Brand href='/' > <img src='logo.svg' alt='Flowbite' /> </Navbar.Brand> </Navbar>`

Heads up: Make sure you have Tailwind CSS installed and configured in your project, as Flowbite-react relies on it for styling and layout

Saves to your device