> ## Documentation Index
> Fetch the complete documentation index at: https://docs.runmorph.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Quick Start
> Get started with Morph in your React application in minutes.
**Live Demo**
Select a connector below to experience our seamless authentication flow and see
how easy it is to connect third-party services.
This guide will help you quickly integrate Morph into your React application.
## Installation
```bash theme={null}
yarn add @runmorph/atoms
```
## Basic Setup
Wrap your application with the `Morph.Provider` component:
```tsx [Next.js] app/layout.tsx {1,7,9} theme={null}
import { Morph } from "@runmorph/atoms";
export default function RootLayout({ children }) {
return (
{children}
);
}
```
```tsx [Vite] src/main.tsx theme={null}
import { Morph } from "@runmorph/atoms";
ReactDOM.createRoot(document.getElementById('root')!).render(
);
```
```tsx [CRA] src/App.tsx theme={null}
import { Morph } from "@runmorph/atoms";
function App() {
return (
);
}
```
```tsx [Remix] app/root.tsx theme={null}
import { Morph } from "@runmorph/atoms";
export default function App() {
return (
);
}
```
Add your Morph public key to your environment variables:
```env [Next.js] .env.local theme={null}
NEXT_PUBLIC_MORPH_PUBLIC_KEY=pk_...
```
```env [Vite] .env.local theme={null}
VITE_MORPH_PUBLIC_KEY=pk_...
```
```env [CRA] .env.local theme={null}
REACT_APP_MORPH_PUBLIC_KEY=pk_...
```
```env [Remix] .env theme={null}
MORPH_PUBLIC_KEY=pk_...
```
The provider will automatically detect the key from your environment variables.
Add the `Connect` component to handle authorization:
```tsx [Next.js] app/connections/page.tsx {1,5-10} theme={null}
import { Connect } from "@runmorph/atoms";
export default function ConnectionPage({ sessionToken }) {
return (
alert(error.message)
}}
/>
);
}
```
```tsx [Vite] src/components/Connection.tsx theme={null}
import { Connect } from "@runmorph/atoms";
export function ConnectionComponent({ sessionToken }) {
return (
alert(error.message)
}}
/>
);
}
```
```tsx [CRA] src/components/Connection.tsx theme={null}
import { Connect } from "@runmorph/atoms";
export function ConnectionComponent({ sessionToken }) {
return (
alert(error.message)
}}
/>
);
}
```
```tsx [Remix] app/routes/connections.tsx theme={null}
import { Connect } from "@runmorph/atoms";
export default function ConnectionRoute({ sessionToken }) {
return (
alert(error.message)
}}
/>
);
}
```
## Next Steps
* Implement [custom authorization flows](./connection-triggers-authorize) using triggers
* Add [connection settings](./connection-settings) for advanced configuration
* Add [internationalization](./connection-provider#internationalization) support
* Explore [security best practices](./security) for production deployments