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:
- Tailwind CSS Drawer - Flowbite: https://flowbite.com/docs/components/drawer/
- GitHub repository: https://github.com/themesberg/flowbite
