Introduction
Welcome to the Nexus UI manual. Learn the core concepts, architecture, and how to utilize our premium Web3 components to build your next dApp.
Quick Start
Clone our Open Source repository and spin up your local development environment in less than 60 seconds.
npx create-next-app -e https://github.com/zonafirman/web3-nexus-template my-dapp
cd my-dapp
npm install
npm run devDashboard Architecture (SPA)
Nexus UI is built with modern design patterns. We utilize the Nested Layouts feature of the Next.js 15 App Router to create a pure Single Page Application experience.
import DashboardSidebar from "@/components/layout/DashboardSidebar";
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
return (
<div className="flex min-h-screen bg-zinc-950 text-white">
{/* Sidebar persists across all /dashboard routes */}
<DashboardSidebar />
{/* Only this main area re-renders on navigation */}
<main className="flex-1 p-8 h-screen overflow-y-auto">
{children}
</main>
</div>
);
}Pro Tip: This structure ensures your Web3 wallet state (Wagmi/Viem connection) is not lost when users navigate from Overview to Settings.
Theming Engine (Tailwind v4)
We have migrated the theme system from the old config to native CSS using the latest \`@theme\` feature in Tailwind CSS v4. This makes your website lighter and more reactive.
@theme {
--color-primary: #06b6d4;
--color-bg: #09090b;
}@theme {
--color-primary: #10b981;
--color-bg: #052e16;
}Unlock The Backend Engine
The UI is Free.
The Logic is Pro.
The Lite version gives you an incredible visual structure. However, if you want to save hundreds of hours connecting this interface to Smart Contracts, you need Nexus UI Pro.