diff --git a/packages/button/Button.svelte b/packages/button/Button.svelte
index b8a5d8f0d..27654c8f0 100644
--- a/packages/button/Button.svelte
+++ b/packages/button/Button.svelte
@@ -46,7 +46,7 @@
   import {forwardEventsBuilder} from '@smui/common/forwardEvents.js';
   import {exclude} from '@smui/common/exclude.js';
   import {useActions} from '@smui/common/useActions.js';
-  import Ripple from '@smui/ripple/index.js';
+  import Ripple from '@smui/ripple/bare.js';
 
   const forwardEvents = forwardEventsBuilder(current_component);
 
diff --git a/packages/button/_style.scss b/packages/button/_style.scss
index a4ae41904..6f9455377 100644
--- a/packages/button/_style.scss
+++ b/packages/button/_style.scss
@@ -1,4 +1,5 @@
 @import "@material/button/mdc-button";
+@import "@smui/ripple/style";
 @import "./mixins";
 @include smui-button-core-styles;
 @include smui-button__group-core-styles;
\ No newline at end of file
diff --git a/packages/card/PrimaryAction.svelte b/packages/card/PrimaryAction.svelte
index 10745ab00..c73067ee9 100644
--- a/packages/card/PrimaryAction.svelte
+++ b/packages/card/PrimaryAction.svelte
@@ -13,7 +13,7 @@
   import {forwardEventsBuilder} from '@smui/common/forwardEvents.js';
   import {exclude} from '@smui/common/exclude.js';
   import {useActions} from '@smui/common/useActions.js';
-  import Ripple from '@smui/ripple/index.js';
+  import Ripple from '@smui/ripple/bare.js';
 
   const forwardEvents = forwardEventsBuilder(current_component);
 
diff --git a/packages/card/_style.scss b/packages/card/_style.scss
index 144c54d80..ab296ecce 100644
--- a/packages/card/_style.scss
+++ b/packages/card/_style.scss
@@ -1,6 +1,7 @@
 @import "@material/card/mdc-card";
 @import "@smui/button/style";
 @import "@smui/icon-button/style";
+@import "@smui/ripple/style";
 
 .smui-card--padded, .smui-card__content, .smui-card__primary-action--padded {
   padding: 16px;
diff --git a/packages/fab/Fab.svelte b/packages/fab/Fab.svelte
index 54126f608..b0d747c80 100644
--- a/packages/fab/Fab.svelte
+++ b/packages/fab/Fab.svelte
@@ -16,7 +16,7 @@
   import {forwardEventsBuilder} from '@smui/common/forwardEvents.js';
   import {exclude} from '@smui/common/exclude.js';
   import {useActions} from '@smui/common/useActions.js';
-  import Ripple from '@smui/ripple/index.js';
+  import Ripple from '@smui/ripple/bare.js';
 
   const forwardEvents = forwardEventsBuilder(current_component);
 
diff --git a/packages/fab/_style.scss b/packages/fab/_style.scss
index b0c6f7232..03740239a 100644
--- a/packages/fab/_style.scss
+++ b/packages/fab/_style.scss
@@ -1,3 +1,4 @@
 @import "@material/fab/mdc-fab";
+@import "@smui/ripple/style";
 @import "./mixins";
 @include smui-fab-core-styles;
\ No newline at end of file
diff --git a/packages/icon-button/IconButton.svelte b/packages/icon-button/IconButton.svelte
index 4b0bf2097..cfde4de5b 100644
--- a/packages/icon-button/IconButton.svelte
+++ b/packages/icon-button/IconButton.svelte
@@ -44,7 +44,7 @@
   import {forwardEventsBuilder} from '@smui/common/forwardEvents.js';
   import {exclude} from '@smui/common/exclude.js';
   import {useActions} from '@smui/common/useActions.js';
-  import Ripple from '@smui/ripple/index.js';
+  import Ripple from '@smui/ripple/bare.js';
 
   const forwardEvents = forwardEventsBuilder(current_component, ['MDCIconButtonToggle:change']);
 
diff --git a/packages/icon-button/_style.scss b/packages/icon-button/_style.scss
index 9eaa2f64a..f5b3a8b3b 100644
--- a/packages/icon-button/_style.scss
+++ b/packages/icon-button/_style.scss
@@ -1 +1,2 @@
 @import "@material/icon-button/mdc-icon-button";
+@import "@smui/ripple/style";
diff --git a/packages/list/Item.svelte b/packages/list/Item.svelte
index 4feab39ac..57f3f9e9a 100644
--- a/packages/list/Item.svelte
+++ b/packages/list/Item.svelte
@@ -62,7 +62,7 @@
   import {forwardEventsBuilder} from '@smui/common/forwardEvents.js';
   import {exclude} from '@smui/common/exclude.js';
   import {useActions} from '@smui/common/useActions.js';
-  import Ripple from '@smui/ripple/index.js';
+  import Ripple from '@smui/ripple/bare.js';
 
   const dispatch = createEventDispatcher();
   const forwardEvents = forwardEventsBuilder(current_component);
diff --git a/packages/list/_style.scss b/packages/list/_style.scss
index c431cee53..68386f712 100644
--- a/packages/list/_style.scss
+++ b/packages/list/_style.scss
@@ -1 +1,2 @@
 @import "@material/list/mdc-list";
+@import "@smui/ripple/style";
diff --git a/packages/ripple/bare.js b/packages/ripple/bare.js
new file mode 100644
index 000000000..037eb8f10
--- /dev/null
+++ b/packages/ripple/bare.js
@@ -0,0 +1,3 @@
+import Ripple from './Ripple.js';
+
+export default Ripple;
\ No newline at end of file
diff --git a/packages/ripple/index.js b/packages/ripple/index.js
index bde88aa21..20dfcbebb 100644
--- a/packages/ripple/index.js
+++ b/packages/ripple/index.js
@@ -1,4 +1,3 @@
-import Ripple from './Ripple.js';
 import './_index.scss';
-
-export default Ripple;
\ No newline at end of file
+export * from './bare.js';
+export {default} from './bare.js';