# Getting Started

### Installation[​](https://use.ink/frontend/getting-started#installation) <a href="#installation" id="installation"></a>

Install `useink`

```sh
# npm
npm i useink

# pnpm
pnpm i useink

# yarn
yarn add useink
```

### Configuration[​](https://use.ink/frontend/getting-started#configuration) <a href="#configuration" id="configuration"></a>

#### tsconfig.json[​](https://use.ink/frontend/getting-started#tsconfigjson) <a href="#tsconfigjson" id="tsconfigjson"></a>

You must set `moduleResolution` to `nodenext` or `bundler`. This feature allows your application to discover multiple import paths defined in the **useink** `package.json`. This is required to use various features defined in paths such as [useink/notifications](https://use.ink/frontend/notifications) and [useink/utils](https://use.ink/frontend/utils).

```json
{
  "compilerOptions": {
    "moduleResolution": "nodenext", // or `bundler`
  }
}
```

#### Adding `<UseInkProvider />`[​](https://use.ink/frontend/getting-started#adding-useinkprovider-) <a href="#adding-useinkprovider" id="adding-useinkprovider"></a>

React uses *Providers* to make state accessible to any child component no matter how deeply nested a component is. To make `useink` features available to your application you must wrap your application with `UseInkProvider`.

```javascript
import { UseInkProvider } from 'useink';
import { RococoContractsTestnet, ShibuyaTestnet } from 'useink/chains';

function App() {
  return (
    <UseInkProvider 
      config={{ 
        dappName: 'Flipper', 
        chains: [RococoContractsTestnet, ShibuyaTestnet] ,
      }}
    >
      <MyRoutes />
    </UseInkProvider>
  );
}

export default App
```

There are two fields to note in the example above: `dappName` and `chains`. `dappName` is the name that is displayed to a user when they are asked to connect their browser wallet for the first time. `chains` is an array of chain configurations that your dapp will support. Only chains that are configured here will be accessible to your dApp. `useink` provides chain configurations for hundreds of existing chains that you can import from `useink/chains`.

You can learn more about [chain configuration here](https://use.ink/frontend/configuration).

#### You can now use all the features of useink[​](https://use.ink/frontend/getting-started#you-can-now-use-all-the-features-of-useink) <a href="#you-can-now-use-all-the-features-of-useink" id="you-can-now-use-all-the-features-of-useink"></a>

Next, you can learn how to [connect to a browser wallet extension](https://use.ink/frontend/connect-wallet), or [see an example dApp](https://github.com/paritytech/useink-kitchen-sink/blob/master/frontend/src/components/pg-home/HomePage.tsx).