# Use with Next.js

Follow the steps below to integrate the Widget with your Next.js application.

Tested with Next.js 13.

# Integration steps

Step 1 Add the Widget package to your project with:

yarn add @kycdao/widget

npm install @kycdao/widget

Step 2 Add the Widget anywhere in your component.

The Widget is loaded only on the client side, using Dynamic Imports.

:::code source="../../integration-examples/evm-next-example/pages/index.tsx" title="index.tsx" range="6-28" :::

Step 3 Ensure that you also create a #modalroot in your DOM.

<div style={{ height: "100vh", width: "100vw" }}>
    <div id="modalroot" />
</div>

You're all set! You can now use the Widget in your application.

For details on the SDK configuration, see: Configuration options

If you're looking for full examples, check out the Integration examples page.