diff --git a/README.md b/README.md
index 6fe1db5..aefa02f 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,10 @@ This will start StimulusJS and load any controllers that you have locally and th
 * [Tabs](/docs/tabs.md)
 * [Toggle](/docs/toggle.md)
 
+## Utilities
+
+* [transition](/docs/transition.md)
+
 ## Styling
 
 All of the styles for the Stimulus components are configurable. Our
diff --git a/docs/transition.md b/docs/transition.md
new file mode 100644
index 0000000..697bbcd
--- /dev/null
+++ b/docs/transition.md
@@ -0,0 +1,59 @@
+# transition function (for custom components)
+
+This is a function that is useful to write custom components or extend the components with animations.
+
+## Usage
+```js
+import { transition } from "tailwindcss-stimulus-components"
+import { Controller } from "@hotwired/stimulus"
+
+class CustomController extends Controller {
+    static targets = ['content']
+
+    showContent() {
+      transition(this.contentTarget, true, this.defaultOptions())
+    }
+
+    hideContent() {
+      transition(this.contentTarget, false, this.defaultOptions())
+    }
+
+    defaultOptions() {
+      return {
+        enter: this.hasEnterClass ? this.enterClass : 'transition ease-out duration-100',
+        enterFrom: this.hasEnterFromClass ? this.enterFromClass : 'transform opacity-0 scale-95',
+        enterTo: this.hasEnterToClass ? this.enterToClass : 'transform opacity-100 scale-100',
+        leave: this.hasLeaveClass ? this.leaveClass : 'transition ease-in duration-75',
+        leaveFrom: this.hasLeaveFromClass ? this.leaveFromClass : 'transform opacity-100 scale-100',
+        leaveTo: this.hasLeaveToClass ? this.leaveToClass : 'transform opacity-0 scale-95',
+        toggleClass: this.hasToggleClass ? this.toggleClass : 'hidden',
+      }
+    }
+}
+
+application.register('custom', CustomController)
+
+```
+
+The default animation attributes can be put in a controller like this so they can optionnaly be overwritten
+on an element by element basis
+
+```html
+<div class="inline-block relative cursor-pointer" data-controller="custom" >
+  <span class="underline" data-action="custom#showContent">Show</span>
+  <span class="underline" data-action="custom#hideContent">Hide</span>
+  <div class="hidden absolute left-0 bottom-7 w-max bg-white border border-gray-200 shadow rounded p-2"
+       data-custom-target="content"       
+
+       data-custom-enter="transition ease-out duration-100"
+       data-custom-enter-from="transform opacity-0 scale-95"
+       data-custom-enter-to="transform opacity-100 scale-100"
+       data-custom-leave="transition ease-in duration-75"
+       data-custom-leave-from="transform opacity-100 scale-100"
+       data-custom-leave-to="transform opacity-0 scale-95-0" 
+       data-toggle="hidden"        
+    >
+    Content
+  </div>
+</div>
+```
diff --git a/src/index.js b/src/index.js
index 56ddc06..9aeb8de 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,3 +7,4 @@ export { default as Popover } from './popover'
 export { default as Slideover } from './slideover'
 export { default as Tabs } from './tabs'
 export { default as Toggle } from './toggle'
+export { transition } from "./transition"