diff --git a/client/galaxy/scripts/components/Alert.md b/client/galaxy/scripts/components/Alert.md
new file mode 100644
index 00000000000..2e578282be3
--- /dev/null
+++ b/client/galaxy/scripts/components/Alert.md
@@ -0,0 +1,23 @@
+# Basic alert types
+
+Default alert:
+
+```js
+<Alert>An alert with all defaults</Alert>
+```
+
+Alert variants:
+
+```js
+<div v-for="variant in [ 'success', 'info', 'warning', 'error' ]">
+	<Alert v-bind:variant="variant">A {{variant}} message</Alert>
+</div>
+```
+
+Dismissible:
+
+```js
+<div v-for="variant in [ 'success', 'info', 'warning', 'error' ]">
+	<Alert :variant="variant" dismissible>A {{variant}} message</Alert>
+</div>
+```
diff --git a/client/galaxy/scripts/components/Alert.vue b/client/galaxy/scripts/components/Alert.vue
index 66af11ae62b..15fa4902114 100644
--- a/client/galaxy/scripts/components/Alert.vue
+++ b/client/galaxy/scripts/components/Alert.vue
@@ -1,5 +1,6 @@
 <template>
     <b-alert :variant="galaxyKwdToBootstrap" :show="showP" v-bind="$props">
+        <!-- @slot Message to display in alert -->
         <slot> {{ message }} </slot>
     </b-alert>
 </template>
@@ -7,21 +8,34 @@
 <script>
 export default {
     props: {
+	/**
+         * Message to display in the alert
+         */
         message: {
             type: String,
             default: ""
         },
+	/**
+         * Alias for variant, takes precedence if both are set
+         */
         status: {
             type: String,
             default: ""
         },
+	/**
+         * Alert type, one of done/success, info, warning, error/danger
+         */
         variant: {
             type: String,
             default: "done"
         },
+	/** Display a close button in the alert that allows it to be dismissed */
         dismissible: Boolean,
+	/** Label for the close button, for aria */
         dismissLabel: String,
+	/** If a number, number of seconds to show before dismissing */
         show: [Boolean, Number],
+	/** Should the alert fade out */
         fade: Boolean
     },
     computed: {
diff --git a/client/styleguide.config.js b/client/styleguide.config.js
index 57aa4f09065..34a66424b2e 100644
--- a/client/styleguide.config.js
+++ b/client/styleguide.config.js
@@ -36,30 +36,33 @@ const fileLoaderConfigRule = { rules: [{ test: fileLoaderTest, use: ["file-loade
 webpackConfig.module = merge.smart(webpackConfig.module, fileLoaderConfigRule);
 webpackConfig.output.publicPath = "";
 
-const sections = [];
+webpackConfig.resolve.modules.push( path.join(__dirname, "galaxy/style/scss") );
 
-glob("./galaxy/docs/galaxy-*.md", (err, files) => {
-    files.forEach(file => {
-        const name = file.match(/galaxy-(\w+).md/)[1];
-        sections.push({ name: "Galaxy " + name, content: file });
-    });
-}),
-    sections.push(
-        ...[
-            {
-                name: "Basic Bootstrap Styles",
-                content: "./galaxy/docs/bootstrap.md"
-            }
-            // This will require additional configuration
-            // {
-            //     name: 'Components',
-            //     components: './galaxy/scripts/components/*.vue'
-            // }
-        ]
-    );
+galaxyStyleDocs = []
+glob.sync("./galaxy/docs/galaxy-*.md").forEach(file => {
+    const name = file.match(/galaxy-(\w+).md/)[1];
+    galaxyStyleDocs.push({ name: name, content: file });
+});
+
+const sections = [
+    {
+	name: 'Components',
+	components: './galaxy/scripts/components/**/*.vue'
+    },
+    {
+	name: 'Galaxy styles',
+	sections: galaxyStyleDocs
+    },
+    {
+	name: "Basic Bootstrap Styles",
+	content: "./galaxy/docs/bootstrap.md"
+    }
+];
 
 module.exports = {
     webpackConfig,
+    pagePerSection: true,
     sections,
-    require: ["./galaxy/style/scss/base.scss"]
+    require: ["./galaxy/style/scss/base.scss", "./galaxy/scripts/polyfills.js", "./galaxy/scripts/bundleEntries.js"],
+    vuex: "./galaxy/scripts/store/index.js"
 };