4
0 Comments

I built a collection of open-source drawer (off-canvas) components in Tailwind CSS [MIT License]

Hey, indie hackers 👋

One of the devs from Flowbite is tuning in here.

Together with the community, we are shipping a brand new Drawer component that lets you show or hide an off-canvas element relative to the document page based on multiple placements: top, right, bottom, and left.

The component works with clean Tailwind CSS classes and you only need to include the JS script to make it work with data attributes and the Drawer API (programmatically via JS).

We also built some examples such as:

  • default drawer (title, description, and CTA buttons)
  • contact form
  • form elements including date picker
  • navigation menu/sidebar

All of the components have dark mode included and are responsive and can be quite easily customized by adding any type of elements inside of it and you can also change the height and width of the drawer.

Another feature that we built is the swipeable edge component which lets you offset the drawer with a given height so that you can show a small part of it when inactive.

Brought to you with big ❤️ by the Flowbite community.

Links:

posted to
TailwindCSS
on July 21, 2022
Trending on Indie Hackers
I've built a 2300$ a month SaaS out of a simple problem. 19 comments 🔥 Roast My Landing Page 12 comments Where can I buy newsletter ad promos? 11 comments How would you monetize my project colorsandfonts? 8 comments Key takeaways growing MRR from $6.5k to $20k for my design studio 6 comments How I built my SaaS in 2 weeks using NextJS and Supabase 5 comments