Button Preview

This preview built with Class Variance Authority (CVA) and Tailwind Merge to demonstrate how we could make a multiple button variants with the same base styles and different colors, sizes and add an outline or not.

Screenshots

Button Preview Website

Built with

  • React - JS library
  • Tailwind CSS - CSS framework
  • Class Variance Authority (CVA) - This library creates variants of any component by providing multiple options for the variance like variant type, size, shape, and any other type of information used to create a unique variant.
  • Tailwind Merge - Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts.

Author