diff --git a/packages/webawesome/docs/_layouts/component.njk b/packages/webawesome/docs/_layouts/component.njk
index e98bdf3ce..a5594cec1 100644
--- a/packages/webawesome/docs/_layouts/component.njk
+++ b/packages/webawesome/docs/_layouts/component.njk
@@ -26,7 +26,7 @@
     <p>Learn more about <a href="/docs/usage/#slots">using slots</a>.</p>
 
     <wa-scroller>
-      <table class="component-table">
+      <table class="component-table wa-hover-rows">
         <thead>
           <tr>
             <th class="table-name">Name</th>
@@ -57,7 +57,7 @@
     <p>Learn more about <a href="/docs/usage/#attributes-and-properties">attributes and properties</a>.</p>
 
     <wa-scroller>
-      <table class="component-table">
+      <table class="component-table wa-hover-rows">
         <thead>
           <tr>
             <th class="table-name">Name</th>
@@ -104,7 +104,7 @@
     <p>Learn more about <a href="/docs/usage/#methods">methods</a>.</p>
 
     <wa-scroller>
-      <table class="component-table">
+      <table class="component-table wa-hover-rows">
         <thead>
           <tr>
             <th class="table-name">Name</th>
@@ -139,7 +139,7 @@
     <p>Learn more about <a href="/docs/usage/#events">events</a>.</p>
 
     <wa-scroller>
-      <table class="component-table">
+      <table class="component-table wa-hover-rows">
         <thead>
           <tr>
             <th class="table-name">Name</th>
@@ -166,7 +166,7 @@
     <p>Learn more about <a href="/docs/customizing/#custom-properties">CSS custom properties</a>.</p>
 
     <wa-scroller>
-      <table class="component-table">
+      <table class="component-table wa-hover-rows">
         <thead>
           <tr>
             <th class="table-name">Name</th>
@@ -198,7 +198,7 @@
     <p>Learn more about <a href="/docs/customizing/#custom-states">custom states</a>.</p>
 
     <wa-scroller>
-      <table class="component-table">
+      <table class="component-table wa-hover-rows">
         <thead>
           <tr>
             <th class="table-name">Name</th>
@@ -225,7 +225,7 @@
     <p>Learn more about <a href="/docs/customizing/#css-parts">CSS parts</a>.</p>
 
     <wa-scroller>
-      <table class="component-table">
+      <table class="component-table wa-hover-rows">
         <thead>
           <tr>
             <th class="table-name">Name</th>
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index eeeb7f11c..59c0a3b2a 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -8,6 +8,12 @@ Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes
 
 Components with the <wa-badge variant="warning">Experimental</wa-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
 
+## next
+
+### New Features {data-no-outline}
+
+- Added `.wa-hover-rows` to native styles to opt-in to highlighting table rows on hover.
+
 ## 3.0.0-beta.1
 
 We're excited to share the first beta release of Web Awesome, which includes some breaking changes that make the library significantly more intuitive and consistent!
diff --git a/packages/webawesome/docs/docs/utilities/native.md b/packages/webawesome/docs/docs/utilities/native.md
index cc242f3a3..1d9ee27ba 100644
--- a/packages/webawesome/docs/docs/utilities/native.md
+++ b/packages/webawesome/docs/docs/utilities/native.md
@@ -213,7 +213,7 @@ Visual indicators for task completion and loading states.
 
 ### Tables
 
-Structured data presentation with clean styling and optional zebra striping.
+Structured data presentation with clean styling, optional row highlighting on hover, and optional zebra striping.
 
 ```html {.example}
 <table>
@@ -257,10 +257,10 @@ Structured data presentation with clean styling and optional zebra striping.
 </table>
 ```
 
-You can use the `wa-zebra-rows` class to add alternating row colors to your table:
+You can use the `wa-hover-rows` class to highlight table rows on hover and the `wa-zebra-rows` class to add alternating row colors to your table.
 
 ```html {.example}
-<table class="wa-zebra-rows">
+<table class="wa-zebra-rows wa-hover-rows">
   <caption>
     I'm just a table
   </caption>
diff --git a/packages/webawesome/src/styles/native.css b/packages/webawesome/src/styles/native.css
index 89c9931e3..a7b5900c8 100644
--- a/packages/webawesome/src/styles/native.css
+++ b/packages/webawesome/src/styles/native.css
@@ -357,13 +357,15 @@
         background-color: color-mix(in oklab, var(--wa-color-fill-quiet) 60%, transparent);
       }
 
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--wa-color-fill-quiet);
+      :where(table.wa-hover-rows) & {
+        @media (hover: hover) {
+          &:hover {
+            background-color: var(--wa-color-fill-quiet);
 
-          &,
-          + tr {
-            border-top-color: var(--wa-color-border-normal);
+            &,
+            + tr {
+              border-top-color: var(--wa-color-border-normal);
+            }
           }
         }
       }