diff --git a/src/components/Demo/index.vue b/src/components/Demo/index.vue
index aecd65fc..74d87ec6 100644
--- a/src/components/Demo/index.vue
+++ b/src/components/Demo/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="demo">
     <div class="demo__preview" v-if="mainFile">
-      <component :is="mainFile" v-if="mode === 'vue'"/>
-      <react-wrapper :component="mainFile" v-if="mode === 'react'" />
+      <component :is="mainFile" v-if="mode === 'vue'" />
+      <react-renderer :component="mainFile" v-if="mode === 'react'" />
     </div>
     <div class="demo__source">
       <div class="demo__tabs" v-if="showFileNames">
@@ -24,11 +24,11 @@
 </template>
 
 <script>
-import ReactWrapper from '~/components/ReactWrapper'
+import ReactRenderer from '~/components/ReactRenderer'
 
 export default {
   components: {
-    ReactWrapper,
+    ReactRenderer,
   },
   props: {
     name: {
@@ -77,10 +77,9 @@ export default {
   },
 
   mounted() {
-    this.files = require.context(`~/demos/`, true)
+    this.files = require.context(`~/demos/`, true, /.+\..+$/)
       .keys()
       .filter(path => path.startsWith(`./${this.name}`))
-      .filter(path => path.endsWith('.vue') || path.endsWith('.js') || path.endsWith('.css') || path.endsWith('.jsx'))
       .map(path => path.replace('./', ''))
       .map(path => ({
         path,
diff --git a/src/components/ReactWrapper/index.vue b/src/components/ReactRenderer/index.vue
similarity index 100%
rename from src/components/ReactWrapper/index.vue
rename to src/components/ReactRenderer/index.vue
diff --git a/src/demos/Basic/style.scss b/src/demos/Basic/style.scss
new file mode 100644
index 00000000..b7a4851c
--- /dev/null
+++ b/src/demos/Basic/style.scss
@@ -0,0 +1,3 @@
+.bla {
+  color: black;
+}
\ No newline at end of file