Flowbite Crash Course in 20 mins | Introduction to UI components using Tailwind CSS

Summary

This crash course introduces Flowbite, an open-source library of interactive UI components built on Tailwind CSS. It showcases how Flowbite can save time and effort in designing websites, with features like a block system and Figma design files. The tutorial covers setting up Flowbite, using its pre-made components like accordions and buttons, and customizing them with utility classes. It also demonstrates creating a navbar, implementing dark mode, and building a dashboard using blocks. The course highlights Flowbite's integration with Figma for seamless design-to-code workflows and mentions the pricing of its Pro version.

Takeaways

• 🌐 Flowbite is an open-source library of interactive UI components built on top of Tailwind CSS utility classes.
• 🛠️ It offers pre-made designs for various UI components, allowing developers to save time and effort in designing websites.
• 📚 Flowbite's features include a block system and Figma design files, providing a seamless transition from design to code.
• 🎨 The library provides a variety of customizable components, such as accordions and buttons, with options for dark and light modes.
• 🔧 Flowbite's components come with pre-baked functionalities, such as the ability to keep an accordion open or customize active colors.
• 📝 Documentation is comprehensive, offering examples and guidance on how to implement and customize components.
• 📱 Responsive design is a key focus, with components adapting well to different screen sizes like tablets and mobile phones.
• 🌈 Flowbite integrates with any framework and can be used without one, making it versatile for various web development projects.
• 📦 Quick setup is possible through CDN links for the CSS and JS files, simplifying the inclusion of Flowbite in any project.
• 🔄 The library supports easy customization of components through Tailwind CSS utility classes for colors, spacing, and more.
• 💡 Flowbite's block system allows for the creation of full sections of a website, such as feature sections or footers, with ease.
• 🎨 Figma integration offers a design-first approach, enabling developers to use pre-designed components directly within Figma.

Q & A

What is Flowbite and what is it used for?

Flowbite is an open-source library of interactive UI components built on top of the utility classes of Tailwind CSS. It is used to save time and effort in designing better websites for both new and existing projects that utilize Tailwind CSS.

What are some of the features provided by Flowbite?

Flowbite provides features such as a block system for creating sections like hero or feature sections, Figma design files integration, and pre-made components that are ready to be customized and used in projects.

How can Flowbite be used with different types of frameworks?

Flowbite can be used with various frameworks such as React, Svelte, or even without a framework, because it is built on top of Tailwind CSS, which makes it versatile for different types of projects.

Can you provide an example of how Flowbite simplifies the design process?

An example is the pre-made accordion component in Flowbite. It comes with all the necessary code and design, allowing users to simply update the content and customize it with data attributes for functionalities like 'always open'.

How does Flowbite handle responsive design?

Flowbite's components are designed to be responsive out of the box. Users can view and edit how components behave on different devices like tablets and mobile phones directly within the documentation.

What customization options are available for the buttons in Flowbite?

Flowbite offers various button designs with options for sizes, colors, gradients, and more. Users can easily customize these buttons by changing the content and classes according to their project's needs.

How can I get started with Flowbite for my project?

To get started with Flowbite, you can include the CDN links for the CSS and JS files in your project. This method is simple and works for any type of project, allowing immediate use of Flowbite's components.

What is the benefit of using Flowbite's pre-designed components?

The benefit of using Flowbite's pre-designed components is that they save time by eliminating the need to manually design and style elements. They also ensure a consistent and professional look across different components.

How does Flowbite support dark mode in its components?

Flowbite supports dark mode by baking in both light and dark mode versions of its components. Users can switch between modes, and the components will adjust accordingly, reflecting the appropriate styling.

What is the process of implementing a navbar using Flowbite?

To implement a navbar using Flowbite, you can copy the pre-made syntax for the navbar from the documentation, paste it into your project, and then customize the logo, menu items, and other elements as needed.

How can Flowbite be integrated with Figma for design purposes?

Flowbite integrates with Figma by offering Figma design files with components and pages designed and ready to use. This allows designers to create and plan website layouts in Figma and then easily translate them into code.

