Installation

Nitso is distributed via the shadcn registry — components are copied directly into your project. Before installing any Nitso component, you need shadcn set up in your project.

Create a Next.js project

If you already have a Next.js project, skip this step.

npx create-next-app@latest

pnpm create next-app@latest

yarn create next-app@latest

bun create next-app@latest

Choose the recommended defaults — Tailwind CSS, App Router, and the @/* import alias are configured automatically.

Initialize shadcn

npx shadcn@latest init

pnpm dlx shadcn@latest init

yarn dlx shadcn@latest init

bunx --bun shadcn@latest init

Follow the prompts. This sets up your components.json config file.

Add Environment Variables

Nitso Provider requires RPC URLs to connect to the Solana network. Add them to your environment file before wiring up the provider. Get a free key at helius.dev, quicknode.com, or alchemy.com.

.env.local

RPC_MAINNET=https://mainnet.helius-rpc.com/?api-key=your-key
RPC_DEVNET=https://devnet.helius-rpc.com/?api-key=your-key

Install Nitso Provider

npx shadcn@latest add https://nitso.fun/r/nitso-provider.json

pnpm dlx shadcn@latest add https://nitso.fun/r/nitso-provider.json

yarn dlx shadcn@latest add https://nitso.fun/r/nitso-provider.json

bunx --bun shadcn@latest add https://nitso.fun/r/nitso-provider.json

NitsoProvider uses React hooks internally and requires "use client". To keep your root layout as a Server Component so metadata exports work correctly for SEO, create a separate client boundary file:

app/provider.tsx

"use client";

import { NitsoProvider } from "@/components/nitso/nitso-provider";

// ⚠️ Public RPC endpoints are rate limited and not suitable for production.
// Replace these with your own — get a free key at helius.dev, quicknode.com, or alchemy.com
const clusters = [
  {
    id: "solana:mainnet" as const,
    label: "Mainnet Beta",
    url: process.env.RPC_MAINNET!,
  },
  {
    id: "solana:devnet" as const,
    label: "Devnet",
    url: process.env.RPC_DEVNET!,
  },
  {
    id: "solana:testnet" as const,
    label: "Testnet",
    url: "https://api.testnet.solana.com",
  },
];

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <NitsoProvider appName="My App" clusters={clusters}>
      {children}
    </NitsoProvider>
  );
}

Then wrap your root layout:

app/layout.tsx

import { Providers } from "./provider";

export const metadata = {
  title: "My App",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Install Connect Button

npx shadcn@latest add https://nitso.fun/r/connect-button-demo.json

pnpm dlx shadcn@latest add https://nitso.fun/r/connect-button-demo.json

yarn dlx shadcn@latest add https://nitso.fun/r/connect-button-demo.json

bunx --bun shadcn@latest add https://nitso.fun/r/connect-button-demo.json

Use it anywhere in your app:

app/page.tsx

import { ConnectButtonDemo } from "@/components/nitso/connect-button-demo";

export default function Home() {
  return (
    <nav>
      <ConnectButtonDemo />
    </nav>
  );
}

Install Tailwind CSS

If your project already has Tailwind CSS configured, skip this step.

npm install tailwindcss @tailwindcss/vite

pnpm add tailwindcss @tailwindcss/vite

yarn add tailwindcss @tailwindcss/vite

bun add tailwindcss @tailwindcss/vite

Replace everything in src/index.css with:

src/index.css

@import "tailwindcss";

Configure path aliases

If your project already has the @/* alias configured, skip this step.

Vite splits TypeScript config across multiple files. Update both:

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.app.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Install @types/node and update vite.config.ts:

npm install @types/node -D

pnpm add @types/node -D

yarn add @types/node --dev

bun add @types/node --dev

vite.config.ts

import path from "path";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Initialize shadcn

npx shadcn@latest init

pnpm dlx shadcn@latest init

yarn dlx shadcn@latest init

bunx --bun shadcn@latest init

Follow the prompts to complete setup.

Add Environment Variables

Nitso Provider requires RPC URLs to connect to the Solana network. Add them to your environment file before wiring up the provider. Get a free key at helius.dev, quicknode.com, or alchemy.com.

.env

VITE_RPC_MAINNET=https://mainnet.helius-rpc.com/?api-key=your-key
VITE_RPC_DEVNET=https://devnet.helius-rpc.com/?api-key=your-key

Install Nitso Provider

npx shadcn@latest add https://nitso.fun/r/nitso-provider.json

pnpm dlx shadcn@latest add https://nitso.fun/r/nitso-provider.json

yarn dlx shadcn@latest add https://nitso.fun/r/nitso-provider.json

bunx --bun shadcn@latest add https://nitso.fun/r/nitso-provider.json

Add it to src/main.tsx:

src/main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { NitsoProvider } from "@/components/nitso/nitso-provider";
import App from "./App";
import "./index.css";

// ⚠️ Public RPC endpoints are rate limited and not suitable for production.
// Replace these with your own — get a free key at helius.dev, quicknode.com, or alchemy.com
const clusters = [
  {
    id: "solana:mainnet" as const,
    label: "Mainnet Beta",
    url: import.meta.env.VITE_RPC_MAINNET,
  },
  {
    id: "solana:devnet" as const,
    label: "Devnet",
    url: import.meta.env.VITE_RPC_DEVNET,
  },
  {
    id: "solana:testnet" as const,
    label: "Testnet",
    url: "https://api.testnet.solana.com",
  },
];

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <NitsoProvider appName="My App" clusters={clusters}>
      <App />
    </NitsoProvider>
  </StrictMode>,
);

Install Connect Button

npx shadcn@latest add https://nitso.fun/r/connect-button-demo.json

pnpm dlx shadcn@latest add https://nitso.fun/r/connect-button-demo.json

yarn dlx shadcn@latest add https://nitso.fun/r/connect-button-demo.json

bunx --bun shadcn@latest add https://nitso.fun/r/connect-button-demo.json

Use it anywhere in your app:

src/App.tsx

import { ConnectButtonDemo } from '@/components/connect-button-demo';

export default function App() {
  return (
    <nav>
      <ConnectButtonDemo />
    </nav>
  );
}

Next steps

Install only the addons you need — each has its own docs page with installation instructions and wiring guide:

Installation

On this page