diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Button.tsx b/code/frameworks/nextjs/template/cli/ts-3-8/Button.tsx
index e3cb2f231141..30a6bcb96e49 100644
--- a/code/frameworks/nextjs/template/cli/ts-3-8/Button.tsx
+++ b/code/frameworks/nextjs/template/cli/ts-3-8/Button.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import './button.css';
 
-interface ButtonProps {
+export interface ButtonProps {
   /**
    * Is this the principal call to action on the page?
    */
diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx b/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx
index c806ddf023e8..1bf981a4251f 100644
--- a/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx
+++ b/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx
@@ -7,7 +7,7 @@ type User = {
   name: string;
 };
 
-interface HeaderProps {
+export interface HeaderProps {
   user?: User;
   onLogin?: () => void;
   onLogout?: () => void;
diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Button.tsx b/code/frameworks/nextjs/template/cli/ts-4-9/Button.tsx
index e3cb2f231141..30a6bcb96e49 100644
--- a/code/frameworks/nextjs/template/cli/ts-4-9/Button.tsx
+++ b/code/frameworks/nextjs/template/cli/ts-4-9/Button.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import './button.css';
 
-interface ButtonProps {
+export interface ButtonProps {
   /**
    * Is this the principal call to action on the page?
    */
diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Header.tsx b/code/frameworks/nextjs/template/cli/ts-4-9/Header.tsx
index c806ddf023e8..1bf981a4251f 100644
--- a/code/frameworks/nextjs/template/cli/ts-4-9/Header.tsx
+++ b/code/frameworks/nextjs/template/cli/ts-4-9/Header.tsx
@@ -7,7 +7,7 @@ type User = {
   name: string;
 };
 
-interface HeaderProps {
+export interface HeaderProps {
   user?: User;
   onLogin?: () => void;
   onLogout?: () => void;
diff --git a/code/renderers/react/template/cli/ts-3-8/Button.tsx b/code/renderers/react/template/cli/ts-3-8/Button.tsx
index c33be6ec52c4..2b39d6355376 100644
--- a/code/renderers/react/template/cli/ts-3-8/Button.tsx
+++ b/code/renderers/react/template/cli/ts-3-8/Button.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import './button.css';
 
-interface ButtonProps {
+export interface ButtonProps {
   /**
    * Is this the principal call to action on the page?
    */
diff --git a/code/renderers/react/template/cli/ts-3-8/Header.tsx b/code/renderers/react/template/cli/ts-3-8/Header.tsx
index c806ddf023e8..1bf981a4251f 100644
--- a/code/renderers/react/template/cli/ts-3-8/Header.tsx
+++ b/code/renderers/react/template/cli/ts-3-8/Header.tsx
@@ -7,7 +7,7 @@ type User = {
   name: string;
 };
 
-interface HeaderProps {
+export interface HeaderProps {
   user?: User;
   onLogin?: () => void;
   onLogout?: () => void;
diff --git a/code/renderers/react/template/cli/ts-4-9/Button.tsx b/code/renderers/react/template/cli/ts-4-9/Button.tsx
index c33be6ec52c4..2b39d6355376 100644
--- a/code/renderers/react/template/cli/ts-4-9/Button.tsx
+++ b/code/renderers/react/template/cli/ts-4-9/Button.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import './button.css';
 
-interface ButtonProps {
+export interface ButtonProps {
   /**
    * Is this the principal call to action on the page?
    */
diff --git a/code/renderers/react/template/cli/ts-4-9/Header.tsx b/code/renderers/react/template/cli/ts-4-9/Header.tsx
index c806ddf023e8..1bf981a4251f 100644
--- a/code/renderers/react/template/cli/ts-4-9/Header.tsx
+++ b/code/renderers/react/template/cli/ts-4-9/Header.tsx
@@ -7,7 +7,7 @@ type User = {
   name: string;
 };
 
-interface HeaderProps {
+export interface HeaderProps {
   user?: User;
   onLogin?: () => void;
   onLogout?: () => void;