A customizable accordion component with smooth transitions and slot support

Basic Usage

Custom Headers

Custom Content

• Base styling with Tailwind:
  Core Structure

  .accordion {
    @apply p-1 bg-white shadow-sm;
    @apply border-2 border-primary-light-500 rounded-lg;
  }
  
  .accordion-header {
    @apply flex justify-between items-center cursor-pointer p-2 font-bold;
  }
  

• Smooth transitions:
  Transition Effects

  .accordion-enter-active,
  .accordion-leave-active {
    @apply transition-all duration-300;
  }
  
  .accordion-enter-from,
  .accordion-leave-to {
    @apply max-h-0 opacity-0;
  }