Flowbite
Flowbite
  • 2
  • 167 995
Suncel Headless Next.js CMS + Flowbite Blocks Crash Course
Let’s build and deploy a website using the Flowbite Blocks library and Suncel CMS. Thanks to this crash course, in less than one hour you’ll be able to create your home page, a pricing page, an article page, and also deploy it on Vercel.
00:00 - Flowbite Introduction
01:57 - Create a project on Suncel CMS
05:55 - Install the Suncel/UI package with Flowbite blocks
07:44 - Create the homepage
17:02 - Create a pricing page
19:04 - Create an article page
24:33 - SEO Module
27:55 - The concept of Blocks
30:47 - Understanding Globals
32:17 - Adding Header and Footer
47:15 - Deploy on Vercel
Follow these steps to get started:
1. Create an account on: suncel.io
2. Create your project and install the Suncel/UI package with Flowbite blocks docs.suncel.io/developer/getting-started/blocks-library
3. Use existing blocks or create your own editable blocks (feel free to ask some help on the Suncel Discord if needed)
4. You can also check out the Flowbite Blocks collection for extra content: flowbite.com/blocks
You can learn more about Suncel and Flowbite at the official website below:
🌐 Suncel CMS: suncel.io/ - Headless CMS using Next.js
📚 Flowbite Library: flowbite.com - Open-source components built with Tailwind CSS
🎨 Flowbite Figma: flowbite.com/figma/ - Design system built for Figma
🧱 Flowbite Blocks: flowbite.com/blocks/ - Building sections for website and applications
💎 Flowbite Pro: flowbite.com/pro/ - A larger collection of the open-source version of the latter three
#flowbite #tailwind #nextjs #cms #webdev #coding #figma #react #development #ui #ux #frontend
Переглядів: 4 203

Відео

Flowbite Crash Course in 20 mins | Introduction to UI components using Tailwind CSS
Переглядів 164 тис.Рік тому
This video will cover how to use Flowbite and its UI component library for beginners. The video is broken into several parts, including an introduction to Flowbite, a setup guide to its use, and how to begin using the components and blocks provided. If you want to learn more, check out the links below the timestamps: 00:00 - Introduction to Flowbite 00:38 - What is Flowbite 01:59 - Example of A...

