+
+
+ theme.palette.background.default,
+ color: (theme) => theme.palette.text.primary,
+ }}
+ >
+
+
+
+ Light mode
+
+
+
+
+
+ theme.palette.background.default,
+ color: (theme) => theme.palette.text.primary,
+ }}
+ >
+
+
+
+ Dark mode
+
+
+
+
+);
+
+export const decorators = [withThemeProvider];
diff --git a/ts-packages/react-components/README.md b/ts-packages/react-components/README.md
new file mode 100644
index 0000000000..bc2bd7710f
--- /dev/null
+++ b/ts-packages/react-components/README.md
@@ -0,0 +1,52 @@
+# Nym Shared React Components
+
+This package contains shared React components that are used in other Nym projects.
+
+It uses the following packages:
+
+- [shared MUI theme](../mui-theme/README.md)
+- [webpack config](../webpack/README.md)
+- [MUI](https://https://mui.com/)
+- Typescript
+- React
+
+## Building
+
+```
+yarn
+yarn build
+```
+
+## Development
+
+Run watch mode with:
+
+```
+yarn watch
+```
+
+Or you can run Storybook with:
+
+```
+yarn storybook
+```
+
+Or you can run the [example project](../react-webpack-with-theme-example/README.md) in dev mode and this package in watch mode, and test results in the example project's dev server output.
+
+## Playground
+
+There are [playground components](./src/playground/index.tsx) that are intended to be used during development to see the effects are changes to the MUI theme or shared components at a glance.
+
+They are available in Storybook from [src/stories/Playground.stories.tsx](./src/stories/Playground.stories.tsx).
+
+> ℹ️ **Tip**: use the playground to make sure components stay consistent and you don't break other components while making changes
+
+## Shared assets
+
+This project uses [shared asset files](../../assets/README.md) such as favicons and logos.
+
+> ℹ️ **Tip**: use to keep your project consistent with Nym's branding and so that it automatically receives changes when the shared assets change. Please try to avoid duplicating the files in the shared assets directory.
+
+## Publishing
+
+This package is not published to NPM ... yet.
diff --git a/ts-packages/react-components/package.json b/ts-packages/react-components/package.json
new file mode 100644
index 0000000000..32e9431922
--- /dev/null
+++ b/ts-packages/react-components/package.json
@@ -0,0 +1,66 @@
+{
+ "name": "@nymproject/react",
+ "version": "1.0.0",
+ "license": "Apache-2.0",
+ "main": "dist/index.js",
+ "types": "dist/index.d.ts",
+ "peerDependencies": {
+ "@mui/material": ">= 5",
+ "@mui/styles": ">= 5",
+ "@mui/system": ">= 5",
+ "@mui/icons-material": ">= 5",
+ "@mui/lab": "^5.0.0-alpha.72",
+ "@nymproject/mui-theme": "1",
+ "react": "17",
+ "react-dom": "17",
+ },
+ "dependencies": {
+ "flat": "^5.0.2"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.17.5",
+ "@nymproject/eslint-config-react-typescript": "^1.0.0",
+ "@storybook/addon-actions": "^6.4.19",
+ "@storybook/addon-essentials": "^6.4.19",
+ "@storybook/addon-interactions": "^6.4.19",
+ "@storybook/addon-links": "^6.4.19",
+ "@storybook/builder-webpack5": "^6.4.19",
+ "@storybook/manager-webpack5": "^6.4.19",
+ "@storybook/react": "^6.4.19",
+ "@storybook/testing-library": "^0.0.9",
+ "@svgr/webpack": "^6.1.1",
+ "@types/flat": "^5.0.2",
+ "@types/react": "^17.0.39",
+ "@typescript-eslint/eslint-plugin": "^5.13.0",
+ "@typescript-eslint/parser": "^5.13.0",
+ "babel-loader": "^8.2.3",
+ "babel-plugin-root-import": "^5.1.0",
+ "eslint": "^8.10.0",
+ "eslint-config-airbnb": "^19.0.4",
+ "eslint-config-airbnb-typescript": "^16.1.0",
+ "eslint-config-prettier": "^8.5.0",
+ "eslint-import-resolver-root-import": "^1.0.4",
+ "eslint-plugin-import": "^2.25.4",
+ "eslint-plugin-jest": "^26.1.1",
+ "eslint-plugin-jsx-a11y": "^6.5.1",
+ "eslint-plugin-prettier": "^4.0.0",
+ "eslint-plugin-react": "^7.29.2",
+ "eslint-plugin-react-hooks": "^4.3.0",
+ "eslint-plugin-storybook": "^0.5.7",
+ "jest": "^27.1.0",
+ "prettier": "^2.5.1",
+ "rimraf": "^3.0.2",
+ "ts-jest": "^27.0.5",
+ "tsconfig-paths-webpack-plugin": "^3.5.2",
+ "typescript": "^4.6.2"
+ },
+ "scripts": {
+ "clean": "rimraf dist",
+ "build": "tsc --noEmit false",
+ "watch": "tsc --noEmit false -w",
+ "lint": "eslint src .storybook",
+ "lint:fix": "eslint src .storybook --fix",
+ "storybook": "start-storybook -p 6006",
+ "storybook:build": "build-storybook"
+ }
+}
diff --git a/ts-packages/react-components/src/components/index.ts b/ts-packages/react-components/src/components/index.ts
new file mode 100644
index 0000000000..cb6151df13
--- /dev/null
+++ b/ts-packages/react-components/src/components/index.ts
@@ -0,0 +1 @@
+export * from './logo';
diff --git a/ts-packages/react-components/src/components/logo/LogoProps.ts b/ts-packages/react-components/src/components/logo/LogoProps.ts
new file mode 100644
index 0000000000..24ef2d0b35
--- /dev/null
+++ b/ts-packages/react-components/src/components/logo/LogoProps.ts
@@ -0,0 +1,4 @@
+export interface LogoProps {
+ height?: number | string;
+ width?: number | string;
+}
diff --git a/ts-packages/react-components/src/components/logo/NymLogo.tsx b/ts-packages/react-components/src/components/logo/NymLogo.tsx
new file mode 100644
index 0000000000..27ae65d064
--- /dev/null
+++ b/ts-packages/react-components/src/components/logo/NymLogo.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+import Logo from '@assets/logo/logo-circle.svg';
+import { LogoProps } from './LogoProps';
+
+export const NymLogo: React.FC