diff --git a/js/components/text_input.js b/js/components/text_input.js
new file mode 100644
index 00000000..8baf14b8
--- /dev/null
+++ b/js/components/text_input.js
@@ -0,0 +1,3 @@
+export default {
+  name: 'textinput'
+}
diff --git a/js/index.js b/js/index.js
index 72dbda3d..b1d81898 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,6 +1,12 @@
 import classes from '../styles/atat.scss'
 import Vue from 'vue/dist/vue'
 
+import TextInput from './components/text_input'
+
+const components = {
+  TextInput
+}
+
 const app = new Vue({
   el: '#app-root',
   methods: {
@@ -17,5 +23,6 @@ const app = new Vue({
         styleguideModal: false,
       }
     }
-  }
+  },
+  components: components
 })
diff --git a/templates/styleguide.html b/templates/styleguide.html
index b57e45ac..dd313184 100644
--- a/templates/styleguide.html
+++ b/templates/styleguide.html
@@ -130,15 +130,17 @@
 
 
       <form>
-        <div class='usa-input'>
-          <label for='basic-text-1'>
-            Basic Text Input
-            <span class='usa-input__help'>
-              This is some help text to explain what this form field is and why you should fill it out.
-            </span>
-          </label>
-          <input id='basic-text-1' type='text' placeholder='this is a sample of what you should enter'/>
-        </div>
+        <TextInput inline-template>
+          <div class='usa-input'>
+            <label for='basic-text-1'>
+              Basic Text Input
+              <span class='usa-input__help'>
+                This is some help text to explain what this form field is and why you should fill it out.
+              </span>
+            </label>
+            <input id='basic-text-1' type='text' placeholder='this is a sample of what you should enter'/>
+          </div>
+        </TextInput>
 
         <div class='usa-input usa-input--error'>
           <label for='basic-text-2'>