КОМЕНТАРІ

  • @ItsEverythingElse
    @ItsEverythingElse 17 днів тому

    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?

  • @ABDUSSALAM-om9mv
    @ABDUSSALAM-om9mv 23 дні тому

    great..

  • @NeverCodeAlone
    @NeverCodeAlone 29 днів тому

    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.

  • @joxmanyou
    @joxmanyou 29 днів тому

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

  • @chadgtr34
    @chadgtr34 2 місяці тому

    how do you add user login forgot password in this suncel project?

  • @iganic7574
    @iganic7574 2 місяці тому

    How to use flowbite charts with react?

  • @DeepakVerma-er4cs
    @DeepakVerma-er4cs 2 місяці тому

    Thanks for this information ❤

  • @ArshAudioBooks
    @ArshAudioBooks 3 місяці тому

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

  • @iceyyeah
    @iceyyeah 3 місяці тому

    This is amazing

  • @MarkErol_Manansala
    @MarkErol_Manansala 3 місяці тому

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

  • @IsaacDevSpace
    @IsaacDevSpace 3 місяці тому

    Nice work!

  • @seancharles1595
    @seancharles1595 3 місяці тому

    Sorry, for me the over-use of the blue arrows etc killed this video, it's a CSS demo not an NFL slomo replay. I will stick to text tutes then. Looks good though.

  • @madner201
    @madner201 5 місяців тому

    Flowbite looks fun

  • @smartlifecrew5095
    @smartlifecrew5095 5 місяців тому

    Gd overview 🙋👍👏

  • @ControlTheGuh
    @ControlTheGuh 5 місяців тому

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

  • @zuzukouzina-original
    @zuzukouzina-original 6 місяців тому

    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 5 місяців тому

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

  • @JoeyXie
    @JoeyXie 7 місяців тому

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

  • @hxxzxtf
    @hxxzxtf 7 місяців тому

    🎯 Key Takeaways for quick navigation: 00:00 🚀 *Flowbite is an open-source library of interactive UI components built on Tailwind CSS utility classes, offering pre-made designs for efficient website development.* 01:51 🎨 *Flowbite provides ready-to-use components like accordions and buttons with Tailwind CSS classes, allowing easy customization and quick implementation.* 06:01 ⚙️ *Setting up Flowbite is straightforward, and you can include its CDN files for quick integration into your project, making it compatible with various frameworks.* 13:40 🌓 *Dark mode implementation is simplified in Flowbite, and you can easily toggle between dark and light modes using pre-baked classes or custom scripts.* 17:38 🧱 *Blocks in Flowbite allow you to create complex sections, such as hero or feature sections, by combining and customizing multiple components to streamline website development.* 20:27 🎨 *Flowbite's integration with Figma allows seamless transition from design to code, offering pre-made pages, components, colors, fonts, and grid structures.* 21:47 💰 *Flowbite is free to use with the option to unlock additional content through the pro version, priced at $249 for developer edition and $149 for designer edition.* 22:14 🕵️ *Explore more details about Flowbite's pro version, including what is included, by visiting flowbite.com/pro.* 22:28 🚀 *Trying out Flowbite is recommended to experience the time-saving benefits it offers in website development.* 22:42 📚 *This crash course provides an overview of Flowbite and its potential applications, setting the stage for future explorations.* Made with HARPA AI

  • @lasindunuwanga5292
    @lasindunuwanga5292 7 місяців тому

    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.

  • @HoNow222
    @HoNow222 9 місяців тому

    Great that it's also for Angular

  • @nabeelshafeeq2089
    @nabeelshafeeq2089 9 місяців тому

    Thank you, Flowbite Team, for your exceptional work and your unwavering commitment to excellence.

  • @yomajo
    @yomajo 9 місяців тому

    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?

  • @GregP22
    @GregP22 9 місяців тому

    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?

  • @johntrav6191
    @johntrav6191 10 місяців тому

    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.

  • @user-zf9zv1ll7x
    @user-zf9zv1ll7x 10 місяців тому

    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?

  • @indigoram89
    @indigoram89 10 місяців тому

    Cool! What is the app you painting?

  • @shahbazrana7892
    @shahbazrana7892 10 місяців тому

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

  • @Musman435
    @Musman435 11 місяців тому

    how we can use drawer in Next JS project?

  • @sam74_8
    @sam74_8 11 місяців тому

    the best framework in the world, bootstrap lost his place

  • @se7en2021
    @se7en2021 11 місяців тому

    The whole thing is buggy af fix this crap asap

  • @feddu
    @feddu 11 місяців тому

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

  • @JimmyC0
    @JimmyC0 11 місяців тому

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

  • @KylePrinsloo
    @KylePrinsloo Рік тому

    Came from EnhanceUI - buying now 👍

  • @nsjames_
    @nsjames_ Рік тому

    Hey, what are you using to make this video?

  • @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.

  • @guhkunpatata3150
    @guhkunpatata3150 Рік тому

    GREAT EXPLANATION!

  • @bikinitony
    @bikinitony Рік тому

    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!

  • @isbelmont
    @isbelmont Рік тому

    Navbar doesn't work on nextjs 13

  • @yantaosong
    @yantaosong Рік тому

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

  • @VindexTOS
    @VindexTOS Рік тому

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

  • @muhammadans7071
    @muhammadans7071 Рік тому

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

  • @dalu_
    @dalu_ Рік тому

    Tailwind sucks. I hate it. Terrible documentation. More complicated than just using css. Why have it easy when you can have it super complicated like with Tailwind...

    • @Jbuckkz
      @Jbuckkz Рік тому

      I thought the same thing until I spent a few weeks really getting into tailwind. it's a huge value add after you get familiar with the framework. every day before the ah ha moment I was hating it though so I feel you.

    • @VindexTOS
      @VindexTOS Рік тому

      tailwind is much better than css and they have best documentation out there tf u talking about ?

  • @MayurKamble582
    @MayurKamble582 Рік тому

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

  • @kenkioqqo
    @kenkioqqo Рік тому

    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 UA-camr on Flowbite and the only ones available are JavaScript-related (other languages like Python are not covered)

  • @mugerwaobadiah1621
    @mugerwaobadiah1621 Рік тому

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

  • @christianthomsen6438
    @christianthomsen6438 Рік тому

    DaHDaH

  • @imadeekosatriawiguna6252
    @imadeekosatriawiguna6252 Рік тому

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

  • @PersianShare
    @PersianShare Рік тому

    🤯such amazing ready to use

  • @abdullahbinrowshan4562
    @abdullahbinrowshan4562 Рік тому

    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

  • @robbyevans1101
    @robbyevans1101 Рік тому

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