What are the pricing options for Flowbite's Pro version?

The Pro version of Flowbite offers additional content and features. The pricing is $249 for a Developer Edition and $149 for a Designer Edition, providing access to more designs and components in Figma and other exclusive features.

Outlines

00:00

🌐 Introduction to Flowbite and UI Components

This paragraph introduces Flowbite, an open-source library of interactive UI components built on Tailwind CSS utility classes. It emphasizes the time-saving and design-enhancing benefits of using Flowbite for new or existing projects. The paragraph also mentions the library's compatibility with various frameworks and its feature-rich design, such as the block system and Figma design files. An example of an accordion component is provided to illustrate the pre-made design and code, showcasing how easy it is to customize and integrate into projects.

05:03

🎨 Customizing Components and Exploring Flowbite Features

The second paragraph delves into the customization options available in Flowbite, such as color schemes, dark and light modes, and typography settings. It outlines the process of setting up Flowbite for a project by including the CDN links for the CSS and JS files, bypassing the traditional package installation method. The paragraph also demonstrates how to integrate Flowbite components, like buttons, into a basic HTML document using a live server setup in VS Code, highlighting the ease of customization and the pre-built design aspects of the components.

10:03

📚 Utilizing Flowbite for Navbar and Dark Mode Implementation

This paragraph focuses on using Flowbite to create a navbar and implement dark mode functionality. It discusses the variety of navbar options available and the ease of customization, including changing logos and adjusting styles for different screen sizes. The paragraph also explains how Flowbite's dark mode is integrated, either through system settings or custom scripts, and how to apply it to the entire website, including background and component colors, for a consistent user experience.

15:03

🛠️ Building a Dashboard with Flowbite Blocks and Customization

The fourth paragraph illustrates the process of building an admin dashboard using Flowbite's blocks, such as breadcrumbs, dropdowns, and hero sections. It highlights the ability to quickly add and customize these components, as well as the option to adjust styles like text alignment and padding. The paragraph also addresses the importance of styling for dark mode, showing how to change background colors to ensure visual consistency across different themes.

20:04

📈 Exploring Flowbite Blocks and Figma Integration

The final paragraph discusses the concept of blocks in Flowbite, which are combinations of components to create sections like feature or hero areas. It showcases the variety of block examples available and their adaptability to different devices and color schemes. The paragraph also introduces Flowbite's integration with Figma, allowing designers to work with Flowbite components in a design software environment, streamlining the design-to-code process. Lastly, it touches on the pricing model of Flowbite, offering a free tier and paid options for additional content and features.

Keywords

💡Flowbite

Flowbite is an open-source library of interactive UI components built on top of the utility classes of Tailwind CSS. It is designed to save time and effort in designing websites by providing pre-made components. In the video, Flowbite is the central theme, showcasing how it can be used to quickly build and customize interactive elements for both new and existing projects.

💡Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It provides low-level utility classes that can be composed to create unique designs without writing CSS from scratch. In the context of the video, Flowbite is built on top of Tailwind CSS, leveraging its utility classes to create interactive UI components.

💡UI Components

UI components refer to the individual elements that make up a graphical user interface, such as buttons, forms, and navigation bars. The video script discusses how Flowbite offers a variety of pre-designed UI components that can be easily integrated into projects, streamlining the design process.

💡Accordion

An accordion is a UI component that allows multiple sections of content to be displayed in a single space, with each section expandable and collapsible. The script uses the accordion as an example of a pre-made Flowbite component that can be customized and utilized in a project with minimal effort.

💡Documentation

Documentation in this context refers to the written instructions and examples provided for using Flowbite. The video emphasizes the importance of Flowbite's documentation, which offers guidance on how to implement and customize its components, such as the accordion and buttons.

💡Customization

Customization involves modifying pre-existing designs or components to fit specific needs or preferences. The video script highlights the ability to customize Flowbite components, such as changing colors or adding attributes like 'data-accordion-open', to tailor the components to the project's requirements.

💡Buttons

