diff --git a/all.js b/all.js
index bc4175c..f3d9678 100644
--- a/all.js
+++ b/all.js
@@ -9,6 +9,8 @@ import './buttons/button.js'
 import './buttons/filled-tonal-button.js'
 import './buttons/outlined-button.js'
 import './buttons/text-button.js'
+import './carousel/carousel.js'
+import './carousel/carousel-item.js'
 import './checkbox/checkbox.js'
 import './chips/assist-chip.js'
 import './chips/chip-set.js'
@@ -48,6 +50,8 @@ import './text/text-field.js'
 // LINT.IfChange(exports)
 // go/keep-sorted start
 export * from './buttons/button.js'
+export * from './carousel/carousel.js'
+export * from './carousel/carousel-item.js'
 export * from './checkbox/checkbox.js'
 export * from './chips/chip.js'
 export * from './chips/chip-set.js'
diff --git a/carousel/carousel-item.js b/carousel/carousel-item.js
new file mode 100644
index 0000000..ef18c7a
--- /dev/null
+++ b/carousel/carousel-item.js
@@ -0,0 +1,27 @@
+import { LitElement, html, css } from 'lit'
+
+export class CarouselItem extends LitElement {
+  constructor() {
+    super()
+    this.internals = this.attachInternals()
+    this.internals.role = 'listitem'
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-shrink: 0;
+        scroll-snap-align: start;
+        border-radius: var(--md-carousel-item-shape, 28px);
+        overflow: hidden;
+      }
+    `,
+  ]
+
+  render() {
+    return html`<slot></slot>`
+  }
+}
+
+customElements.define('md-carousel-item', CarouselItem)
diff --git a/carousel/carousel.js b/carousel/carousel.js
new file mode 100644
index 0000000..5e88d08
--- /dev/null
+++ b/carousel/carousel.js
@@ -0,0 +1,32 @@
+import { LitElement, html, css } from 'lit'
+
+export class Carousel extends LitElement {
+  constructor() {
+    super()
+    this.internals = this.attachInternals()
+    this.internals.role = 'list'
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        overflow-x: auto;
+        scroll-snap-type: x mandatory;
+        scrollbar-width: none; /* Firefox */
+        gap: var(--md-carousel-gap, 8px);
+        padding: var(--md-carousel-padding, 16px);
+      }
+
+      :host::-webkit-scrollbar {
+        display: none; /* Safari and Chrome */
+      }
+    `,
+  ]
+
+  render() {
+    return html`<slot></slot>`
+  }
+}
+
+customElements.define('md-carousel', Carousel)
diff --git a/common.js b/common.js
index d063462..15f8797 100644
--- a/common.js
+++ b/common.js
@@ -7,6 +7,8 @@
  * for production.
  */
 import './buttons/button.js'
+import './carousel/carousel.js'
+import './carousel/carousel-item.js'
 import './checkbox/checkbox.js'
 import './chips/chip.js'
 import './chips/chip-set.js'
@@ -27,6 +29,8 @@ import './tabs/tabs.js'
 import './text/text-field.js'
 
 export * from './buttons/button.js'
+export * from './carousel/carousel.js'
+export * from './carousel/carousel-item.js'
 export * from './checkbox/checkbox.js'
 export * from './chips/chip.js'
 export * from './chips/chip-set.js'