diff --git a/src/components/SVG/Box.js b/src/components/SVG/Box.js
index 5f2dec7..81b3259 100644
--- a/src/components/SVG/Box.js
+++ b/src/components/SVG/Box.js
@@ -44,11 +44,11 @@ class Box extends Base {
   labelRef = label => this.label = label
 
   render() {
-    const { type, radius, label, children } = this.props;
+    const { theme, radius, label, children } = this.props;
     const { width, height, labelTransform, rectTransform, contentTransform } = this.state || {};
 
     const rectProps = {
-      style: type ? style[type] : {},
+      style: style[theme],
       width,
       height,
       rx: radius,
@@ -79,7 +79,7 @@ Box.propTypes = {
   padding: PropTypes.number,
   useAnchors: PropTypes.bool,
   radius: PropTypes.number,
-  type: PropTypes.string
+  theme: PropTypes.string
 };
 
 export default Box;
diff --git a/src/components/SVG/Text.js b/src/components/SVG/Text.js
index 3a21aeb..cb98eda 100644
--- a/src/components/SVG/Text.js
+++ b/src/components/SVG/Text.js
@@ -37,11 +37,11 @@ class Text extends Base {
   }
 
   render() {
-    const { type } = this.props;
+    const { theme } = this.props;
     const { transform } = this.state || {};
 
     const textProps = {
-      style: { ...style.text, ...(type ? style[type] : {}) },
+      style: { ...style.text, ...style[theme] },
       transform,
       ref: this.textRef
     };
@@ -59,7 +59,7 @@ Text.propTypes = {
   ]).isRequired,
   quoted: PropTypes.bool,
   transform: PropTypes.string,
-  type: PropTypes.string
+  theme: PropTypes.string
 };
 
 export default Text;
diff --git a/src/devel.js b/src/devel.js
index deb2e6b..de374af 100644
--- a/src/devel.js
+++ b/src/devel.js
@@ -22,14 +22,14 @@ const demoImage = {
         {
           type: 'Box',
           props: {
-            type: 'anchorBox',
+            theme: 'anchorBox',
             radius: 0
           },
           children: [
             {
               type: 'Text',
               props: {
-                type: 'anchorText'
+                theme: 'anchorText'
               },
               children: [
                 'Anchor'
@@ -41,7 +41,7 @@ const demoImage = {
         {
           type: 'Box',
           props: {
-            type: 'literalBox'
+            theme: 'literalBox'
           },
           children: [
             {
@@ -59,7 +59,7 @@ const demoImage = {
         {
           type: 'Box',
           props: {
-            type: 'escapeBox'
+            theme: 'escapeBox'
           },
           children: [
             {
@@ -74,7 +74,7 @@ const demoImage = {
         {
           type: 'Box',
           props: {
-            type: 'charClassBox',
+            theme: 'charClassBox',
             label: 'Label',
             padding: 10
           },
@@ -91,7 +91,7 @@ const demoImage = {
                     {
                       type: 'Box',
                       props: {
-                        type: 'literalBox'
+                        theme: 'literalBox'
                       },
                       children: [
                         {
@@ -114,7 +114,7 @@ const demoImage = {
                     {
                       type: 'Box',
                       props: {
-                        type: 'literalBox'
+                        theme: 'literalBox'
                       },
                       children: [
                         {
@@ -133,7 +133,7 @@ const demoImage = {
                 {
                   type: 'Box',
                   props: {
-                    type: 'escapeBox'
+                    theme: 'escapeBox'
                   },
                   children: [
                     {
@@ -152,7 +152,7 @@ const demoImage = {
         {
           type: 'Box',
           props: {
-            type: 'captureBox',
+            theme: 'captureBox',
             label: 'group #1',
             useAnchors: true,
             padding: 10
@@ -167,7 +167,7 @@ const demoImage = {
                 {
                   type: 'Box',
                   props: {
-                    type: 'literalBox'
+                    theme: 'literalBox'
                   },
                   children: [
                     {
@@ -184,7 +184,7 @@ const demoImage = {
                 {
                   type: 'Box',
                   props: {
-                    type: 'literalBox'
+                    theme: 'literalBox'
                   },
                   children: [
                     {
@@ -201,7 +201,7 @@ const demoImage = {
                 {
                   type: 'Box',
                   props: {
-                    type: 'literalBox'
+                    theme: 'literalBox'
                   },
                   children: [
                     {