Buttons are a common HTML element used for various purposes, such as submitting forms or navigating links. The script discusses how Flowbite provides a range of button designs with pre-set styles, making it easy for developers to implement visually appealing buttons without manual CSS work.

💡Responsive Design

Responsive design ensures that web pages render well on different devices and screen sizes, from desktops to mobile phones. The video mentions that Flowbite components are designed with responsiveness in mind, allowing developers to create websites that adapt to various viewing contexts.

💡CDN

CDN stands for Content Delivery Network, which is a system of distributed servers that deliver web content to users based on their geographic location. The script describes using a CDN to include the Flowbite CSS and JS files in a project, allowing for quick and easy integration without the need for package installation.

💡Figma

Figma is a cloud-based design tool used for creating user interfaces and prototypes. The video script mentions Flowbite's integration with Figma, allowing users to work with Flowbite components within Figma designs, creating a seamless transition from design to code.

💡Blocks

In the context of Flowbite, blocks refer to pre-designed sections of a webpage, such as feature sections or hero sections, that combine multiple components. The script explains how blocks can be used to quickly build out complex parts of a website, leveraging the power of Flowbite's component-based design.

💡Pro Version

The Pro Version of Flowbite is a paid upgrade that unlocks additional content and features beyond the free version. The script briefly touches on the Pro Version, indicating that it offers more designs and components for those who require a broader range of options for their projects.

Highlights

Flowbite is an open-source library of interactive UI components built on Tailwind CSS utility classes.

It saves time and effort in designing better websites for new or existing projects using Tailwind CSS.

Flowbite features include a block system and Figma design files for comprehensive design integration.

Flowbite is compatible with various frameworks like React, Svelte, or can be used without a framework.

Pre-made components are provided with all necessary Tailwind CSS classes for immediate use.

Components like the accordion have functional designs with customizable options via data attributes.

Buttons are designed with alternative options, spacing, sizing, and pre-selected colors from Tailwind CSS.

Flowbite offers a variety of button designs such as rounded corners, gradients, and dual-tone styles.

The library includes styling options with pre-selected colors, dark and light modes, and typography settings.

Setup for new or existing projects is straightforward, with options to include via CDN or package installation.

Quick start guides are available for different project types, including React and Svelte.

Flowbite's components can be easily customized and updated with new content and styles.

Dark mode is natively supported with automatic OS theme detection and manual toggle options.

Navbars, breadcrumbs, and hero sections can be quickly implemented with pre-designed components.

Flowbite blocks allow combining multiple components to create full sections like features or pricing tables.

Figma integration provides handcrafted designs that can be directly translated into code.

Flowbite is free to use, with a Pro version offering additional content and features for a fee.

The Pro version includes more designs in Figma and pre-made sections for various UI applications.

Flowbite aims to streamline the design-to-code process, making web development more efficient.

Transcripts

welcome to this crash course on flowbite

if you haven't heard of it before it is

an open source library of interactive ui

components built on top of the utility

classes of tailwind css we'll be

exploring exactly how you can get

started using flow by to save yourself

time and effort to design a better

website for a brand new project or even

an existing project that you might be

using with tailwind css

on top of that we'll be exploring some

of the features that flowbite provides

such as their block system or even their

figma design files now before we get

started let's take a quick look at what

flow bite currently is and some of the

benefits of utilizing it when you land

on the page you'll learn that flow bite

is something that you can use with

pretty much any type of framework

whether it's react of you or schveldt or

even if you're not even using a

framework because it is built on top of

tailwind css and it essentially is all

of the different types of components

that you're used to utilizing in a

website design pre-made and designed in

such a way as you can use them for your

project

let's have a look at this accordion

example to see exactly what i mean

when you land here you'll head over to

the documentation which tells you a

little bit more about the accordion as

well as gives you a preview of it if you

want to have a look at other components

they're all on the left here and we'll

get into those shortly but let's have a

look at this accordion example to show

what flow by does

it essentially is the pre-made design

for this component and you can see all

the code that goes along with it just

here below

this is created in such a way as to all

