Creative Tim Logo Soft UI Flowbite

Soft UI Flowbite

Build your website faster with an Innovative Admin Template based on TailwindCSS, Flowbite, and HTML. Soft UI Flowbite PRO features a huge number of components built to fit together and look amazing.

If you like the look & feel of the hottest design trends right now, you will definitely fall in love with this dashboard. Its design is inspired by Soft UI Design and it gives you the flexibility that will get you going in no time.

If you are looking to take your app to the next level – Soft UI Flowbite PRO is the way to go.

Fully Coded Components

Soft UI Flowbite PRO is built with over 100 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining. All components can take variations in color, which you can easily modify using TailwindCSS config and classes. You will save a lot of time going from prototyping to full-functional code because all elements are implemented.

This Premium Dashboard is coming with prebuilt design blocks, so the development process is seamless, switching from our pages to the real website is very easy to be done.

Example Pages

If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our 20 prebuilt example pages. You will be able to quickly set up the basic structure for your web project.

Check the live demo here.

Introduction to Flowbite

Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.

It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, but also some more advanced interactive elements such as datepickers.

All of the elements are built using the utility classes from Tailwind CSS and vanilla JavaScript.

Here’s a quick overview of the Flowbite ecosystem including the open source Tailwind components library, the Figma design files, and the pro version.

Quickstart

Learn how to get started by downloading and configuring Flowbite locally on your machine and start developing.

Components

Explore the Tailwind CSS elements such as buttons, navbars, alerts, dropdowns and use them to build your website.

Figma design files

Prototype and design your website before coding with the Flowbite Figma file which is based on the Tailwind CSS classes.

Upgrade to Pro

Take your Figma and Tailwind CSS development to the next level with thousands more elements and pages with Flowbite Pro.

Using Flowbite

One of the disadvantages of Tailwind CSS compared to other frameworks is that it doesn’t have a base set of components. This makes it really hard to quickly prototype a user interface.

This is where Flowbite comes into play: it’s basically Tailwind CSS, but you get all of the components that you would normally get with a classic CSS framework like Bootstrap or Bulma.

There are at least 19 types of components including buttons, alerts, breadcrumbs, pagination, and navbars. Flowbite also includes some custom JavaScript that enables interactive components, such as dropdowns, modals, tooltips, and many more.

Getting started

Flowbite is technically a plugin that can be included into any existing Tailwind CSS project. To get started, you first need to make sure that you have a working Tailwind CSS project installed and that you also have Node and NPM installed on your machine.

Require via NPM

  1. Install the latest version of Flowbite using NPM:
npm i flowbite
  1. Include Flowbite as a plugin inside the tailwind.config.js file: 
module.exports = {
  plugins: [require("flowbite/plugin")]
};
  1. Require the JavaScript code that powers the interactive elements before the end of your <body> tag: 
<script src="../path/to/flowbite/dist/flowbite.js"></script>
  1. Additionally to your own content data you should add flowbite to apply the classes from the interactive elements in the tailwind.config.js file: 
module.exports = {
  content: ["./node_modules/flowbite/**/*.js"]
};

If you use Webpack or other bundlers you can also import it like this: 

import "flowbite";

Include via CDN

If you want to quickly test out Flowbite you can easily include the following CSS and JavaScript files.

Require the following minified stylesheet inside the head tag: 

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/flowbite.min.css"
/>

And include the following javascript file before the end of the body element: 

<script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>

Please remember that the best way to work with Tailwind CSS and Flowbite is by purging the CSS classes.

Tailwind CSS 2.0

Flowbite is fully compatible with the 2.x versions of Tailwind CSS.

Tailwind CSS 3.0

Feel free to upgrade to version 3 of Tailwind CSS as there are no breaking changes when using the components from Flowbite.

Figma

The components from Flowbite are first conceptualized and designed in Figma using the latest features such as variants, auto-layout, grids, responsive layouts, and more.

Learn more by checking out Flowbite’s Figma design system and start designing your Tailwind CSS projects before actually coding them.

Pro version

If you want to take your Tailwind development workflow to the next level you can check out the pro version of Flowbite which includes fully coded pages and layouts for application, marketing, and e-commerce user interfaces.

Licensing

The library of components from Flowbite is open source under the MIT License.

Contributions

Flowbite is an open source library under the MIT license and anyone who would like to contribute to the codebase or design is welcome to do so.

Please reach out to us via the official Github repository and the main development team will get in touch as soon as possible.

Discord community

Feel free to join our community on Discord to receive help, contribute to the project, or just discuss about Flowbite, Tailwind CSS, and web development in general.

Authors

Copied code to clipboard!