diff --git a/README.md b/README.md
index 838c472a..12c7733a 100644
--- a/README.md
+++ b/README.md
@@ -21,6 +21,11 @@ npm run typecheck:watch
 ```
 ## Code generation
 
+generate new SolidJS component:
+```
+npx hygen component new NewComponentName
+```
+
 generate new SolidJS context:
 ```
 npx hygen context new NewContextName
diff --git a/_templates/component/new/component.ejs.t b/_templates/component/new/component.ejs.t
new file mode 100644
index 00000000..6f6a7c04
--- /dev/null
+++ b/_templates/component/new/component.ejs.t
@@ -0,0 +1,18 @@
+---
+to: src/components/<%= h.changeCase.pascal(name) %>/<%= h.changeCase.pascal(name) %>.tsx
+---
+
+import { clsx } from 'clsx'
+import styles from './<%= h.changeCase.pascal(name) %>.module.scss'
+
+type Props = {
+  class?: string
+}
+
+export const <%= h.changeCase.pascal(name) %> = (props: Props) => {
+  return (
+    <div class={clsx(styles.<%= h.changeCase.pascal(name) %>, props.class)}>
+      <%= h.changeCase.pascal(name) %>
+    </div>
+  )
+}
diff --git a/_templates/component/new/index.ejs.t b/_templates/component/new/index.ejs.t
new file mode 100644
index 00000000..13e22de4
--- /dev/null
+++ b/_templates/component/new/index.ejs.t
@@ -0,0 +1,4 @@
+---
+to: src/components/<%= h.changeCase.pascal(name) %>/index.ts
+---
+export { <%= h.changeCase.pascal(name) %> } from './<%= h.changeCase.pascal(name) %>'
diff --git a/_templates/component/new/styles.ejs.t b/_templates/component/new/styles.ejs.t
new file mode 100644
index 00000000..2a0ed70c
--- /dev/null
+++ b/_templates/component/new/styles.ejs.t
@@ -0,0 +1,7 @@
+---
+to: src/components/<%= h.changeCase.pascal(name) %>/<%= h.changeCase.pascal(name) %>.module.scss
+---
+
+.<%= h.changeCase.pascal(name) %> {
+  display: block;
+}
diff --git a/_templates/context/new/hello.ejs.t b/_templates/context/new/context.ejs.t
similarity index 100%
rename from _templates/context/new/hello.ejs.t
rename to _templates/context/new/context.ejs.t