the classes from tailwind css being

pre-made for you ready to be copied and

utilized in your project

this is a functional accordion and all

you really need to do is update the

content that you have inside of there

you have the option to view in dark mode

or in light mode you have the option

here to have a look how the responsive

design is on say for example tablet as

well as mobile much like other libraries

and packages the content that you have

here can still be edited by you and

customized however you want of course

there are the functionalities pre-baked

into this code such as having options

like say always open available for you

to utilize by simply passing in the data

attribute here

data-accordion-open this allows you to

keep the accordion open when you open up

different tabs or for example if you

wanted to customize the active color

with this blue outline you simply can

pass in the data active classes with the

options of what you're looking for for

the colors now all of these are really

available here for you to view in the

documentation there's even javascript

behaviors that you can apply depending

on what you're after such as checking

the options of always open or adding in

methods and it's up to you to read the

documentation and utilize it in which

way you want but let's take another look

at another example of these components

by having a look at the buttons one of

my favorite examples whenever looking at

a component library buttons they're

probably one of the most common html

elements buttons are used from

everything from forms to links to logins

and lots more and they can come in a

varying amount of sizes and colors and

gradients but realistically the default

theme for a button looks terrible on

most browsers so here flow byte has

taken the html element of a button and

designed lots of alternative options

here with the perfect amount of spacing

and sizing and weight and the colors are

already chosen for you as well based on

tailwind css if we have a look at the

syntax here it's another example of how

flow byte works where we're using the

html button element here and we're

populating it with all the css classes

from tailwinds to make it look good now

if you have a look there are well quite

a few classes here happening and

realistically you don't have to worry

too much about this you only really need

to change the content inside

what these classes are doing are

everything from introducing the

background color to the font color to

the little border radius that you see

around as well as the hover effect and

lots more normally if you're building a

website and you are using something like

tailwind css by itself you would have to

manually fill this out yourself and this

is time consuming and you also have to

have a little bit of an eye for design

what the benefit here is is that all of

this is done for you now there are other

types of button designs here such as

these rounded corners with buttons or

even these ones with gradients across

there is a lots and lots of options here

on the right hand side and they're ready

to go for you to use some examples are

here this one with gradient with dual

tones or for example gradient with

outlines which actually looks kind of

trendy and many many more

the goal here is to know that you

actually have all the options available

for you to use depending on the

situation that you need so you don't

have to manually design them yourself

moving on there is a lot more to

flowbite than just all these different

types of components there is the styling

that goes along with it such as having

all the options of colors pre-selected

that often come from tailwind css as

well as options like dark mode and light

mode baked straight in and we even have

options for better topography such as

setting out all your headings as well as

the sizings for them so that if you need

to create a section here for maybe a

hero or something else then you

basically have all of this ready to go

these are just some of the benefits but

realistically you'll see a lot more when

we begin using it so let's start here at

the very top at the very beginning as an

introduction to how to set up flow byte

for your project whether it's new or

existing it's actually quite simple and

there is a quick start available for any

type of project whether using something

in react or schvelt or even angular but

what we're going to be doing is not

following the traditional method where

we install the package by npm and import

it into our project which actually

requires a few more steps in case you're

using something like a react we're gonna

go nice and simple by just simply

including the cdn package of the css

file as well as the js file this will

allow us to import it into any type of

project immediately it'll be nice and

simple

on top of that if for example you do

have a react project there is a react

startup guide that you can follow with

the packages that you need in order to

get it up and running as well as the

tailwind.config.js file which you can

set up nice and simple and how to import

it into your project we might cover this

in future videos but for the time being

let's have a look at our introduction

here which will simply be to copy over

these two files we'll begin by opening

up vs code here i'm going to create a

brand new file and this will be called

index.html it'll be empty for the time

being i'm also going to run a live

server this is a plugin inside of vs

code which you can download but what

it's going to do is populate a brand new

website here where anything i type into

this section here will be updated and

shown in the live browser but it's not

ready yet to go because we need to add

our html markup and so now let me close

everything off and zoom in a little bit

