diff --git a/packages/create-arca/index.js b/packages/create-arca/index.js
index 9b9b8bc..4edd6b3 100755
--- a/packages/create-arca/index.js
+++ b/packages/create-arca/index.js
@@ -8,6 +8,7 @@ const {
   green,
   red,
   reset,
+  bold,
 } = require('kolorist');
 
 const cwd = process.cwd();
@@ -21,6 +22,10 @@ const templates = [
     name: 'ts-rollup-starter',
     color: green,
   },
+  {
+    name: 'react-components-rollup',
+    color: bold,
+  },
 ];
 
 const templateNames = templates.map(f => f.name);
diff --git a/packages/create-arca/template-react-components-rollup/.gitignore b/packages/create-arca/template-react-components-rollup/.gitignore
new file mode 100644
index 0000000..edf38a3
--- /dev/null
+++ b/packages/create-arca/template-react-components-rollup/.gitignore
@@ -0,0 +1,120 @@
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+es
+lib
diff --git a/packages/create-arca/template-react-components-rollup/package.json b/packages/create-arca/template-react-components-rollup/package.json
new file mode 100644
index 0000000..9950b0e
--- /dev/null
+++ b/packages/create-arca/template-react-components-rollup/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "template-react-components-rollup",
+  "version": "0.0.0",
+  "description": "",
+  "main": "dist/lib/index.js",
+  "module": "dist/es/index.js",
+  "types": "dist/types/index.d.ts",
+  "scripts": {
+    "clean": "rimraf dist es lib",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npm run clean && rollup -c rollup.config.ts"
+  },
+  "files": [
+    "dist",
+    "es",
+    "lib"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.51.1",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^4.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^3.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.30.0",
+    "sass": "^1.50.0",
+    "typescript": "^4.3.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "antd": "^4.19.5"
+  }
+}
diff --git a/packages/create-arca/template-react-components-rollup/rollup.config.ts b/packages/create-arca/template-react-components-rollup/rollup.config.ts
new file mode 100644
index 0000000..f7f1eba
--- /dev/null
+++ b/packages/create-arca/template-react-components-rollup/rollup.config.ts
@@ -0,0 +1,90 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from 'rollup-plugin-typescript2';
+import { terser } from 'rollup-plugin-terser';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import scss from 'rollup-plugin-scss';
+import * as fs from 'fs';
+
+const components = fs.readdirSync('src').filter(name => name !== 'index.ts');
+
+const packageJson = require('./package.json');
+
+const libraryName = packageJson.name;
+
+/**
+ * plugins
+ */
+const plugins = [
+  peerDepsExternal(),
+  nodeResolve(),
+  commonjs(),
+  typescript({
+    tsconfig: './tsconfig.json',
+    useTsconfigDeclarationDir: true
+  }),
+  terser()
+];
+
+/**
+ * build es module
+ */
+const esmConfig = components.map(cmp => {
+  return {
+    input: `src/${cmp}/index.tsx`,
+    output: {
+      file: `es/${cmp}/index.js`,
+      format: 'esm',
+      sourcemap: false,
+      exports: 'named',
+    },
+    plugins: plugins.concat([
+      scss({
+        output: `es/${cmp}/index.css`,
+      })
+    ])
+  };
+});
+
+/**
+ * build cjs module
+ */
+const cjsConfig = components.map(cmp => {
+  return {
+    input: `src/${cmp}/index.tsx`,
+    output: {
+      file: `lib/${cmp}/index.js`,
+      format: 'cjs',
+      sourcemap: false,
+      exports: 'named',
+    },
+    plugins: plugins.concat([
+      scss({
+        output: `lib/${cmp}/index.css`,
+      })
+    ])
+  };
+});
+
+const config = [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: 'dist/index.js',
+        format: 'umd',
+        sourcemap: false,
+        name: libraryName,
+      }
+    ],
+    plugins: plugins.concat([
+      scss({
+        output: 'dist/index.css',
+      })
+    ])
+  },
+  ...esmConfig,
+  ...cjsConfig
+];
+
+export default config;
diff --git a/packages/create-arca/template-react-components-rollup/src/button/index.scss b/packages/create-arca/template-react-components-rollup/src/button/index.scss
new file mode 100644
index 0000000..1dfac23
--- /dev/null
+++ b/packages/create-arca/template-react-components-rollup/src/button/index.scss
@@ -0,0 +1,3 @@
+.button {
+  color: red;
+}
diff --git a/packages/create-arca/template-react-components-rollup/src/button/index.tsx b/packages/create-arca/template-react-components-rollup/src/button/index.tsx
new file mode 100644
index 0000000..6ea4351
--- /dev/null
+++ b/packages/create-arca/template-react-components-rollup/src/button/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import './index.scss';
+
+export interface ButtonProps {
+
+}
+
+export const Button: React.FC<ButtonProps> = (props) => (
+  <div className="button">
+    button
+  </div>
+);
diff --git a/packages/create-arca/template-react-components-rollup/src/index.ts b/packages/create-arca/template-react-components-rollup/src/index.ts
new file mode 100644
index 0000000..eaf5eea
--- /dev/null
+++ b/packages/create-arca/template-react-components-rollup/src/index.ts
@@ -0,0 +1 @@
+export * from './button';
diff --git a/packages/create-arca/template-react-components-rollup/tsconfig.json b/packages/create-arca/template-react-components-rollup/tsconfig.json
new file mode 100644
index 0000000..e0ff73a
--- /dev/null
+++ b/packages/create-arca/template-react-components-rollup/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "module": "ESNext",
+    "jsx": "react",
+    "sourceMap": true,
+    "outDir": "dist",
+    "strict": true,
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationDir": "dist/types"
+  },
+  "include": [
+    "src"
+  ]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e6d735e..de2788b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1042,7 +1042,7 @@ packages:
       glob: 7.2.0
       is-reference: 1.2.1
       magic-string: 0.25.7
-      resolve: 1.20.0
+      resolve: 1.22.0
       rollup: 2.60.2
     dev: true
 
@@ -1066,7 +1066,7 @@ packages:
       builtin-modules: 3.2.0
       deepmerge: 4.2.2
       is-module: 1.0.0
-      resolve: 1.20.0
+      resolve: 1.22.0
       rollup: 2.60.2
     dev: true
 
@@ -3063,12 +3063,6 @@ packages:
     resolution: {integrity: sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=}
     dev: true
 
-  /is-core-module/2.8.0:
-    resolution: {integrity: sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==}
-    dependencies:
-      has: 1.0.3
-    dev: true
-
   /is-core-module/2.8.1:
     resolution: {integrity: sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==}
     dependencies:
@@ -4746,7 +4740,7 @@ packages:
   /resolve/1.20.0:
     resolution: {integrity: sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==}
     dependencies:
-      is-core-module: 2.8.0
+      is-core-module: 2.8.1
       path-parse: 1.0.7
     dev: true
 
@@ -4801,7 +4795,7 @@ packages:
     peerDependencies:
       rollup: ^2.0.0
     dependencies:
-      '@babel/code-frame': 7.16.0
+      '@babel/code-frame': 7.16.7
       jest-worker: 26.6.2
       rollup: 2.60.2
       serialize-javascript: 4.0.0