Collectible

The Collectible component displays NFT collectibles with automatic metadata resolution and image display.

Usage

import { Collectible } from '@avalabs/builderkit';

// Basic usage
<Collectible 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  token_id={1}
/>

// With custom styling
<Collectible 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  token_id={1}
  className="border-2 rounded-xl"
/>

Props

Prop	Type	Default	Description
`chain_id`	`number`	-	Chain ID where the NFT exists
`address`	`string`	-	NFT contract address
`token_id`	`number`	-	Token ID of the NFT
`className`	`string`	-	Additional CSS classes

Features

Automatic metadata resolution from IPFS
Displays NFT image and name
Shows token ID
Supports ERC721 standard
Responsive layout with fixed dimensions
Loading state handling

Examples

Basic NFT Display

<Collectible 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  token_id={1}
/>

In a Grid Layout

<div className="grid grid-cols-3 gap-4">
  {nfts.map(nft => (
    <Collectible 
      key={nft.token_id}
      chain_id={nft.chain_id}
      address={nft.address}
      token_id={nft.token_id}
    />
  ))}
</div>

With Custom Styling

<Collectible 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  token_id={1}
  className="shadow-lg hover:shadow-xl transition-shadow"
/>

Component Structure

Container
- Fixed width of 120px
- Rounded corners
- Border
- Overflow hidden
Image
- Fixed dimensions (120x120)
- Maintains aspect ratio
- Centered display
Info Section
- White background
- Token ID display
- NFT name
- Proper padding

Metadata Resolution

The component automatically:

Fetches token URI from the contract
Resolves IPFS metadata
Extracts image URL and name
Handles IPFS gateway resolution

Collectible

On this page