so that you guys can see what i'm doing

i'm going to place an exclamation mark

here and emmett will fill out the rest

of this content here i'm going to have a

nice simple html document with no title

yet i'll call this the flow byte crash

course

here i'm gonna place the actual files

that we have from our cdn

the very first one will be the

stylesheet which i don't think i copied

the entire syntax of so let me just jump

back in this goes inside the head of our

document so i'm going to place it just

below the title over here

the next file here is the javascript

file and this one needs to go at the end

of our body element so i'm going to

place it here at the very bottom adding

in a few line breaks last but not least

we need a copy of tailwind css so just

head over to the tailwind website we're

going to head over to the setup we're

going to select a play with the cdn and

we're going to copy the syntax to pull

in the cdn into the project in this case

their cdn currently exists as a script

that is placed inside of the head tag

and it downloads the cdn through this

script it also has the benefit of

allowing you to pull in different types

of content here depending on whether you

just want to pull in forms or topography

but if we select the main one over here

we're going to be pulling in everything

now let's give this a test by actually

jumping back into flow byte heading over

to the button section and then selecting

to copy the syntax for the buttons that

we have just over here i'm going to jump

back into vs code here and i'm going to

paste all of this content which is quite

a little bit let's zoom out a little bit

so that you guys can see that and drag

this window over here to the left hand

side what i'm going to do is place this

window here on the right hand side so

that you can actually see the content

that appears when we update the code and

there we go we've got all those buttons

that we previously had here in our

example now existing inside of our demo

here of our web page pretty cool so

we've got this up and running i

mentioned previously that these lines of

codes are pre-baked and made ready for

you to use to convert into actual

content

so all we need to do now is turn this

into say a save button and the content

here is updated if for example we wanted

a different color we could jump in here

and rename this blue to say maybe a

purple and we can see that the button

will automatically update this is one of

the benefits to how quickly and easily

it is to utilize flow by to work inside

of an existing project as well as

customize it to how you want if for

example we were to take out some of

these classes like the white text we

would lose out on some of the styling

this would be the same as for the

padding and other elements which

basically ruined the design it takes

time and care to create these designs

and this is why this is so useful to

have now let's remove all of these

buttons and have a look at a more

interesting and common thing that we

would normally start off on a web page

which is a navbar if you ever feel lost

or you're looking for a component or a

design always jump onto the

documentation which is really well

presented here we've got our navbar

which i'll select and over here we're

going to have a few different examples

of nav buyers that are used in different

types of states as well depending on one

what type of mobile responsiveness

you're after

personally i like usually the most basic

default one because it's just the one

where you have an icon on the left with

the menu on the right hand side but if

you're interested there are drop down

menus there are even multi-level drop

down menus there are sticky navigations

and lots more lots more but let's have a

look at the basic navbar here and we're

going to copy over the syntax which is

ready for us to use and place this into

the project just over here

i'm going to give it a little bit of

mock-up here calling that the nav bar in

comments and we're going to have a look

at the project here which has now

already created this navbar i'm zoomed

in a little bit so you can see that

we've already collapsed that navbar but

if we select the button a drop down

appears with all the navbar options

let's zoom out of this project a little

bit and you can see that as soon as we

do the nav bar with its menu items have

been populated if we wanted to change

for example the logo then we simply just

have to go to this section over here

where this logo exists and we can swap

out this svg that we have with our own

logo as a quick example i've actually

placed in a new svg just over here

called blue logo let's see if we can

update this logo right now to

incorporate that instead of the exact

existing one that we have online here

i'm going to pass in the path blue logo

hit save and we can see that we

immediately have updated that we still

have the span here with the text we can

remove that and we've got our new logo

placed in here the other thing i want

you guys to be aware of is that the dark

mode version of this navbar is currently

active if for example i was to jump into

my windows settings and set myself to

light mode for my entire os this

actually gets reflected in terms of the

styling of flow bite and its components

which is really cool

the reason this happens is because we

actually have all of these baked in in

terms of the dark mode version as well

as the light mode version and this is

