diff --git a/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/package.json b/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/package.json
index 0d4efb98..6b238d1f 100644
--- a/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/package.json	
+++ b/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/package.json	
@@ -19,7 +19,7 @@
   ],
   "prettier": {},
   "dependencies": {
-    "@streamlit/component-v2-lib": "^0.1.0",
+    "@streamlit/component-v2-lib": "^0.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
diff --git a/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/src/MyComponent.tsx b/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/src/MyComponent.tsx
index 57933f81..baff5317 100644
--- a/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/src/MyComponent.tsx	
+++ b/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/src/MyComponent.tsx	
@@ -1,4 +1,4 @@
-import { ComponentArgs } from "@streamlit/component-v2-lib";
+import { FrontendRendererArgs } from "@streamlit/component-v2-lib";
 import {
   CSSProperties,
   FC,
@@ -18,7 +18,7 @@ export type MyComponentDataShape = {
 };
 
 export type MyComponentProps = Pick<
-  ComponentArgs<MyComponentStateShape, MyComponentDataShape>,
+  FrontendRendererArgs<MyComponentStateShape, MyComponentDataShape>,
   "setStateValue"
 > &
   MyComponentDataShape;
diff --git a/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/src/index.tsx b/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/src/index.tsx
index 54d65b29..201e6d23 100644
--- a/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/src/index.tsx	
+++ b/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/src/index.tsx	
@@ -1,4 +1,7 @@
-import { Component, ComponentArgs } from "@streamlit/component-v2-lib";
+import {
+  FrontendRenderer,
+  FrontendRendererArgs,
+} from "@streamlit/component-v2-lib";
 import { StrictMode } from "react";
 import { createRoot, Root } from "react-dom/client";
 
@@ -9,9 +12,10 @@ import MyComponent, {
 
 // Handle the possibility of multiple instances of the component to keep track
 // of the React roots for each component instance.
-const reactRoots: WeakMap<ComponentArgs["parentElement"], Root> = new WeakMap();
+const reactRoots: WeakMap<FrontendRendererArgs["parentElement"], Root> =
+  new WeakMap();
 
-const MyComponentRoot: Component<
+const MyComponentRoot: FrontendRenderer<
   MyComponentStateShape,
   MyComponentDataShape
 > = (args) => {
diff --git a/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-reactless/package.json b/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-reactless/package.json
index e941ca61..62016c4d 100644
--- a/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-reactless/package.json	
+++ b/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-reactless/package.json	
@@ -19,7 +19,7 @@
   ],
   "prettier": {},
   "dependencies": {
-    "@streamlit/component-v2-lib": "^0.1.0"
+    "@streamlit/component-v2-lib": "^0.2.0"
   },
   "devDependencies": {
     "cross-env": "^10.1.0",
diff --git a/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-reactless/src/index.ts b/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-reactless/src/index.ts
index 563a7d73..d87faddd 100644
--- a/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-reactless/src/index.ts	
+++ b/cookiecutter/v2/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-reactless/src/index.ts	
@@ -1,6 +1,9 @@
-import { Component, ComponentArgs } from "@streamlit/component-v2-lib";
+import {
+  FrontendRenderer,
+  FrontendRendererArgs,
+} from "@streamlit/component-v2-lib";
 
-export type ComponentState = {
+export type FrontendState = {
   num_clicks: number;
 };
 
@@ -10,9 +13,14 @@ export type ComponentData = {
 
 // Handle the possibility of multiple instances of the component to keep track
 // of any long-running state for each component instance.
-const instances: WeakMap<ComponentArgs["parentElement"], { numClicks: number }> = new WeakMap();
-
-const MyComponent: Component<ComponentState, ComponentData> = (args) => {
+const instances: WeakMap<
+  FrontendRendererArgs["parentElement"],
+  { numClicks: number }
+> = new WeakMap();
+
+const MyComponent: FrontendRenderer<FrontendState, ComponentData> = (
+  args
+) => {
   const { parentElement, data, setStateValue } = args;
 
   const rootElement = parentElement.querySelector(".component-root");
diff --git a/templates/v2/template-reactless/my_component/frontend/package.json b/templates/v2/template-reactless/my_component/frontend/package.json
index a0ae1e1b..410120f8 100644
--- a/templates/v2/template-reactless/my_component/frontend/package.json
+++ b/templates/v2/template-reactless/my_component/frontend/package.json
@@ -19,7 +19,7 @@
   ],
   "prettier": {},
   "dependencies": {
-    "@streamlit/component-v2-lib": "^0.1.0"
+    "@streamlit/component-v2-lib": "^0.2.0"
   },
   "devDependencies": {
     "cross-env": "^10.1.0",
diff --git a/templates/v2/template-reactless/my_component/frontend/src/index.ts b/templates/v2/template-reactless/my_component/frontend/src/index.ts
index 563a7d73..d87faddd 100644
--- a/templates/v2/template-reactless/my_component/frontend/src/index.ts
+++ b/templates/v2/template-reactless/my_component/frontend/src/index.ts
@@ -1,6 +1,9 @@
-import { Component, ComponentArgs } from "@streamlit/component-v2-lib";
+import {
+  FrontendRenderer,
+  FrontendRendererArgs,
+} from "@streamlit/component-v2-lib";
 
-export type ComponentState = {
+export type FrontendState = {
   num_clicks: number;
 };
 
@@ -10,9 +13,14 @@ export type ComponentData = {
 
 // Handle the possibility of multiple instances of the component to keep track
 // of any long-running state for each component instance.
-const instances: WeakMap<ComponentArgs["parentElement"], { numClicks: number }> = new WeakMap();
-
-const MyComponent: Component<ComponentState, ComponentData> = (args) => {
+const instances: WeakMap<
+  FrontendRendererArgs["parentElement"],
+  { numClicks: number }
+> = new WeakMap();
+
+const MyComponent: FrontendRenderer<FrontendState, ComponentData> = (
+  args
+) => {
   const { parentElement, data, setStateValue } = args;
 
   const rootElement = parentElement.querySelector(".component-root");
diff --git a/templates/v2/template/my_component/frontend/package.json b/templates/v2/template/my_component/frontend/package.json
index 14921971..5d4d36af 100644
--- a/templates/v2/template/my_component/frontend/package.json
+++ b/templates/v2/template/my_component/frontend/package.json
@@ -19,7 +19,7 @@
   ],
   "prettier": {},
   "dependencies": {
-    "@streamlit/component-v2-lib": "^0.1.0",
+    "@streamlit/component-v2-lib": "^0.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
diff --git a/templates/v2/template/my_component/frontend/src/MyComponent.tsx b/templates/v2/template/my_component/frontend/src/MyComponent.tsx
index 57933f81..baff5317 100644
--- a/templates/v2/template/my_component/frontend/src/MyComponent.tsx
+++ b/templates/v2/template/my_component/frontend/src/MyComponent.tsx
@@ -1,4 +1,4 @@
-import { ComponentArgs } from "@streamlit/component-v2-lib";
+import { FrontendRendererArgs } from "@streamlit/component-v2-lib";
 import {
   CSSProperties,
   FC,
@@ -18,7 +18,7 @@ export type MyComponentDataShape = {
 };
 
 export type MyComponentProps = Pick<
-  ComponentArgs<MyComponentStateShape, MyComponentDataShape>,
+  FrontendRendererArgs<MyComponentStateShape, MyComponentDataShape>,
   "setStateValue"
 > &
   MyComponentDataShape;
diff --git a/templates/v2/template/my_component/frontend/src/index.tsx b/templates/v2/template/my_component/frontend/src/index.tsx
index 54d65b29..201e6d23 100644
--- a/templates/v2/template/my_component/frontend/src/index.tsx
+++ b/templates/v2/template/my_component/frontend/src/index.tsx
@@ -1,4 +1,7 @@
-import { Component, ComponentArgs } from "@streamlit/component-v2-lib";
+import {
+  FrontendRenderer,
+  FrontendRendererArgs,
+} from "@streamlit/component-v2-lib";
 import { StrictMode } from "react";
 import { createRoot, Root } from "react-dom/client";
 
@@ -9,9 +12,10 @@ import MyComponent, {
 
 // Handle the possibility of multiple instances of the component to keep track
 // of the React roots for each component instance.
-const reactRoots: WeakMap<ComponentArgs["parentElement"], Root> = new WeakMap();
+const reactRoots: WeakMap<FrontendRendererArgs["parentElement"], Root> =
+  new WeakMap();
 
-const MyComponentRoot: Component<
+const MyComponentRoot: FrontendRenderer<
   MyComponentStateShape,
   MyComponentDataShape
 > = (args) => {