diff --git a/src/Typography/index.js b/src/Typography/index.js
deleted file mode 100644
index ff015e220..000000000
--- a/src/Typography/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import header from './src/header'
-import A from './src/a'
-import P from './src/p'
-import Blockquote from './src/blockquote'
-import Hr from './src/hr'
-import Ul from './src/ul'
-import Ol from './src/ol'
-import Li from './src/li'
-import Text from './src/text'
-
-const Typography = {
-  install (Vue) {
-    const H1 = header(1)
-    const H2 = header(2)
-    const H3 = header(3)
-    const H4 = header(4)
-    const H5 = header(5)
-    const H6 = header(6)
-    Vue.component(H1.name, H1)
-    Vue.component(H2.name, H2)
-    Vue.component(H3.name, H3)
-    Vue.component(H4.name, H4)
-    Vue.component(H5.name, H5)
-    Vue.component(H6.name, H6)
-    Vue.component(A.name, A)
-    Vue.component(P.name, P)
-    Vue.component(Blockquote.name, Blockquote)
-    Vue.component(Hr.name, Hr)
-    Vue.component(Ul.name, Ul)
-    Vue.component(Ol.name, Ol)
-    Vue.component(Li.name, Li)
-    Vue.component(Text.name, Text)
-  }
-}
-
-export default Typography
diff --git a/src/index.js b/src/index.js
index 80a3054fe..58ba34e7d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -63,7 +63,7 @@ import Empty from './Empty'
 import Element from './element'
 import Log from './Log'
 import Code from './Code'
-import Typography from './Typography'
+import Typography from './typography'
 import Upload from './Upload'
 import InputGroup from './input-group'
 import InputGroupLabelStyle from './input-group-label'