what i mean in terms of having a design

for not only just components but their

styling in terms of light mode and dark

mode also available inside of flow

flowbite if for example you wanted to

have more fine grained control over the

dark mode of flow bite you actually have

those options available to be configured

inside of the tailwind.config.js

alternatively you can create your own

scripts to swap from dark mode to light

mode and attach them to buttons inside

of your website and this is also quite

useful we can try this out right now

let's grab this script and place it into

the head of our document here for our

html file i'm just going to place it

here below the next thing we'll want to

do is a grab this button design here and

place this into the code for our website

so i'm just going to place it here into

the body tag finally we're going to add

this here which will allow us to do a

toggle this is just plain javascript

code so we should be able to place this

anywhere what i'm going to do is just

scroll over here to the bottom of the

website open up a new script tag and

paste this in below let's hit save on

that and give that a test we now have

this little dark icon here at the very

top of the website when we select it we

now have a dark version of the website

and when we select it again we're back

to the lite version we've now

successfully implemented dark mode into

the website and it only took us 45

seconds now let's take a look at how

else we can customize the current navbar

that we have here the other thing that

we can do is have a look at the classes

already available to us here inside of

the tailwind css utility classes and we

can customize them depending on what we

want such as instead of having a

background of white we could have a gray

background with a value here weight of

100 allowing it to have a very slight

opacity of a gray color so to speak or

we could make that even stronger by

pushing it up to 500 or 400 depending on

what looks good for our website but

since the white color works best in this

example i'm going to leave it as white

this is just some of the quick ways that

you can customize the website based on

the utility classes that we already have

but in most cases the components are

already designed in such a manner that

they already look good now let me show

you how we could quickly build out a

dashboard maybe an admin dashboard based

on what we already have

we could for example throw in a

breadcrumb here's a pretty simple one

which i can place right below our

section here of the navbar let me place

it right here below the code and let's

have a look at what that might look like

in terms of our design which is just

over here

we can see that if we were to expand our

design we don't actually have a

container for it yet so this is where we

could add in a little bit of our own

code just to make sure that we have

about the same type of container we

could even reuse the container that we

have currently inside of our nav bar to

basically encapsulate the additional

breadcrumb that we have so let me

actually copy this out

paste this div in here below refresh it

and now you'll see that all the content

here is aligning just the same as our

logo here

next up let's see if we can add a little

bit of a section here of maybe a hero or

something else there are drop downs and

often after a breadcrumb you might have

a few options for a person to select

inside of an admin menu so let me

actually copy this across and we're

going to paste this in below this

section but i'm going to keep it inside

of the container let's hit save on that

and let's give it a quick test we can

see that the drop down button here is on

the right hand side and it's working

quite well now let's move on to see if

we can continue to fill this out we're

going to head over to topography and to

headings now here i want to have a bit

more of a hero section for the website

we've got an example of one here which

is nice and centered and we've got the

code that we can copy paste across i'm

gonna jump into the code and we're gonna

place this at the very bottom just over

here and hit save we can see that it

currently exists but unfortunately it's

not centered so let's actually fix that

up right now

we'll wrap this in its own div and this

is where you can still add in your own

code and pass something in like text

center this should center the text and

we can see that now it looks and feels

much better in terms of its styling

however we're still missing a little bit

of padding from the top here and this is

where we can do pt maybe something like

12 to add some padding to the top so

what the goal here is is that some of

these components are made ready for you

to utilize but you can still do some of

your own styling if you want to do that

and the results look quite good one

thing you'll notice is that when we

implement dark mode now to this website

it's not looking particularly good

because of the fact that the background

here for the entire page doesn't change

we can fix that up by going back into

the body here and adding a class here

we'll start off with bg white since

that's what we're using but for the dark

version we could use something like bg

gray say 800. let's hit save on that and

now select the dark mode and we can see

that all the elements including the

background look a lot better with the

implementation of this change now that

we have a good idea of what flow by does

in terms of its components and benefits

let's take this one step further by

having a look at blocks

blocks are basically utilizing one or

