> ## Documentation Index > Fetch the complete documentation index at: https://base-a060aa97-eb-mini-app-ia-overhaul.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Next.js Installation · OnchainKit > Install OnchainKit using Next.js Install and configure OnchainKit with Next.js. If you are integrating OnchainKit into an existing project, skip to the [OnchainKit installation](#install-onchainkit). Create a new Next.js project by using the Next.js CLI. More information about Next.js can be found [here](https://nextjs.org/docs/getting-started/installation). ```bash npm npx create-next-app@14 ``` During the setup process you will encounter multiple prompts. Make sure you enable TypeScript, ESLint, and Tailwind CSS. Install OnchainKit in your project. ```bash npm npm install @coinbase/onchainkit ``` ```bash yarn yarn add @coinbase/onchainkit ``` ```bash pnpm pnpm add @coinbase/onchainkit ``` ```bash bun bun add @coinbase/onchainkit ``` Get your [Client API Key](https://portal.cdp.coinbase.com/projects/api-keys/client-key) from Coinbase Developer Platform. OnchainKit copy Client API Key

Create a `.env` file in your project's root directory. OnchainKit define Client API Key

Add your Client API Key to the `.env` file: ```tsx .env NEXT_PUBLIC_ONCHAINKIT_API_KEY=YOUR_CLIENT_API_KEY; ``` Create a `providers.tsx` file. Add `OnchainKitProvider` with your desired config. Under the hood, OnchainKit will create our recommended Wagmi and QueryClient providers. If you wish to customize these providers, check out [Custom Supplemental Providers](/onchainkit/config/supplemental-providers). ```tsx providers.tsx // @noErrors: 2307 2580 2339 - cannot find 'process', cannot find './wagmi', cannot find 'import.meta' 'use client'; import type { ReactNode } from 'react'; import { OnchainKitProvider } from '@coinbase/onchainkit'; import { base } from 'wagmi/chains'; // add baseSepolia for testing // [!code ++] export function Providers(props: { children: ReactNode }) { return ( {props.children} ); } ``` After the setup, wrap your app with the above `` component. ```javascript app.tsx import './globals.css'; import { Providers } from './providers'; // [!code ++] export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode, }>) { return ( {children} ); } ``` OnchainKit components come with pre-configured styles. To include these styles in your project, add the following import statement at the top of this file: ```javascript import '@coinbase/onchainkit/styles.css'; ``` For example, if you're using Next.js with the app router, your `app/layout.tsx` might look like this: ```tsx layout.tsx import '@coinbase/onchainkit/styles.css'; // [!code ++] import './globals.css'; import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import { headers } from 'next/headers'; import { type ReactNode } from 'react'; import { cookieToInitialState } from 'wagmi'; import { getConfig } from '../wagmi'; import { Providers } from './providers'; const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { title: 'Create Wagmi', description: 'Generated by create-wagmi', }; export default function RootLayout(props: { children: ReactNode }) { const initialState = cookieToInitialState( getConfig(), headers().get('cookie') ); return ( {props.children} ); } ``` This ensures that the OnchainKit styles are loaded and applied to your entire application. * For Tailwind CSS users, check out our [Tailwind Integration Guide](/onchainkit/guides/tailwind). * Update the appearance of components by using our built-in themes or crafting your own custom theme. Explore the possibilities in our [Theming Guide](/onchainkit/guides/themes). ## Start building! Explore our ready-to-use onchain components: * [**`Identity`**](/onchainkit/identity/identity) – Show [Basenames](/onchainkit/identity/identity), [avatars](/onchainkit/identity/avatar), [badges](/onchainkit/identity/badge), and [addresses](/onchainkit/identity/address). * [**`Wallet`**](/onchainkit/wallet/wallet) – Create or connect wallets with [Connect Wallet](/onchainkit/wallet/wallet). * [**`Transaction`**](/onchainkit/transaction/transaction) – Handle [transactions](/onchainkit/transaction/transaction) using EOAs or Smart Wallets. * [**`Checkout`**](/onchainkit/checkout/checkout) – Integrate USDC [checkout](/onchainkit/checkout/checkout) flows with ease. * [**`Fund`**](/onchainkit/fund/fund-button) – Create a [funding](/onchainkit/fund/fund-button) flow to onboard users. * [**`Tokens`**](/onchainkit/token/token-chip) – Search and display [tokens](/onchainkit/token/token-chip) with various components. * [**`Swap`**](/onchainkit/swap/swap) – Enable [token swaps](/onchainkit/swap/swap) in your app. * [**`Mint`**](/onchainkit/mint/nft-mint-card) – [View](/onchainkit/mint/nft-mint-card) and [Mint](/onchainkit/mint/nft-mint-card) NFTs in your app.