How to Add an NFT Portfolio to Your Website or App (2026)

An NFT portfolio allows users to view NFTs owned by a wallet address directly inside your product. This is commonly used for user profiles, dashboards, gated access, and community pages.

In this guide, we cover two supported ways to add an NFT portfolio using Gizmolab UI:

1. Add the NFT portfolio with code using the Gizmolab UI component
2. Embed the NFT portfolio as a widget with no custom code

Both options use the same Gizmolab UI NFT Portfolio, so you can choose based on how much control you need.

What an NFT Portfolio Includes

The Gizmolab UI NFT Portfolio component provides the following functionality by default:

• View NFTs owned by a wallet address
• Support for connected wallets and manual address input
• Paginated NFT grid with a fixed page size of 12
• Loading skeletons, empty state, and error handling
• Image fallback for NFTs with missing metadata

This behavior is identical whether you install the component with code or embed it as a widget.

Option 1: Add an NFT Portfolio With Code

This option is intended for teams building custom Web3 applications using React or Next.js.

When to Use This Option

• You are building a full Web3 product or dashboard
• You want complete control over layout and styling
• You plan to extend the NFT portfolio with custom logic

Tech Stack Used

The Gizmolab UI NFT Portfolio is built using:

• Dynamic for wallet connectivity
• wagmi useAccount() for wallet state
• Alchemy SDK for fetching NFTs by owner
• TanStack React Query for caching and pagination
• viem for address validation and checksum formatting
• shadcn/ui components for UI building blocks

All of this logic is already wired inside the Gizmolab UI component.

Step 1: Install Dependencies

Install the required dependencies for the EVM version.

npm install @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector wagmi viem @tanstack/react-query alchemy-sdk

Step 2: Add Required UI Components

Install the shadcn UI components used by the portfolio.

npx shadcn@latest add card input skeleton button

Step 3: Add Environment Variables

Create a .env file and add your Alchemy API key.

ALCHEMY_API_KEY=your_mainnet_key

Step 4: Render the NFT Portfolio Component

Import and render the NFT Portfolio from Gizmolab UI.

Once rendered, the component automatically supports:

• Connected wallet mode
• Public address lookup
• NFT pagination using Alchemy pageKey
• Loading, empty, and error states

No additional data fetching logic is required.

UX Behavior Included by Default

The component already handles production edge cases:

• Invalid wallet addresses are rejected before fetching
• NFTs without images use a placeholder
• Pagination is limited to 12 NFTs per page
• Users can switch between wallet and address mode

Option 2: Add an NFT Portfolio as an Embed Widget

This option is designed for teams that want to add an NFT portfolio without writing application code.

When to Use This Option

• You are using a CMS, Webflow, Framer, or static site
• You want to launch quickly
• You do not need deep UI customization

How the Embed Widget Works

Gizmolab UI provides a hosted NFT Portfolio widget that can be embedded using an iframe.

The embedded widget includes:

• Wallet connection
• Manual address input
• NFT pagination
• The same UI and logic as the code-based component

Example Embed Snippet

<iframe
  src="https://ui.gizmolab.io/embed/nft-portfolio"
  width="100%"
  height="720"
  loading="lazy"
></iframe>

You can embed this widget inside:

• Marketing pages
• Profile pages
• Community portals
• Admin dashboards
• Documentation sites

Widget Configuration Options

Depending on your setup, the embed can support:

• Default wallet address
• Read-only mode
• Height and layout constraints
• Theme alignment

This allows non-technical teams to ship an NFT portfolio without engineering involvement.

Code vs Embed: Which One Should You Choose?

You can start with the embed widget and migrate to the code-based component later without changing user experience.

SEO Notes

If search visibility matters:

• Use the code-based option for indexable pages such as /portfolio/[address]
• Add descriptive content above the portfolio
• Include FAQ content below the component
• Use embeds mainly for marketing or authenticated views

Frequently Asked Questions

Conclusion

There are two supported ways to add an NFT portfolio using Gizmolab UI:

• Install the NFT Portfolio component with code for full control
• Embed the NFT Portfolio widget for instant deployment

Both options use the same production-grade implementation.

If you need a custom setup, multi-chain support, or a fully integrated Web3 product, Gizmolab can build it for you.