Collectibles

NFT Components

Use these primitives to render collectible surfaces ranging from a single NFT card to a paginated gallery, while still having access to raw hook data when you need a custom presentation.

Provider requiredERC-721 + ERC-1155Card and gallery views

Primary views

Card and gallery

Start with a single NFT surface or render a collection grid with shared interaction patterns.

Data model

Auto-fetch or manual

Fetch by chain, contract, and token ID or provide the NFT object yourself.

Escape hatch

useNftTokens

Build a custom NFT experience on top of the same underlying collection data.

NFTCard

Display a single NFT with its image, name, and collection. Supports both auto-fetch (provide chain/contract/token IDs) and manual mode (provide NFT data directly).

Auto-Fetch Mode

import { NFTCard } from '@avalabs/avacloud-kit-ui-preview';

<NFTCard
  chainId="43114"
  contractAddress="0x54c800d2331e10467143911aabca092d68bf4166"
  tokenId="1"
/>;

Manual Mode

Pass NFT data directly to skip the network request:

import { NFTCard } from '@avalabs/avacloud-kit-ui-preview';

<NFTCard nft={myNftToken} />;

With Click Handler

<NFTCard
  chainId="43114"
  contractAddress="0x54c800d2331e10467143911aabca092d68bf4166"
  tokenId="1"
  onClick={(nft) => console.log('Clicked:', nft)}
/>

Image Only

<NFTCard
  chainId="43114"
  contractAddress="0x54c800d2331e10467143911aabca092d68bf4166"
  tokenId="1"
  showName={false}
  showCollection={false}
/>

NFTCard Props

Prop

Type

NFTGallery

Display a grid of NFTs from a collection with built-in pagination. Uses NFTCard internally.

Basic Usage

import { NFTGallery } from '@avalabs/avacloud-kit-ui-preview';

<NFTGallery
  chainId="43114"
  contractAddress="0x54c800d2331e10467143911aabca092d68bf4166"
  pageSize={6}
/>;

With Click Handler

<NFTGallery
  chainId="43114"
  contractAddress="0x54c800d2331e10467143911aabca092d68bf4166"
  pageSize={6}
  onClick={(nft) => console.log('Selected:', nft)}
/>

Custom Grid Columns

<NFTGallery
  chainId="43114"
  contractAddress="0x54c800d2331e10467143911aabca092d68bf4166"
  columns={4}
/>

NFTGallery Props

Prop

Type

useNftTokens Hook

For custom UIs, use the hook directly:

Loading NFTs...

import { useNftTokens } from '@avalabs/avacloud-kit-ui-preview';

function MyNFTList() {
  const { data, isLoading, isError } = useNftTokens({
    chainId: '43114',
    contractAddress: '0x54c800d2331e10467143911aabca092d68bf4166',
    pageSize: 12,
  });

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error loading NFTs</div>;

  return (
    <ul>
      {data?.tokens.map((nft, i) => (
        <li key={i}>NFT Token</li>
      ))}
    </ul>
  );
}

useNftTokens Options

Option	Type	Default	Description
`chainId`	`string`	Required	EVM chain ID
`contractAddress`	`string`	Required	Collection contract address
`pageToken`	`string`	`""`	Pagination token
`pageSize`	`number`	`12`	Results per page
`enabled`	`boolean`	`true`	Whether the query is enabled

Common Chain IDs

Chain	Chain ID
Avalanche C-Chain Mainnet	`43114`
Avalanche C-Chain Testnet (Fuji)	`43113`

NFT Components

On this page