System Setup

Configuration

Customize Nexus UI to align with your project's identity. Configure color themes, SEO metadata, and Web3 Provider connections in minutes.

1. Theming & Colors (Tailwind v4)

Nexus UI is built on top of the latest Tailwind CSS v4 system. You no longer need a complex tailwind.config.js file. Just change the global CSS variables.

Open the app/globals.css file and find the @theme directive block. Change the primary color to match your brand.

app/globals.css
@import "tailwindcss";

@theme {
  /* Change default font here (If you aren't using Geist) */
  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;

  /* Change Cyan to your brand color (e.g., purple/violet) */
  --color-primary: #8b5cf6; 
  --color-primary-glow: rgba(139, 92, 246, 0.4);
  
  /* Glassmorphism UI background */
  --color-glass-bg: rgba(255, 255, 255, 0.05);
  --color-glass-border: rgba(255, 255, 255, 0.1);
}

/* Rest of the styling configuration ... */

By changing --color-primary, all buttons, glows, and interactions that were previously Cyan will instantly update automatically across the entire application.

2. Web3 Provider (Wagmi/Viem)

Nexus UI Pro is prepared for seamless integration with Wagmi and Viem. Configure the supported chains for your dApp.

Blockchain network configuration is done inside the main provider file.

config/web3.ts
import { defaultWagmiConfig } from '@web3modal/wagmi/react/config';
import { mainnet, arbitrum, optimism, polygon } from 'wagmi/chains';

export const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID;

if (!projectId) throw new Error('Project ID is not defined');

const metadata = {
  name: 'Nexus UI dApp',
  description: 'Web3 interface powered by Nexus',
  url: 'https://nexus-ui.com',
  icons: ['https://avatars.githubusercontent.com/u/37784886']
}

// Add or remove chains in the 'chains' array below
const chains = [mainnet, arbitrum, optimism, polygon] as const;

export const config = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
  ssr: true, // Must be enabled for Next.js 15 App Router
});

3. Global State (Zustand)

Our Zustand store manages UI states like the Sidebar, Themes, and Mockup Data. Customize the default values here.

store/useWeb3Store.ts
import { create } from 'zustand';

interface Web3State {
  isConnected: boolean;
  address: string | null;
  balance: string;
  connect: (addr: string) => void;
  disconnect: () => void;
}

export const useWeb3Store = create<Web3State>((set) => ({
  isConnected: false, // Set to true if you want to test connected UI state
  address: null,
  balance: '10.50 ETH', // Initial mock balance
  connect: (addr) => set({ isConnected: true, address: addr }),
  disconnect: () => set({ isConnected: false, address: null }),
}));
Previous InstallationNext StepLanding Page Blocks