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

Поделиться
HTML-код
  • Опубликовано: 19 ноя 2024

Комментарии • 123

  • @MarkErol_Manansala
    @MarkErol_Manansala 7 месяцев назад +5

    I just want to give a thanks all of those person who created this. :) THANK YOU

  • @deliciascaseiras1796
    @deliciascaseiras1796 2 года назад +3

    THANK YOU MY BROTHER FROM ANOTHER COUNTRY AND ANOTHER FAMILY!!!

  • @futuregootecks
    @futuregootecks Год назад

    Holy moly, I was fumbling around with Flowbite and Pelican all day today and would have saved so much time had I watched this video first!

  • @bintangananda7657
    @bintangananda7657 2 года назад +1

    HOLYY SHIITTT I LOVE YOU ❤❤❤ I'VE BEEN SEARCHING AROUND THE INTERNET FOR 5 HOURS AND THEN NOW IT'S OVER FINALLY I LOVE YOU MAAN

  • @robbyevans1101
    @robbyevans1101 Год назад

    I used to get a headache writing code for all the components of my application. till today. your awesome

  • @asdfasdfasdfasdf8037
    @asdfasdfasdfasdf8037 2 года назад +3

    congratulations to this guy, he explains very well

  • @partialcoder6386
    @partialcoder6386 2 года назад +3

    a new subscriber and BIG FAN OF FLOWBITE😄😄😄

  • @lasindunuwanga5292
    @lasindunuwanga5292 11 месяцев назад +1

    If you are new, don't give up at the beginning of the video. Wait till the end. You will actually see how this can make your developer's life easier. You will still have the ability to customize whatever you want.

  • @yomajo
    @yomajo Год назад +2

    I don't get it. If we go to flowbite docs and copy everything, and undelying is the tailwind css classes that are in action. what flowbite dependency doing?

  • @ashimov1970
    @ashimov1970 2 года назад +5

    Happy to discover this project. Really appreciate your great job.

  • @hartabarta
    @hartabarta 2 года назад +2

    Waiting to see additional HowTo videos, especially how to apply our branding on the existing Flowbite UI library in Figma

    • @flowbite
      @flowbite  Год назад +1

      We have big plans for 2023 to post more videos!

  • @ctw-home
    @ctw-home 2 года назад +3

    Loving the project so far!

  • @kenkioqqo
    @kenkioqqo Год назад +8

    This is great, though I feel it would be very helpful for you to share many more quick video tips and tricks to help those who prefer learning by watching tutorials (And occasionally reading the docs) regularly. For example, I'm finding the documentation on how to set up Flowbite in a Dango project a bit difficult to understand. Perhaps you could publish videos showing exactly how to set up Flowbite in different popular Frameworks and Libraries. I think this would come in handy for beginners. There aren't many tutorials by any RUclipsr on Flowbite and the only ones available are JavaScript-related (other languages like Python are not covered)

  • @benshaw6209
    @benshaw6209 2 месяца назад +1

    At 18:45 why are the icon colours missing when the code is pasted in? It just looks black instead of the green like you chose on the Flowbite page?

  • @ControlTheGuh
    @ControlTheGuh 9 месяцев назад

    This is amazing. Glad i found it. Just getting started with svelte

  • @RazorShultzor
    @RazorShultzor Год назад

    This video really helped me understand how to start using a tailwind component library. Awesome

  • @andreaskarz
    @andreaskarz 2 года назад +1

    Amazing, I will check it out this weekend....

  • @GregP22
    @GregP22 Год назад +1

    Hi, i followed everything by letters, but my dark/light mode goes only when i set my browser on light mode. If it's on the settings of my mac or in dark mode, after i click the button it stay in dark mode, suggest?

  • @raeesmohit01
    @raeesmohit01 2 года назад +1

    BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YO

  • @JoeyXie
    @JoeyXie 10 месяцев назад

    Thanks, very helpful, can't wait to writing my own project

  • @shahbazrana7892
    @shahbazrana7892 Год назад

    Bro its a mind blowing tool why you don't getting subscribers on this type of content?

  • @aydnbilgin1627
    @aydnbilgin1627 2 года назад +1

    Nice tutorial. I have been having content issues with my hmdi connected speaker and subwoofer. No soft is coming through, still coming out of

  • @johntrav6191
    @johntrav6191 Год назад +2

    some UI components like accordion, dropdown, modals don't work when we try to visit another page. to make it work we have to refresh the page.

  • @ericlubisse8461
    @ericlubisse8461 Месяц назад

    This looks great!

  • @guhkunpatata3150
    @guhkunpatata3150 Год назад +1

    GREAT EXPLANATION!

  • @KylePrinsloo
    @KylePrinsloo Год назад

    Came from EnhanceUI - buying now 👍

  • @abdullahbinrowshan4562
    @abdullahbinrowshan4562 Год назад +1

    i have use the 'class' to tailwind.config.js file and then dark mode is not working/toggles I've watch this introduction video so many time and copy past those code as well still it's not working
    but if i use 'media' to the tailwind.config.js file and my device in light mode it works
    if you have any suggestions left a reply

  • @imadeekosatriawiguna6252
    @imadeekosatriawiguna6252 Год назад

    awesome 👍😯 it's make using tailwind like bootstrap. Thanks for your hard work

  • @RoshanChaurasia-fn3bo
    @RoshanChaurasia-fn3bo 3 месяца назад

    Flowbite is my new Love

  • @mazkdevf
    @mazkdevf 2 года назад +2

    😳 Nice Video!

  • @JimmyC0
    @JimmyC0 Год назад +1

    how do you turn between cursor and pen that simple? what program do you use and do you use a drawing tablet for it?

  • @mdkawsarislamyeasin4040
    @mdkawsarislamyeasin4040 2 года назад

    Flowbit is Great I usually use flow it and Meraki UI for tailwind CSS projects.

    • @flowbite
      @flowbite  2 года назад +1

      Glad that you find it useful!

    • @mdkawsarislamyeasin4040
      @mdkawsarislamyeasin4040 2 года назад

      @@flowbite But your website should be updated.
      If this page becomes a single-page application that would be a better choice.

  • @bikinitony
    @bikinitony Год назад +1

    why is it that when i apply a custom style (exemple text-white instead of default text-gray) i always get a weird behaviour where some kind of remote script overwrites my default? I've seen your custom color customisation section and it doesn't work for me. I am trying on an accordeon component from your website, I cannot simply change the text color of the component to fit my page style. How do you go around this? thanks

    • @bikinitony
      @bikinitony Год назад

      Update: after tinkering around i figured i could go reach the tailwind flowbite script through the flowbite script url, put it locally in my root and edit the default style concerning the text-gray elements on active / inactive classes. all works!

  • @joseluisUnix
    @joseluisUnix Год назад +1

    What is the software you use to paint on the screen?
    Thank you!

  • @ed5616
    @ed5616 2 года назад +1

    if we are currently using tailwind and what to use flow bite is there any constraint for m old code, do I need to refactor it in flowbite? or could I just plug and play flowbite and start using components?

  • @HoNow222
    @HoNow222 Год назад

    Great that it's also for Angular

  • @tstarfish8829
    @tstarfish8829 2 года назад +5

    Nice, but I see a lot of components use "id" in a template, so it is not possible to use them multiple times without refactoring, e.j. dropdown.

  • @zuzukouzina-original
    @zuzukouzina-original 10 месяцев назад +1

    So many classes just to create a button 😮 The amount of classes is overwhelming. Thnx for the video but I’ll skip Flowbite.

    • @zuzukouzina-original
      @zuzukouzina-original 9 месяцев назад

      I’m sorry for my bad reaction, I really start to like Flowbite. I’ll use Flowbite for my Sveltekit projects.

  • @saubhagyalive3061
    @saubhagyalive3061 2 года назад

    Is carousel with text available on flowbite coz I want to use text over my image in the carousel slider but couldn't find it on flowbite.

  • @ItsEverythingElse
    @ItsEverythingElse 4 месяца назад

    Regarding the navbar component: the styles for the links in the middle are hard-coded to bold the first one but that stays bolded if you change pages via the links. So why doesn't the default code handle that?

  • @veerinbajracharya
    @veerinbajracharya 2 месяца назад

    SO DAMNNNNNNNNNNNN GOOOODDDDDDDDD👏

  • @MayurKamble582
    @MayurKamble582 Год назад

    HELP ME plz
    dark mode script is not working , it always says "Cannot read properties of null (reading 'classList')"

  • @feddu
    @feddu Год назад +1

    Great video! Love Flowbite so far. Does anyone know if there's a way to animate/transition accordions on show/hide?

  • @PersianShare
    @PersianShare Год назад

    🤯such amazing ready to use

  • @VindexTOS
    @VindexTOS Год назад +1

    whats the point of installing it if i have to copy paste pre made code anyways ?

  • @DeepakVerma-er4cs
    @DeepakVerma-er4cs 6 месяцев назад

    Thanks for this information ❤

  • @themarksmith
    @themarksmith 2 года назад

    Excellent video - thank you!

  • @IsaacDevSpace
    @IsaacDevSpace 7 месяцев назад

    Nice work!

  • @rezwansaki
    @rezwansaki Месяц назад

    Awesome !! :)

  • @princesarno2652
    @princesarno2652 2 года назад

    very talented teacher - cheers

  • @reinova-v
    @reinova-v 2 месяца назад

    this is really cool

  • @jairusnouvel4780
    @jairusnouvel4780 2 года назад +2

    Brilliant tutorial! more please

  • @madner201
    @madner201 8 месяцев назад

    Flowbite looks fun

  • @regilearn2138
    @regilearn2138 Год назад +1

    hi ,can someone tell me how to use drawer components with react,bcz its in javascript,how can we use with react

  • @1littlemaxy
    @1littlemaxy 2 года назад

    Great job! Keep going

  • @forcemnewmedia9473
    @forcemnewmedia9473 2 года назад +1

    Thank youuu so much!!!

  • @om7reid334
    @om7reid334 2 года назад +1

    Nice tutorial Micheal ,is it absolutely necessary to have knowledge of soft to use tNice tutorials software?

  • @mayikx
    @mayikx Год назад

    Are you using the last version of talwindcss?

  • @iceyyeah
    @iceyyeah 7 месяцев назад

    This is amazing

  • @indigoram89
    @indigoram89 Год назад

    Cool! What is the app you painting?

  • @leykhins
    @leykhins 2 года назад

    I've never been able to get this to work with Nuxt... any pointers?

  • @johnmukendi7650
    @johnmukendi7650 2 года назад

    I'm using the trial version of soft to learn the basics. How do I make a cool keyboard lody that isn't just a basic softing soft?

  • @nsjames_
    @nsjames_ Год назад

    Hey, what are you using to make this video?

  • @КириллСумовский-д9щ
    @КириллСумовский-д9щ 3 месяца назад

    I bought the pro version, but I can't copy components from figma to create my unique design. Why !?

  • @mugerwaobadiah1621
    @mugerwaobadiah1621 Год назад

    is it possible to have an offline documentation , thanks a lot

  • @hilmansantika4873
    @hilmansantika4873 2 года назад

    Nice tutorial

  • @sikkidesigns
    @sikkidesigns 2 года назад

    good job man

  • @zendaibills
    @zendaibills Год назад

    how to change if I want red theme instead of blue ?

  • @boom3k
    @boom3k Год назад

    What annotation tool is he using? I need this! @flowbite

  • @yantaosong
    @yantaosong Год назад

    change 'class' to 'className' in React everytime ?

  • @sifatniloy3783
    @sifatniloy3783 Год назад

    thank you.

  • @gameking-mh2xd
    @gameking-mh2xd 2 месяца назад

    How I can use in nextjs 14 because its uses

  • @fhaaj66
    @fhaaj66 2 года назад

    The one tNice tutorialng I would like to do (and tNice tutorials will completely convert ) is to copy and paste items from one project to another, it just doesn't

  • @Musman435
    @Musman435 Год назад

    how we can use drawer in Next JS project?

  • @smartlifecrew5095
    @smartlifecrew5095 8 месяцев назад

    Gd overview 🙋👍👏

  • @meermohamad4707
    @meermohamad4707 2 года назад

    I opened up a new project and deleted the area where you "paint" the soft and I don't know how to make it co back!! Lol

  • @ABDUSSALAM-om9mv
    @ABDUSSALAM-om9mv 4 месяца назад

    great..

  • @ahlamridah2918
    @ahlamridah2918 2 года назад

    Accept my application as a friend. I really liked your video ... Interesting. Very.

  • @arrozyadifalaqi9292
    @arrozyadifalaqi9292 2 года назад

    Ima get the 0 dollar one is it rlly good or nah?

  • @joxmanyou
    @joxmanyou 4 месяца назад

    Hi. In this video, which is already a year old, new educational videos are promised... What is happening?

  • @sam74_8
    @sam74_8 Год назад

    the best framework in the world, bootstrap lost his place

  • @ekenennabugwu4732
    @ekenennabugwu4732 2 года назад

    Am having issues intregrating flowbite on my react project need help

    • @flowbite
      @flowbite  2 года назад

      Please check out the Flowbite React library guide: github.com/themesberg/flowbite-react

  • @jayasaikiran1761
    @jayasaikiran1761 2 года назад

    What about licence is it free to use in Commercial projects with react ?

    • @flowbite
      @flowbite  Год назад

      The library is open-source under the MIT license.

    • @jorgeralvero62
      @jorgeralvero62 Год назад +1

      What it means @flowbite can i use for comercial or cannot? Or maybe need to paid to pro version for use flowbite for Commercial

  • @RemixlkDJ
    @RemixlkDJ 2 года назад +1

    I watched tNice tutorials baked af it actually helps if you get into it

  • @EspenNergaard-w9d
    @EspenNergaard-w9d Год назад

    Great library! What I don't understand is how to generate the code of the components from Figma. Let's say you download the Figma design system and use different components to create a prototype. How do you get from there to creating code?

  • @mauriceagbenyagah8698
    @mauriceagbenyagah8698 2 года назад

    how to use flowbite-react in react project please

    • @flowbite
      @flowbite  Год назад

      Please check out this guide: flowbite.com/docs/getting-started/react/

  • @thefamilyfilms4686
    @thefamilyfilms4686 2 года назад

    I think now I can learn Coding 😅

  • @yashbarman9404
    @yashbarman9404 Год назад

    i want react tutorial with it please

    • @flowbite
      @flowbite  Год назад +1

      After we finish wrapping up the new documentation we will follow up with a tutorial on how to use Flowbite React.

  • @NeverCodeAlone
    @NeverCodeAlone 4 месяца назад

    Perfect video, thx a lot. I will do german stuff with this in future. Feel free to get in touch vith me if you wanne a join a remote session. Would be fun.

  • @jit-r5b
    @jit-r5b 2 года назад

    Wow

  • @fahdahsayni
    @fahdahsayni 2 года назад +1

    Installation with laravel 🙂💔

    • @flowbite
      @flowbite  2 года назад

      Please check out our Flowbite + Laravel installation guide here: flowbite.com/docs/getting-started/laravel/

  • @soran2290
    @soran2290 2 года назад

    Black friday discount ?

    • @flowbite
      @flowbite  2 года назад +3

      We won't offer Black Friday discounts with respect to those customers who purchased the pro version for the full price.
      On the other hand, we will launch a considerably large update free of charge to all pro users instead of a Black Friday deal.

  • @ArshAudioBooks
    @ArshAudioBooks 7 месяцев назад

    but it's not free anymore,figma is paid so are many components.

  • @jiyadpp362
    @jiyadpp362 2 года назад +1

    I got the crack

  • @clinicaqorpomarketing505
    @clinicaqorpomarketing505 2 года назад

    for you

  • @nmdpa3
    @nmdpa3 Год назад

    Would be nice to see a dedicated tutorial on using Flowbite with next.js. While It's clear how to install Flowbite for use with next.js and how to use flowbite-react components...its not clear how to take advantage of Flowbite Blocks with next.js. Almost pulled the trigger and purchased a subscription, but that lack of clarity on that part kept me from subscribing. Thanks.

  • @vukasinandrijas812
    @vukasinandrijas812 2 года назад

    Well yeh besides that but i nver need to anyway

  • @shanenicolemaebuenafe9062
    @shanenicolemaebuenafe9062 2 года назад

    When I fill in steps of GMS the in channel rack instead of giving a soft like 'brrrrrrrrrrrrrrrrr' instead of 'br br br br'

  • @christianthomsen6438
    @christianthomsen6438 Год назад

    DaHDaH

  • @muhammadans7071
    @muhammadans7071 Год назад +2

    flowbite is not functional. ilke navbar button is not working on mobile, accordion is not working and many more!!!!