Get Started

Install and configure Nexus Elements in your React project. Prebuilt components with full Nexus SDK integration, perfect for plug-and-play.

Important Note

Nexus Elements internally uses shadcn/ui components as its foundation. While you can copy and paste components without shadcn, we strongly recommend using shadcn/ui for the best experience, optimal performance, and seamless integration.

Install shadcn/ui

If you haven't already, set up shadcn/ui in your project first. Follow the official installation guide

Install shadcn/ui

Once installed, come back to continue with Nexus Elements.

Add a Nexus Elements component

You can now start adding Nexus Elements components to your project. The command below installs the unified-balance component. Replace it with any other component name as needed.


pnpm dlx shadcn@latest add @nexus-elements/unified-balance

The command will add all required files and dependencies for the selected component.

Wrap your app with the provider

"use client";
import NexusProvider from "@/components/nexus/NexusProvider";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <NexusProvider>{children}</NexusProvider>;
}

Initialize on wallet connect

"use client";
import { useEffect } from "react";
import { useAccount } from "wagmi";
import type { EthereumProvider } from "@avail-project/nexus-core";
import { useNexus } from "@/components/nexus/NexusProvider";
 
export function InitNexusOnConnect() {
  const { status, connector } = useAccount();
  const { handleInit } = useNexus();
 
  useEffect(() => {
    if (status === "connected") {
      connector?.getProvider().then((p) => handleInit(p as EthereumProvider));
    }
  }, [status, connector, handleInit]);
 
  return null;
}

No shadcn/ui? Copy & Paste instead of CLI

Copy and paste components

Visit any component page to view and copy the source files.

Ensure all peer dependencies are installed
Set up required UI primitives (buttons, inputs, dialogs, etc.) manually
Configure styling and theming yourself
Handle any compatibility issues that may arise

MCP Server

On This Page

Important Note

Install shadcn/ui

If you haven't already, set up shadcn/ui in your project first. Follow the official installation guide

Install shadcn/ui

Once installed, come back to continue with Nexus Elements.

Add a Nexus Elements component

You can now start adding Nexus Elements components to your project. The command below installs the unified-balance component. Replace it with any other component name as needed.


pnpm dlx shadcn@latest add @nexus-elements/unified-balance

The command will add all required files and dependencies for the selected component.

Wrap your app with the provider

"use client";
import NexusProvider from "@/components/nexus/NexusProvider";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <NexusProvider>{children}</NexusProvider>;
}

Initialize on wallet connect

"use client";
import { useEffect } from "react";
import { useAccount } from "wagmi";
import type { EthereumProvider } from "@avail-project/nexus-core";
import { useNexus } from "@/components/nexus/NexusProvider";
 
export function InitNexusOnConnect() {
  const { status, connector } = useAccount();
  const { handleInit } = useNexus();
 
  useEffect(() => {
    if (status === "connected") {
      connector?.getProvider().then((p) => handleInit(p as EthereumProvider));
    }
  }, [status, connector, handleInit]);
 
  return null;
}

No shadcn/ui? Copy & Paste instead of CLI

Copy and paste components

Visit any component page to view and copy the source files.

Ensure all peer dependencies are installed
Set up required UI primitives (buttons, inputs, dialogs, etc.) manually
Configure styling and theming yourself
Handle any compatibility issues that may arise