> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sequence.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# v5（Web SDK）への移行

> Sequence Kit（v4）はWeb SDK（v5）へと名称が変わりました。主な変更点をご紹介します。

<Note>
  Web SDKでReact 19がサポートされました！
</Note>

## 新しい依存パッケージのインストール

すべてのフックライブラリの名前が変更されました。Web SDKを始めるために必要な新しい依存パッケージはこちらです：

<CodeGroup>
  ```bash New  theme={null}
  npm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
  # or
  pnpm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
  # or
  yarn add @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
  ```

  ```bash Old theme={null}
  npm install @0xsequence/kit @0xsequence/waas wagmi ethers viem 0xsequence @0xsequence/design-system@^1.9.0 motion @tanstack/react-query
  # or
  pnpm install @0xsequence/kit @0xsequence/waas wagmi ethers viem 0xsequence @0xsequence/design-system@^1.9.0 motion @tanstack/react-query
  # or
  yarn add @0xsequence/kit @0xsequence/waas wagmi ethers viem 0xsequence @0xsequence/design-system@^1.9.0 motion @tanstack/react-query
  ```
</CodeGroup>

## アプリの設定

設定に関する主な違い：

<CodeGroup>
  ```tsx New theme={null}
  import React from "react";
  import ReactDOM from "react-dom/client";
  import "./index.css"; 

  import App from "./App";
  import { SequenceConnect } from "@0xsequence/connect";
  import { SequenceCheckoutProvider } from "@0xsequence/checkout"
  import { config } from "./config";

  function Dapp() {
    return (
      <SequenceConnect config={config}>
        <SequenceCheckoutProvider>
            <App />
        </SequenceCheckoutProvider>
      </SequenceConnect>
    );
  }

  ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
      <Dapp />
    </React.StrictMode>
  );
  ```

  ```tsx Old theme={null}
  import React from "react";
  import ReactDOM from "react-dom/client";
  import "./index.css";

  import App from "./App";
  import { SequenceKit } from "@0xsequence/kit";
  import { KitCheckoutProvider } from "@0xsequence/kit-checkout";
  import { config } from "./config";
  import '@0xsequence/design-system/styles.css'

  function Dapp() {
    return (
      <SequenceKit config={config}>
        <KitCheckoutProvider>
          <App />
        </KitCheckoutProvider>
      </SequenceKit>
    );
  }

  ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
      <Dapp />
    </React.StrictMode>
  );
  ```
</CodeGroup>

* 認証用：`@0xsequence/kit` → `@0xsequence/connect`
* ウォレットUI用：`@0xsequence/kit` → `@0xsequence/wallet-widget`
* `@0xsequence/kit-checkout` → `@0xsequence/checkout`
* `@0xsequence/connect`を使う場合、`@0xsequence/design-system/styles.css`を手動でインポートする必要はありません
* `@0xsequence/connect`は`@0xsequence/design-system` v2と互換性があります
* `KitProvider`は`SequenceConnectProvider`になりました
* `KitCheckoutProvider`は`SequenceCheckoutProvider`になりました
* `KitWalletProvider`は`SequenceWalletProvider`になりました

## アプリの接続

<CodeGroup>
  ```tsx New theme={null}
  import './App.css'
  import { useOpenConnectModal } from '@0xsequence/connect'

  function App() {
    const {setOpenConnectModal} = useOpenConnectModal()
    
    return (
      <>
        <button onClick={() => setOpenConnectModal(true)}>Connect</button>
      </>
    )
  }

  export default App
  ```

  ```tsx Old theme={null}
  import './App.css'
  import { useOpenConnectModal } from '@0xsequence/kit'

  function App() {
    const {setOpenConnectModal} = useOpenConnectModal()
    
    return (
      <>
        <button onClick={() => setOpenConnectModal(true)}>Connect</button>
      </>
    )
  }

  export default App
  ```
</CodeGroup>

## Tailwind css

Web SDKはTailwind v4を使用しています。もしTailwind v3をご利用の場合は、アップグレードが必要です。