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

# Quick Start

> Bootstrap a new CKB app with create-ccc-app or add CCC to an existing project and send your first transaction.

Get a working CKB application running in a few minutes. You can either scaffold a new project with `create-ccc-app` or add CCC manually to an existing project.

## Option 1: Bootstrap with `create-ccc-app`

`create-ccc-app` scaffolds a new CCC project with your chosen framework template, pre-configured with the right packages, TypeScript settings, and a working example.

<CodeGroup>
  ```bash npx theme={null}
  npx create-ccc-app@latest my-ccc-app
  ```

  ```bash yarn theme={null}
  yarn create ccc-app my-ccc-app
  ```

  ```bash pnpm theme={null}
  pnpm create ccc-app my-ccc-app
  ```
</CodeGroup>

Follow the prompts to select a framework template, then open the generated project.

## Option 2: Manual setup

If you are adding CCC to an existing project, follow these steps.

<Steps>
  <Step title="Install the package">
    Install the package that matches your environment. For a React app:

    <CodeGroup>
      ```bash npm theme={null}
      npm install @ckb-ccc/connector-react
      ```

      ```bash yarn theme={null}
      yarn add @ckb-ccc/connector-react
      ```

      ```bash pnpm theme={null}
      pnpm add @ckb-ccc/connector-react
      ```
    </CodeGroup>

    <Note>
      See [Installation](/installation) for the full list of packages and when to use each one.
    </Note>
  </Step>

  <Step title="Check your tsconfig.json">
    CCC uses [Package Entry Points](https://nodejs.org/api/packages.html#packages_package_entry_points) for tree-shaking. Make sure `moduleResolution` in your `tsconfig.json` is set to `node16`, `nodenext`, or `bundler`:

    ```json tsconfig.json theme={null}
    {
      "compilerOptions": {
        "moduleResolution": "bundler"
      }
    }
    ```

    <Warning>
      If `moduleResolution` is set to `node` or `classic`, TypeScript will report errors like `Property '*' does not exist on type 'typeof import(...)'`.
    </Warning>
  </Step>

  <Step title="Wrap your app with Provider">
    `ccc.Provider` manages wallet state and renders the connector UI. Add it at the root of your React application:

    ```tsx app.tsx theme={null}
    import { ccc } from "@ckb-ccc/connector-react";

    export function App() {
      return (
        <ccc.Provider>
          <YourApp />
        </ccc.Provider>
      );
    }
    ```

    <Note>
      If you use React Server Components (e.g. Next.js App Router), add `"use client"` at the top of any file that imports or renders `ccc.Provider`.
    </Note>
  </Step>

  <Step title="Connect a wallet">
    Use the `useCcc` hook to open the wallet selector and read the connected signer:

    ```tsx wallet-button.tsx theme={null}
    import { ccc } from "@ckb-ccc/connector-react";

    export function WalletButton() {
      const { open, disconnect, wallet } = ccc.useCcc();

      if (wallet) {
        return (
          <button onClick={disconnect}>
            Disconnect {wallet.name}
          </button>
        );
      }

      return <button onClick={open}>Connect Wallet</button>;
    }
    ```

    Calling `open()` displays the built-in wallet selector. CCC automatically detects available wallets in the user's browser.
  </Step>

  <Step title="Send CKB">
    Use the `useSigner` hook to get the active signer, then compose and broadcast a transaction:

    ```tsx send-ckb.tsx theme={null}
    import { ccc } from "@ckb-ccc/connector-react";

    export function SendCkb() {
      const signer = ccc.useSigner();

      async function send() {
        if (!signer) return;

        // Resolve the receiver address to a lock script
        const { script: toLock } = await ccc.Address.fromString(
          "ckb1qzda0cr08m85hc8jlnfp3sog62cg63aw0mqdne8u7zxh33kfyqnysq...",
          signer.client,
        );

        // Describe the transaction outputs
        const tx = ccc.Transaction.from({
          outputs: [{ lock: toLock, capacity: ccc.fixedPointFrom("100") }],
        });

        // Complete inputs and pay the fee automatically
        await tx.completeInputsByCapacity(signer);
        await tx.completeFeeBy(signer);

        const txHash = await signer.sendTransaction(tx);
        console.log("Sent:", txHash);
      }

      return <button onClick={send}>Send 100 CKB</button>;
    }
    ```

    `ccc.fixedPointFrom("100")` converts a human-readable CKB amount to the on-chain unit (Shannon, where 1 CKB = 10⁸ Shannon). `completeInputsByCapacity` and `completeFeeBy` automatically select inputs and calculate fees — you only need to describe what you want in the outputs.
  </Step>
</Steps>

## Next steps

<CardGroup cols={2}>
  <Card title="Installation" icon="package" href="/installation">
    Learn about all available packages and advanced import options.
  </Card>

  <Card title="Connect wallets" icon="wallet" href="/guides/connect-wallet">
    Customize the wallet connector and filter supported wallets.
  </Card>

  <Card title="Send CKB" icon="paper-plane" href="/guides/send-ckb">
    Dive deeper into transaction composition and fee handling.
  </Card>

  <Card title="Playground" icon="play" href="https://live.ckbccc.com/">
    Experiment with CCC live in your browser — no install needed.
  </Card>
</CardGroup>