Logo

1. Accordion2. Badge3. Boll4. Breadcrumb5. Button6. Calendar7. Card8. Carousel9. Checkbox10. Drad & Drop File11. Drawer12. Dropdown13. Feedback14. Footer's15. Framer Motion16. Header's17. Hooks18. How to19. Input20. Modal21. Pagination22. Radio23. Scroll Animation24. Scrollbars25. Select26. Sidebar27. Sticky-Header28. Switch29. Tabs
00

1. Basic Drawer Example:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus fuga reprehenderit omnis! Eius non, in, suscipit ipsa deserunt neque asperiores soluta, incidunt ipsum officia maiores rem eos porro a iure!

<Drower
 open={open} // REQUIRED
 handleClose={() => setOpen(false)} // REQUIRED
 ancor={ancor} // Default is right // other options are left, right
 w="w-1/2" // Default is w-full
 clses="bg-red-500" // Default is null
>
 <div className="w-80 p-5">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, aut!
  Incidunt est tenetur eligendi vitae accusantium natus consequuntur nam
  hic exercitationem quis, sit assumenda facere nostrum in quisquam
  neque rem.
 </div>
</Drower>

ancor =

2. Animated Drawer (X axis) Example:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus fuga reprehenderit omnis! Eius non, in, suscipit ipsa deserunt neque asperiores soluta, incidunt ipsum officia maiores rem eos porro a iure!

<AnimatedDrower
 open={open} // REQUIRED
 handleClose={() => setOpen(false)} // REQUIRED
 ancor={ancor} // Default is right // other options are left, right
 w="w-1/2" // Default is w-full
 clses="bg-red-500" // Default is null
 style={{ background: "red" }} // Default is null
 motionType={pop} // Default is pop // other options are slide, fade, scale, flipY, flipX, springY, springX
>
 Hellow world
</AnimatedDrower>

ancor =

motionType =

width =

3. Animated Drawer (Y axis) Example:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus fuga reprehenderit omnis! Eius non, in, suscipit ipsa deserunt neque asperiores soluta, incidunt ipsum officia maiores rem eos porro a iure!

<AnimatedDrower
 open={open} // REQUIRED
 handleClose={() => setOpen(false)} // REQUIRED
 ancor={ancor} // Default is right // other options are left, right
 style={{ background: "red" }} // Default is null
>
 Hellow world
</AnimatedDrower>

ancor =