A generic - animated - modal component wrapper to display content over anything.

Technical Details

  • It is built on Alpine.js because making a proper modal is not that easy without heavy JS.
  • It is animated using x-transition.

Dependencies

For this component there are some extra variables at the config page like you see it below.

scss
$colors: (
'media': (
'background': hsl(262deg 71% 98%),
'dropzone-background': hsl(214deg 98% 49% / 75%),
'dropzone-border': hsl(214deg 98% 40%),
'icon': hsl(262deg 71% 49%),
),
'modal': (
'background': hsl(210deg 60% 98% / 90%),
),
),