diff --git a/src/typography/index.js b/src/typography/index.js
new file mode 100644
index 000000000..ad41fd8a1
--- /dev/null
+++ b/src/typography/index.js
@@ -0,0 +1,36 @@
+import header from './src/header'
+import A from './src/a'
+import P from './src/p'
+import Blockquote from './src/blockquote'
+import Hr from './src/hr'
+import Ul from './src/ul'
+import Ol from './src/ol'
+import Li from './src/li'
+import Text from './src/text'
+
+const Typography = {
+  install (Vue, naive) {
+    const H1 = header(1)
+    const H2 = header(2)
+    const H3 = header(3)
+    const H4 = header(4)
+    const H5 = header(5)
+    const H6 = header(6)
+    Vue.component(naive.componentPrefix + H1.name, H1)
+    Vue.component(naive.componentPrefix + H2.name, H2)
+    Vue.component(naive.componentPrefix + H3.name, H3)
+    Vue.component(naive.componentPrefix + H4.name, H4)
+    Vue.component(naive.componentPrefix + H5.name, H5)
+    Vue.component(naive.componentPrefix + H6.name, H6)
+    Vue.component(naive.componentPrefix + A.name, A)
+    Vue.component(naive.componentPrefix + P.name, P)
+    Vue.component(naive.componentPrefix + Blockquote.name, Blockquote)
+    Vue.component(naive.componentPrefix + Hr.name, Hr)
+    Vue.component(naive.componentPrefix + Ul.name, Ul)
+    Vue.component(naive.componentPrefix + Ol.name, Ol)
+    Vue.component(naive.componentPrefix + Li.name, Li)
+    Vue.component(naive.componentPrefix + Text.name, Text)
+  }
+}
+
+export default Typography
diff --git a/src/Typography/src/a.vue b/src/typography/src/a.vue
similarity index 97%
rename from src/Typography/src/a.vue
rename to src/typography/src/a.vue
index 8734c3422..d1e13cfc7 100644
--- a/src/Typography/src/a.vue
+++ b/src/typography/src/a.vue
@@ -23,7 +23,7 @@ import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 
 export default {
-  name: 'NA',
+  name: 'A',
   mixins: [ withapp, themeable ],
   props: {
     to: {
diff --git a/src/Typography/src/blockquote.vue b/src/typography/src/blockquote.vue
similarity index 95%
rename from src/Typography/src/blockquote.vue
rename to src/typography/src/blockquote.vue
index b0ba6e9b2..681212f44 100644
--- a/src/Typography/src/blockquote.vue
+++ b/src/typography/src/blockquote.vue
@@ -15,7 +15,7 @@ import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 
 export default {
-  name: 'NBlockquote',
+  name: 'Blockquote',
   mixins: [withapp, themeable],
   props: {
     alignText: {
diff --git a/src/Typography/src/header.js b/src/typography/src/header.js
similarity index 97%
rename from src/Typography/src/header.js
rename to src/typography/src/header.js
index 064055f7c..25491c08e 100644
--- a/src/Typography/src/header.js
+++ b/src/typography/src/header.js
@@ -3,7 +3,7 @@ import themeable from '../../_mixins/themeable'
 import getDefaultSlot from '../../_utils/vue/getDefaultSlot'
 
 export default level => ({
-  name: 'NH' + level,
+  name: 'H' + level,
   props: {
     type: {
       type: String,
diff --git a/src/Typography/src/hr.vue b/src/typography/src/hr.vue
similarity index 95%
rename from src/Typography/src/hr.vue
rename to src/typography/src/hr.vue
index ba46d7d23..f60ea5efd 100644
--- a/src/Typography/src/hr.vue
+++ b/src/typography/src/hr.vue
@@ -14,7 +14,7 @@ import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 
 export default {
-  name: 'NHr',
+  name: 'Hr',
   mixins: [withapp, themeable]
 }
 </script>
diff --git a/src/Typography/src/li.vue b/src/typography/src/li.vue
similarity index 96%
rename from src/Typography/src/li.vue
rename to src/typography/src/li.vue
index 4eaa6d7d9..c4db8ec16 100644
--- a/src/Typography/src/li.vue
+++ b/src/typography/src/li.vue
@@ -15,7 +15,7 @@ import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 
 export default {
-  name: 'NLi',
+  name: 'Li',
   mixins: [withapp, themeable],
   props: {
     alignText: {
diff --git a/src/Typography/src/ol.vue b/src/typography/src/ol.vue
similarity index 96%
rename from src/Typography/src/ol.vue
rename to src/typography/src/ol.vue
index f5e824aba..c3143f111 100644
--- a/src/Typography/src/ol.vue
+++ b/src/typography/src/ol.vue
@@ -16,7 +16,7 @@ import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 
 export default {
-  name: 'NOl',
+  name: 'Ol',
   mixins: [withapp, themeable],
   props: {
     alignText: {
diff --git a/src/Typography/src/p.vue b/src/typography/src/p.vue
similarity index 97%
rename from src/Typography/src/p.vue
rename to src/typography/src/p.vue
index 3e1853ffa..e72fd7642 100644
--- a/src/Typography/src/p.vue
+++ b/src/typography/src/p.vue
@@ -15,7 +15,7 @@ import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 
 export default {
-  name: 'NP',
+  name: 'P',
   mixins: [withapp, themeable],
   props: {
     depth: {
diff --git a/src/Typography/src/text.vue b/src/typography/src/text.vue
similarity index 99%
rename from src/Typography/src/text.vue
rename to src/typography/src/text.vue
index d063ef261..fa4078c0a 100644
--- a/src/Typography/src/text.vue
+++ b/src/typography/src/text.vue
@@ -55,7 +55,7 @@ import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 
 export default {
-  name: 'NText',
+  name: 'Text',
   mixins: [withapp, themeable],
   props: {
     code: {
diff --git a/src/Typography/src/ul.vue b/src/typography/src/ul.vue
similarity index 96%
rename from src/Typography/src/ul.vue
rename to src/typography/src/ul.vue
index a86cc151d..bbea2d3aa 100644
--- a/src/Typography/src/ul.vue
+++ b/src/typography/src/ul.vue
@@ -15,7 +15,7 @@ import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 
 export default {
-  name: 'NUl',
+  name: 'Ul',
   mixins: [withapp, themeable],
   props: {
     alignText: {