diff --git a/docs/dialogs.stories.js b/docs/dialogs.stories.js
new file mode 100644
index 00000000..bff79610
--- /dev/null
+++ b/docs/dialogs.stories.js
@@ -0,0 +1,16 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, boolean,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Dialogs', module);
+stories.addDecorator(withKnobs);
+
+stories.add('dialog', () => {
+  const open = boolean('open', true) ? 'open' : '';
+
+  return `<dialog ${open}>
+      <p class="title">Dialog</p>
+      <p>Alert: this is a dialog.</p>
+  </div>`;
+});
diff --git a/scss/elements/dialogs.scss b/scss/elements/dialogs.scss
new file mode 100644
index 00000000..e12e5443
--- /dev/null
+++ b/scss/elements/dialogs.scss
@@ -0,0 +1,15 @@
+.nes-dialog {
+  padding: 1.5rem 2rem;
+  color: $base-color;
+  border: none;
+  box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px;
+
+  > .backdrop,
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}