Five brand new components, rebranded logo, and a React library
Hello there,
It's been quite a long time since the last newsletter issue when we announced two new components.
I'm happy to let you know that since then we have launched four brand new components, completely overhauled the JS using objects, methods, callback functions, rebranded Flowbite with a new logo, and created a new React.js library.
Flowbite rebranded with new logo
Because of the growth of Flowbite, we decided that it deserved a professional logo from one of the most talented brand designers, @larkef.
Here are a couple of variants of the new logo that we already integrated into all website pages and social media accounts.
We are very happy with the results and I hope that you also dig the new design of the logo. We have already filed trademark rights for the name and the logo.
Accordion component
One of the newer interactive elements that we've built is the accordion component built with Tailwind CSS utility classes and the JS from Flowbite.
You have a lot of options for customization including changing the colors, an always-open setting, and even being able to programmatically create a new Accordion object and use the methods on it.
Check out the Tailwind CSS Accordion component from Flowbite.
Carousel component
I must say that this was one of the hardest components to code using JavaScript because of the slide animation, the indicators, control buttons, and more.
The carousel component is built exclusively based on the utility classes from Tailwind CSS which was not an easy thing to do considering the complexity of such a component.
You have lots of options including adding the control buttons (next and prev) wherever you want, setting the indicator dots, and adding as many slide elements as you'd like.
You can even create a new Carousel object directly from JavaScript and access the methods and callback functions instead of using data attributes.
Check out the Tailwind CSS Carousel component from Flowbite.
Avatar + Rating + Sidebar components
Additionally to the accordion and carousel components, we also launched a few static components, but quite useful, including the avatar, rating, and sidebar.
The avatar can be used to show a user profile image or placeholder as a visual representation on a website.
You can choose from different sizes, styles, and also apply a red or green dot relative to the avatar component to show whether the user is online or not.
Check out the Tailwind CSS Avatar component from Flowbite.
The other component that we have built is the star rating that can be used to show an aggregate result of user reviews on e-commerce websites.
We have built quite a lot of examples including advanced rating representation, user scores, comments, and more.
Check out all of the Tailwind CSS Rating components from Flowbite.
Lastly, we also built a couple of sidebar components that you can use either on the left or right side of your website to show a secondary navigation menu relative to the main navbar.
You have quite a few examples including a dropdown menu, separators, and CTA buttons and cards in a responsive mode.
Check out all the Tailwind CSS Sidebar examples from Flowbite.
Flowbite React Library
This is something that many of the community members have requested and I'm happy to let you know that we have started working on an official Flowbite React library on GitHub.
Progress is pretty good and we have finished a lot of components including the Dropdown, Modal, Cards, and more.
We would be honored if you would be willing to help us finish the last remaining components. You will get a place in the hall of fame :)
Check out the GitHub repository and the issue + project kanban board to see which components need to be built until we launched the v1.0.0-alpha version.
I'd also like to give a special shoutout to @bacali95 and @nesrinesghaier for starting and maintaining this open source project ❤️
Marketing UI finished in Figma
Lastly, I would also like to let you know that for the pro version of Flowbite we have just finished the marketing UI sections in Figma and we have also recently started coding them for the new Flowbite Blocks launch.
If you are a Flowbite Pro customer you have already received the update via email, but you can still get it by purchasing the Designer or Developer Edition.
Check out Flowbite Pro.
Conclusion
A lot of updates today! We are currently working on the new website so you will be able to create an account and access your download items, we are working on Flowbite Blocks including the marketing UI sections coded and a new way of working with the premium components.
We hope that we can launch the new React library in Q2 and integrate our current premium components with React and later in Vue.js
To end on a positive note, we have recently passed 10,000 weekly downloads on NPM for Flowbite 🥳
Zoltán Szőgyényi on Twitter: "https://t.co/4ktqcWbr36 just passed 10,000 weekly downloads on NPM!… " — twitter.com “https://t.co/4ktqcWbr36 just passed 10,000 weekly downloads on NPM!”
Until next time!
Flowbite team