more components to create a section such

as a hero section or a feature section

it is essentially the exact same

benefits we were getting before now take

him to that next level so for example

here if we wanted to have a look at this

features section we basically have lots

and lots of different types of examples

of features sections that have been

built out using the components we've

been just learning about

now we can pick one that we like and we

basically can do the exact same thing we

did previously we can have a look at

what they look like at different

viewports such as on tablet or even on

mobile phone and they all work perfectly

we can change their color from dark mode

to light mode and even their colors as

well as their fonts and once we've done

all of this we can simply jump into the

code and copy them and paste them

straight into our project let's take

this section here that we have for

features and try and paste this into our

own code to see what it looks like

instead of the content that i previously

had which was this section here i'm

going to replace it with this feature

section and have a look at what that

looks like on our website and we can see

here it is it's been designed and we've

got all the content available for us to

immediately use but on top of that if we

were to set it to light mode as well as

dark mode we can see most of that is

working let's go back a page to have a

look at some of the types of blocks that

are available obviously we have our hero

feature and header but we also have

things like ctas and pricing tables and

content sections i don't have a footer

yet for my website so what i'm thinking

here is to select the footer example

here of a block and let's actually fill

this out so that we have a website

that's more or less done

the footer has the icon as well as the

topography and links as well as the

copyright basically everything we would

normally use for a copyright section and

man this makes it so much easier i'm

just going to jump back into the code i

should be able to simply paste this in

at the very bottom we can preview the

website and i believe the website should

be just over here you can scroll down

and a mobile version works really well

we can change to a dark version that

looks good we can expand out the entire

desktop and we can see that our footer

is designed and complete which is

awesome i think this pretty much covers

blocks and it doesn't need much more for

an explanation so let's move on to the

other great feature that is a provider

through flowbite which is through figma

and figma is a design software that

allows you to build websites but there

is an integration of flow byte together

with figma where you can start playing

around with all the components that are

normally available inside of flow byte

that are easily copy and pasted and

these components are actually available

and hand crafted as designs inside of

figma

here is an example of what that looks

like and we can simply duplicate and

reuse a lot of these components which

are available it comes with all the

styling such as your fonts as well as

your colors and then on top of that you

have all your pre-made pages and

components designed and ready to go so

if for example you want to have a look

at creating a section or integrating it

into a website all of these things are

ready and they're exactly the same as

the coded html elements so this

basically means that if you're building

a website design using the flow by

design here from vigma you'll be able to

take this into the step of developing it

and it'll look exactly the same all the

colors here are available for you to be

able to select all the topography that

you might ever want to consider or look

at is here if you want to have a look at

your spacing all the grid structures are

here if you want to be more specific

such as have a look at button designs

they're all here too if for example you

want to have a look at the application

ui similar to what is available if you

purchase the pro version they're all

available here too we'll get into that

shortly but realistically there is a lot

of content here ready for you to be able

to use and this is the whole purpose of

flow byte essentially making the flow

from design to code one seamless

practice and so one of the biggest

benefits to flowbite is that it's

entirely free to get started and use you

even have access to blocks the way that

the pricing and pro version works is by

simply unlocking more and more content

for you to be able to use this means

that if for example you wanted to have

more designs inside of figma more

application ui sections pre-made or

marketing ui sections pre-made this is

basically what gets unlocked with the

pro version essentially saving you time

which does save you money the pricing

for it is quite simple it's free to get

started but for a developer edition it's

249 dollars and a designer edition is

149

if you want to find out more about that

you can head over to flowbite.com for

slash pro where you get to have a look

at exactly what is included but i

definitely recommend you try it out to

get a feel of just how much time it will

save you if you start using it i hope

you guys enjoyed this small crash course

into flowbite and it's given you an idea

of exactly what you can start doing with

it in the future we'll be covering

videos and topics on how to build all

sorts of stuff from building forms to

dashboards to even entire websites a lot

of the other links that we've covered

today will also be in the description

below but otherwise make sure you guys

hit like and subscribe and i'll see you

in the next one thank you