diff --git a/README.md b/README.md
index a6c307e..4a7fb65 100644
--- a/README.md
+++ b/README.md
@@ -72,12 +72,14 @@ theme:
 
 # Components
 # Create components to reuse common definitions of styles
-# This examples generates `btn`, `btn__icon`
+# This examples generates `btn`, `btn__icon` and btn:hover
 components:
   btn:
-    apply: px-4 py-2 bg-primary-dark hover:bg-gray
+    apply: px-4 py-2 bg-primary-dark
     parts:
       icon: mr-4
+    states:
+      hover: bg-gray border-white
 
 # Core Plugins
 # Explicitly enable Tailwind features using plugins
diff --git a/server/presets.mjs b/server/presets.mjs
index 775d388..82a5ac2 100644
--- a/server/presets.mjs
+++ b/server/presets.mjs
@@ -22,6 +22,7 @@ function defineComponent(name, def) {
     generateComponentParts(name, def.parts, '__'),
     generateComponentParts(name, def.modifiers, '--'),
     generateComponentParts(name, def.variants, '-'),
+    generateComponentParts(name, def.states, ':'),
   ]
     .flat()
     .join('');