diff --git a/src/core/resolvers/devui.ts b/src/core/resolvers/devui.ts
index 80fe3fe8..ca04d461 100644
--- a/src/core/resolvers/devui.ts
+++ b/src/core/resolvers/devui.ts
@@ -31,20 +31,50 @@ function resolveDirectory(name: string, filename: string) {
 }
 
 // Gets the component style file
-function getSideEffects(name: string) {
+function getSideEffects(name: string, filename: string) {
   if (HARMLESS.includes(name))
     return
 
   if (['row', 'col'].includes(name))
-    return resolveDirectory('grid', 'style.css')
+    return resolveDirectory('grid', filename)
 
   if (['aside', 'content', 'footer', 'header', 'layout'].includes(name))
-    return resolveDirectory('layout', 'style.css')
+    return resolveDirectory('layout', filename)
 
   if (['overlay', 'fixed-overlay', 'flexible-overlay'].includes(name))
-    return resolveDirectory('overlay', 'style.css')
+    return resolveDirectory('overlay', filename)
 
-  return resolveDirectory(name, 'style.css')
+  if (['panel', 'panel-header', 'panel-body'].includes(name))
+    return resolveDirectory('panel', filename)
+
+  if (['menu', 'menu-item', 'sub-menu'].includes(name))
+    return resolveDirectory('menu', filename)
+
+  if (['tabs', 'tab'].includes(name))
+    return resolveDirectory('tabs', filename)
+
+  if (['form', 'form-item'].includes(name))
+    return resolveDirectory('form', filename)
+
+  if (['collapse', 'collapse-item'].includes(name))
+    return resolveDirectory('collapse', filename)
+
+  if (['steps', 'step'].includes(name))
+    return resolveDirectory('steps', filename)
+
+  if (['radio', 'radio-group', 'radio-button'].includes(name))
+    return resolveDirectory('radio', filename)
+
+  if (['column'].includes(name))
+    return resolveDirectory('table', filename)
+
+  if (['timeline-item'].includes(name))
+    return resolveDirectory('timeline', filename)
+
+  if (['splitter-pane'].includes(name))
+    return resolveDirectory('splitter', filename)
+
+  return resolveDirectory(name, filename)
 }
 
 function componentsResolver(name: string, { ssr }: DevResolverOptions): ComponentInfo | undefined {
@@ -54,18 +84,10 @@ function componentsResolver(name: string, { ssr }: DevResolverOptions): Componen
   // Alert => alert; DatePicker => date-picker
   const resolveId = kebabCase(name = name.slice(1))
 
-  if (['row', 'col'].includes(resolveId)) {
-    return {
-      name,
-      sideEffects: getSideEffects(resolveId),
-      from: resolveDirectory('grid', `index.${ssr ? 'umd' : 'es'}.js`),
-    }
-  }
-
   return {
     name,
-    sideEffects: getSideEffects(resolveId),
-    from: resolveDirectory(resolveId, `index.${ssr ? 'umd' : 'es'}.js`),
+    sideEffects: getSideEffects(resolveId, 'style.css'),
+    from: getSideEffects(resolveId, `index.${ssr ? 'umd' : 'es'}.js`)!,
   }
 }
 
@@ -74,7 +96,7 @@ function directivesResolver(name: string, { ssr }: DevResolverOptions): Componen
 
   return {
     name: `${name}Directive`,
-    sideEffects: getSideEffects(resolveId),
+    sideEffects: getSideEffects(resolveId, 'style.css'),
     from: resolveDirectory(resolveId, `index.${ssr ? 'umd' : 'es'}.js`),
   }
 }